feat : iframe video overlay buttons (lingua-libre#110)

* bugfix : reset width query parameter from 2700 to 250 this caused the video to be enormously huge * added overlay buttons maximized the video size to 370px for better results * refactor : btn positions * remove : style tag * feat : added CSS for overlay buttons
kabir-afk · Aug 21, 2024 · 9d98e87 · 9d98e87
1 parent 98910c5
commit 9d98e87
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 44 deletions.
diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js
@@ -10,7 +10,7 @@ var SignItVideosGallery = function (container) {
   this.nextVideoButton = new OO.ui.ButtonWidget({
     icon: "nextBtn",
     framed: false,
-    classes: ["signit-gallery-videos-button", "signit-gallery-videos-next"],
+    classes: ["signit-gallery-videos-buttons", "signit-gallery-videos-next"],
   });
   this.$videoContainer = $('<div class="signit-panel-videos-gallery">');
 
@@ -33,48 +33,6 @@ var SignItVideosGallery = function (container) {
   );
 };
 
-const styles = `
-<style type="text/css">
-  .signit-panel-videos {
-    text-align: center;
-  }
-  .signit-gallery-videos {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .signit-panel-videos-gallery iframe,
-  .signit-gallery-videos iframe {
-    box-shadow: 0 0 0.5rem #999;
-    width: 100%;
-    border: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-    margin-right: -50px;
-    min-height: 220px;
-  }
-  .signit-gallery-videos-buttons {
-    background-color: white; /* Customize the background color */       
-    border: none;              /* Remove the border */
-    border-radius: 5px;        /* Rounded corners */
-    cursor: pointer;           /* Pointer cursor on hover */
-  }
-  .signit-gallery-videos-prev {
-    float: left;               /* Align to the left */
-  }
-  .signit-gallery-videos-next {
-    float: right;              /* Align to the right */
-  }
-  .signit-gallery-videos-gallery {
-    position: relative;
-    overflow: hidden;
-    height: auto;
-  }
-</style>
-`;
-document.head.insertAdjacentHTML("beforeend", styles);
 SignItVideosGallery.prototype.refresh = async function (files) {
   var banana = {
     i18n: async (msg, ...arg) => {
@@ -114,7 +72,7 @@ SignItVideosGallery.prototype.refresh = async function (files) {
       $(`
 			<div style="display: none;">
 				<iframe controls="" muted="" preload="auto"
-        src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?width=2700&twospeed=${param.twospeed}&video=${files[i].filename}" class=""></iframe>
+        src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?width=370&twospeed=${param.twospeed}&video=${files[i].filename}" class=""></iframe>
 				${await banana.i18n(
           "si-panel-videos-gallery-attribution",
           url,

diff --git a/content_scripts/wpintegration.css b/content_scripts/wpintegration.css
@@ -1,3 +1,32 @@
+.signit-panel-videos {
+    position:relative;
+    text-align: center;
+}
+.signit-panel-videos-gallery{
+    width: 100%;
+}
+.signit-panel-videos-gallery iframe,
+.signit-gallery-videos iframe {
+    box-shadow: 0 0 0.5rem #999;
+    width: 100%;
+    min-height: 220px;
+}
+.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 */
+}
+.signit-gallery-videos-prev {
+	z-index:1;
+	left : 10%;
+}
+.signit-gallery-videos-next {
+	left : 90%;
+}
 .signit-inline-container {
 	display: flex;
 	align-items: center;

diff --git a/popup/popup.css b/popup/popup.css
@@ -251,3 +251,32 @@ html, body {
 	background-image: url( '../icons/down-long-solid.svg' );
 
 }
+.signit-panel-videos {
+    position:relative;
+    text-align: center;
+}
+.signit-panel-videos-gallery{
+    width: 100%;
+}
+.signit-panel-videos-gallery iframe,
+.signit-gallery-videos iframe {
+    box-shadow: 0 0 0.5rem #999;
+    width: 100%;
+    min-height: 220px;
+}
+.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 */
+}
+.signit-gallery-videos-prev {
+	z-index:1;
+	left : 10%;
+}
+.signit-gallery-videos-next {
+	left : 90%;
+}