Merge pull request #109 from kabir-afk/refactor/twospeed

Refactor/twospeed with intermediate iframe and url parameters

README.md

@@ -46,6 +46,7 @@ See also [Mozilla's web-ext](https://github.com/mozilla/web-ext)
 ├── sw.js — main script for Chromium browsers.
 ├── SignItCoreContent.js — creates duo panels "Video | Definition"
 ├── SignItVideosGallery.js — given urls, creates gallery of videos.
+├── SignItVideosIframe.html — contains intermediate iframe for videos and twsospeed feature.
 ├── content_scripts/
 |   ├── signit.js — creates above text SignIt popup
 |   └── wpintegration.js — on wikimedia sites, if page's title has a sign language video available, then display smartly.
@@ -64,7 +65,7 @@ Chrome web store had started deprecating the web extensions with manifest versio
  While there were other options like making your own i18n function , based on the arguments received from `sw.js` , but that was a repetitive task when using i18n inside multiple files.
 
  Other option was to use `browser.i18n` native API. This was an ok option but didn't allow users to change to their desired language , only changed them when browser's language was different. For someone who didn't want the extension to run in his native language or wanted to run it in different language had no control.
-* iframe instead of video tag : While this fix was made so that extension could work on sites with stricter CSPs like github or X, this broke the `twospeed` feature. The `twospeed` feature , when enabled allowed the users to see sign language video first in normal speed then in slow mo. It's code worked with event listeners of video tag , but since we replaced it with iframe , this feature no longer works. While you might think that accessing content document inside  iframe is no biggie , it doesn't work as the video embedded and the parent inside which the iframe is embedded in belong to different origins. Again this is something that can and should be improvised by future devs reading this.
+* iframe instead of video tag : This fix was made so that extension could work on sites with stricter CSPs like github or X. `declarativeNetRequest` API was certainly an alternative but it is not yet fully functional. We can't append headers , not even a single one despite being mentioned in docs.
 
 ## Contribute
 ### Contributors

SignItVideosGallery.js

@@ -39,9 +39,11 @@ SignItVideosGallery.prototype.refresh = async function ( files ) {
 		speaker = files[ i ].speaker,
 		total = files.length;
 		console.log(await banana.i18n("si-panel-videos-gallery-attribution",url, speaker, i+1, total));
+		param = await browser.storage.local.get( 'twospeed' );
+
 		this.$videos.push( $( `
 			<div style="display: none;">
-				<iframe controls="" muted="" preload="auto" src="${ files[ i ].filename }" class="" allow="autoplay *"></iframe>
+				<iframe controls="" muted="" preload="auto" src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?twospeed=${param.twospeed}&video=${ files[ i ].filename }" class=""></iframe>
 				${await banana.i18n("si-panel-videos-gallery-attribution",url, speaker, i+1, total)}
 			</div>
 		` ) );
@@ -51,44 +53,16 @@ SignItVideosGallery.prototype.refresh = async function ( files ) {
 	this.switchVideo( 0 );
 };
 
-SignItVideosGallery.prototype.switchVideo = function ( newIndex ) {
-	var speedNormal = 1, speedSlow = 0.5;
-
-	this.$videos[ this.currentIndex ].hide();
-	this.currentIndex = newIndex;
-	this.$videos[ this.currentIndex ].show();
-	$currentVideo = this.$videos[ this.currentIndex ].children( 'iframe' )[ 0 ];
-
-	$( async function () {
-		param = await browser.storage.local.get( 'twospeed' );
-		if ( param.twospeed === false ) {
-			console.warn( 'twospeed disabled' );
-			return;
-		}
-		// addClass(), removeClass(), and toggleClass()
-		if ( param.twospeed === true ) {
-			$currentVideo.addEventListener('ended', function(event) {
-				// Normal speed just played
-				if (!this.classList.contains('slow')) {
-					this.classList.add('slow');
-					this.playbackRate = speedSlow || 0.75;
-					this.play();
-				}
-				// Slow speed just played
-				else {
-					this.classList.remove('slow');
-					this.playbackRate = speedNormal || 1;
-					this.pause();
-				}
-			})
-		}
-	})
+SignItVideosGallery.prototype.switchVideo = function (newIndex) {
+  this.$videos[this.currentIndex].hide();
+  this.currentIndex = newIndex;
+  this.$videos[this.currentIndex].show();
 
-	// Arrows disables when on edges
-	this.currentIndex === 0 ?
-		this.previousVideoButton.setDisabled( true )
-		:this.previousVideoButton.setDisabled( false );
-	this.currentIndex >= this.$videos.length - 1 ?
-		this.nextVideoButton.setDisabled( true )
-		:this.nextVideoButton.setDisabled( false );
+  // Arrows disables when on edges
+  this.currentIndex === 0
+    ? this.previousVideoButton.setDisabled(true)
+    : this.previousVideoButton.setDisabled(false);
+  this.currentIndex >= this.$videos.length - 1
+    ? this.nextVideoButton.setDisabled(true)
+    : this.nextVideoButton.setDisabled(false);
 };

manifest.json

@@ -88,7 +88,7 @@
     }
   },
   "content_security_policy": {
-    "extension_pages": "default-src 'self' data: https://lingualibre.org https://*.wikimedia.org https://*.wikipedia.org https://*.wiktionary.org; script-src 'self';  style-src 'self' 'unsafe-inline'; img-src 'self' data",
+    "extension_pages": "default-src 'self' data: https://lingualibre.org https://*.wikimedia.org https://*.wikipedia.org https://*.wiktionary.org https://*.github.io/; script-src 'self';  style-src 'self' 'unsafe-inline'; img-src 'self' data",
     "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
   },
   "action": {