From a1ab401bbb7ea36a5b88940a91238201cc173667 Mon Sep 17 00:00:00 2001
From: hugolpz <hugo.lpz@gmail.com>
Date: Wed, 21 Aug 2024 14:18:46 +0200
Subject: [PATCH] feat: seamless iframe pushed further.

---
 SignItVideosGallery.js            | 11 +++++++----
 SignItVideosIframe.html           | 18 ++++++++++--------
 content_scripts/wpintegration.css | 29 +++++++++++++++++++----------
 popup/popup.css                   | 28 +++++++++++++++-------------
 4 files changed, 51 insertions(+), 35 deletions(-)
diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js
index 9166baf..561b487 100644
--- a/SignItVideosGallery.js
+++ b/SignItVideosGallery.js
@@ -69,10 +69,13 @@ SignItVideosGallery.prototype.refresh = async function (files) {
     param = await browser.storage.local.get("twospeed");
 
     this.$videos.push(
-      $(`
-			<div style="display: none;">
-				<iframe controls="" muted="" preload="auto"
-        src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?width=370&twospeed=${param.twospeed}&video=${files[i].filename}" class=""></iframe>
+      $(`<div style="display: none;">
+		<iframe
+            controls muted preload="auto" autoplay
+            frameborder="0" scrolling="no"
+            src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?width=380&twospeed=${param.twospeed}&video=${files[i].filename}"
+            class="">
+        </iframe>
 				${await banana.i18n(
           "si-panel-videos-gallery-attribution",
           url,
diff --git a/SignItVideosIframe.html b/SignItVideosIframe.html
index 02fba7d..73ed773 100644
--- a/SignItVideosIframe.html
+++ b/SignItVideosIframe.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="signitVideo-body">
 
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Load Video from URL Parameter</title>
   </head>
-
-  <body>
+  <body id="signitVideo-body">
     <p id="no-video-url" style="display:none;">Video URL missing, try with suffix :
-      <a href="./SignItVideosIframe.html?width=250&twospeed=true&video=https://upload.wikimedia.org/wikipedia/commons/6/63/Lapin_Nm_1_2_1_-_Elix.webm">
-        ?twospeed=true&video=https://upload.wikimedia.org/wikipedia/commons/6/63/Lapin_Nm_1_2_1_-_Elix.webm
+      <a href="./SignItVideosIframe.html?width=380&twospeed=true&video=https://upload.wikimedia.org/wikipedia/commons/6/63/Lapin_Nm_1_2_1_-_Elix.webm">
+        ?width=380&twospeed=true&video=https://upload.wikimedia.org/wikipedia/commons/6/63/Lapin_Nm_1_2_1_-_Elix.webm
       </a>
     </p>
-    <video id="signitVideoElement" controls="" muted="" preload="auto" autoplay="true" src="videoUrl" width="250" class="">
+    <video id="signitVideoElement"
+           src="videoUrl" width="" class="" >
       Your browser does not support the video tag.
     </video>
     <script>
@@ -38,8 +38,10 @@
         }
 
         // Pass size parameter
-        var width = getUrlParameter('width') || 270;
-        document.getElementById('signitVideoElement').width = width;
+        var width = getUrlParameter('width') || 380;
+        document.querySelector('html').style.width = width;
+        document.querySelector('body').style.width = width;
+        document.querySelector('video').style.width = width;
 
         // Pass speed parameter
         var speedNormal = getUrlParameter('speedNormal') || 1,
diff --git a/content_scripts/wpintegration.css b/content_scripts/wpintegration.css
index 6651e2a..af2379b 100644
--- a/content_scripts/wpintegration.css
+++ b/content_scripts/wpintegration.css
@@ -1,3 +1,6 @@
+/* ****************************************************** */
+/* VIDEO PANEL'S IFRAME ********************************* */
+/* Copied from popup.css ******************************** */
 .signit-panel-videos {
     position:relative;
     text-align: center;
@@ -9,24 +12,28 @@
 .signit-gallery-videos iframe {
     box-shadow: 0 0 0.5rem #999;
     width: 100%;
-    min-height: 220px;
+    aspect-ratio: 16 / 12;
+    border: 0;       /* no border */
+    overflow:hidden; /* no scroll */
 }
 .signit-gallery-videos-buttons {
-	position : absolute;
-	top:40%;
-	transform : translate(-50%);
-	background-color: white; /* Customize the background color */       
-	border: none;              /* Remove the border */
-	border-radius: 5px;        /* Rounded corners */
-	cursor: pointer;           /* Pointer cursor on hover */
+    position : absolute;
+    top:40%;
+    transform : translate(-50%);
+    background-color: #FFFFFF66;/* Customize the background color */       
+    border: none;               /* Remove the border */
+    border-radius: 5px;         /* Rounded corners */
+    cursor: pointer;            /* Pointer cursor on hover */
+    z-index:1;
 }
 .signit-gallery-videos-prev {
-	z-index:1;
 	left : 10%;
 }
 .signit-gallery-videos-next {
 	left : 90%;
 }
+
+/* Is this below needed ? ******** */
 .signit-inline-container {
 	display: flex;
 	align-items: center;
@@ -38,8 +45,10 @@
 .signit-inline-container iframe {
 	box-shadow: 0 0 .5rem #999;
 }
+/* Is this above needed ? ******** */
 
-.oo-ui-icon-nextBtn , .oo-ui-icon-previousBtn{
+.oo-ui-icon-nextBtn,
+.oo-ui-icon-previousBtn {
 	padding-top: 5px;
 }
 .oo-ui-icon-nextBtn::after {
diff --git a/popup/popup.css b/popup/popup.css
index 2b054a1..c543f36 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -185,11 +185,6 @@ html, body {
 	align-items: center;
 }
 
-.signit-gallery-videos iframe {
-	box-shadow: 0 0 .5rem #999;
-	width: 345px;
-}
-
 .signit-definitions {
 	padding-right: 12px;
 	padding-left: 6px;
@@ -222,7 +217,8 @@ html, body {
 	margin: auto;
 }
 
-.oo-ui-icon-nextBtn , .oo-ui-icon-previousBtn{
+.oo-ui-icon-nextBtn,
+.oo-ui-icon-previousBtn{
 	padding-top: 5px;
 }
 .oo-ui-icon-nextBtn::after {
@@ -251,6 +247,10 @@ html, body {
 	background-image: url( '../icons/down-long-solid.svg' );
 
 }
+
+/* ****************************************************** */
+/* VIDEO PANEL'S IFRAME ********************************* */
+/* If changed, to copy into wpintegration.css *********** */
 .signit-panel-videos {
     position:relative;
     text-align: center;
@@ -262,21 +262,23 @@ html, body {
 .signit-gallery-videos iframe {
     box-shadow: 0 0 0.5rem #999;
     width: 100%;
-    min-height: 220px;
+    aspect-ratio: 16 / 12;
+    border: 0;       /* no border */
+    overflow:hidden; /* no scroll */
 }
 .signit-gallery-videos-buttons {
     position : absolute;
     top:40%;
     transform : translate(-50%);
-    background-color: white; /* Customize the background color */       
-    border: none;              /* Remove the border */
-    border-radius: 5px;        /* Rounded corners */
-    cursor: pointer;           /* Pointer cursor on hover */
+    background-color: #FFFFFF66;/* Customize the background color */       
+    border: none;               /* Remove the border */
+    border-radius: 5px;         /* Rounded corners */
+    cursor: pointer;            /* Pointer cursor on hover */
+    z-index:1;
 }
 .signit-gallery-videos-prev {
-	z-index:1;
 	left : 10%;
 }
 .signit-gallery-videos-next {
 	left : 90%;
-}
\ No newline at end of file
+}
