feat: switch to github for update video

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": ["<all_urls>"],
   "background": {
     "scripts": ["src/background.ts"]

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')
+  let video = document.createElement('video')
-  div.classList.add('whatsnewImg')
+  let source = document.createElement('source')
-  imagecont.appendChild(div)
+  // 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],

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) => {
@@ -118,16 +117,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');
   }

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;

src/seqta/ui/VideoLoader.ts

@@ -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);
-  }
-}