From 444cb14e8a1fddac5c6a1bf797d11e920e308b23 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Mon, 26 Aug 2024 23:21:24 +1000 Subject: [PATCH] feat: switch to github for update video --- manifest.firefox.json | 2 +- src/SEQTA.ts | 18 +++++---- src/background.ts | 11 ----- src/css/injected.scss | 20 ---------- src/seqta/ui/VideoLoader.ts | 80 ------------------------------------- 5 files changed, 11 insertions(+), 120 deletions(-) delete mode 100644 src/seqta/ui/VideoLoader.ts diff --git a/manifest.firefox.json b/manifest.firefox.json index 77f159ee..66eb9589 100644 --- a/manifest.firefox.json +++ b/manifest.firefox.json @@ -17,7 +17,7 @@ "64": "src/resources/icons/icon-64.png" } }, - "permissions": ["tabs", "notifications", "storage", "activeTab", "scripting"], + "permissions": ["tabs", "notifications", "storage", "activeTab"], "host_permissions": [""], "background": { "scripts": ["src/background.ts"] diff --git a/src/SEQTA.ts b/src/SEQTA.ts index c18a3f90..837cb9f4 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -17,7 +17,6 @@ import loading, { AppendLoadingSymbol } from './seqta/ui/Loading' import { enableCurrentTheme } from './seqta/ui/themes/enableCurrent' import { updateAllColors } from './seqta/ui/colors/Manager' import { SettingsResizer } from './seqta/ui/SettingsResizer' -import { injectYouTubeVideo } from './seqta/ui/VideoLoader' import { AddBetterSEQTAElements } from './seqta/ui/AddBetterSEQTAElements' // JSON content @@ -142,9 +141,16 @@ export function OpenWhatsNewPopup() { let imagecont = document.createElement('div') imagecont.classList.add('whatsnewImgContainer') - let div = document.createElement('div') - div.classList.add('whatsnewImg') - imagecont.appendChild(div) + let video = document.createElement('video') + let source = document.createElement('source') + // Perhaps we host this on a server and then grab it instead of having it locally? + source.setAttribute('src', 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-video.mp4') + video.autoplay = true + video.muted = true + video.loop = true + video.appendChild(source) + video.classList.add('whatsnewImg') + imagecont.appendChild(video) let textcontainer = document.createElement('div') textcontainer.classList.add('whatsnewTextContainer') @@ -304,10 +310,6 @@ export function OpenWhatsNewPopup() { let bkelement = document.getElementById('whatsnewbk') let popup = document.getElementsByClassName('whatsnewContainer')[0] - injectYouTubeVideo( - 'JdDA45GYEUc', 'PLSlFV-9e6dvyvZJFPCtBMb3LSp-LGbrbI', document.querySelector('.whatsnewImg')!, true, true, '100%', '100%' - ) - if (settingsState.animations) { animate( [popup, bkelement as HTMLElement], diff --git a/src/background.ts b/src/background.ts index d09f81a8..5fae49e8 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,6 +1,5 @@ import browser from 'webextension-polyfill' import { SettingsState } from "./types/storage"; -import { applyYoutubeStyles } from './seqta/ui/VideoLoader'; export const openDB = () => { return new Promise((resolve, reject) => { @@ -117,16 +116,6 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: GetNews(sendResponse, url); return true; - - case 'youtubeIframe': - const { hideControls } = request; - - browser.scripting.executeScript({ - target: { tabId: _sender.tab.id, allFrames: true }, - func: applyYoutubeStyles, - args: [hideControls] - }); - break; default: console.log('Unknown request type'); diff --git a/src/css/injected.scss b/src/css/injected.scss index 8f42535c..680312f9 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -2903,32 +2903,12 @@ li.MessageList__unread___3imtO { padding-bottom: 16px; } .whatsnewImg { - background-color: black; - pointer-events: none !important; margin: 8px auto; width: 90%; border-radius: 16px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } -.whatsnewImg > iframe { - aspect-ratio: 16/9.823; - width: 100%; - height: 100%; - border-radius: 16px; - opacity: 0; - - animation: fade-in 0.5s forwards; - animation-delay: 0.8s !important; -} -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} .whatsnewTextContainer { display: flex; overflow-x: hidden; diff --git a/src/seqta/ui/VideoLoader.ts b/src/seqta/ui/VideoLoader.ts deleted file mode 100644 index 61209fcd..00000000 --- a/src/seqta/ui/VideoLoader.ts +++ /dev/null @@ -1,80 +0,0 @@ -import Browser from "webextension-polyfill"; - -/** - * Injects a YouTube iframe into the specified element. - * - * @param videoId - The YouTube video ID to embed. - * @param playlistId - The YouTube playlist ID to allow embed to loop. - * @param mountElement - The element to mount the iframe to. - * @param hideControls - Whether to hide the YouTube player controls. - * @param mute - Whether to mute the video. - * @param width - The width of the iframe. - * @param height - The height of the iframe. - */ -export function injectYouTubeVideo(videoId: string, playlistId: string, mountElement: HTMLElement, hideControls: boolean, mute: boolean, width: string, height: string): void { - const controlsParam = hideControls ? 'controls=0' : 'controls=1'; - const autoplayParam = 'autoplay=1'; - const muteParam = mute ? 'mute=1' : 'mute=0'; - const listParams = playlistId ? `list=${playlistId}&` : ''; - - const iframeSrc = `https://www.youtube.com/embed/${videoId}?${listParams}${autoplayParam}&${controlsParam}&${muteParam}&loop=1`; - const iframe = document.createElement('iframe'); - - iframe.width = width; - iframe.height = height; - iframe.src = iframeSrc; - iframe.frameBorder = '0'; - iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'; - iframe.allowFullscreen = true; - - iframe.onload = () => { - Browser.runtime.sendMessage({ type: 'youtubeIframe', hideControls }); - }; - - mountElement.innerHTML = ''; // Clear any existing content - mountElement.appendChild(iframe); - - /* if (hideControls) { - applyCustomStylesToIframe(iframe); - } */ -} - -/** - * Function to inject CSS styles into the iframe. - * - * @param hideControls - Whether to hide the YouTube player controls. - */ -export function applyYoutubeStyles(hideControls: boolean) { - if (window.location == window.parent.location) return; - if (!window.location.href.includes('youtube.com/embed/')) return; - - if (hideControls) { - const hideControlsCss = ` - .ytp-gradient-top, - .ytp-chrome-bottom, - .ytp-chrome-top, - .ytp-chrome-top-buttons, - .ytp-pause-overlay, - .ytp-watermark { - display: none !important; - } - `; - const hideControlsStyle = document.createElement('style'); - hideControlsStyle.textContent = hideControlsCss; - document.head.appendChild(hideControlsStyle); - - const f =() => { - const btn = document.querySelector('.ytp-ad-skip-button') as HTMLButtonElement | null; - const adText = document.querySelector('.ytp-ad-text'); - const v = document.querySelector('video')!; - if(adText){ - v.currentTime = v.duration - } - if(btn){ - v.currentTime = v.duration - btn.click(); - } - } - setInterval(f, 100); - } -}