From 9d98e87a8ff29707e1d83607b875c5d5aaf542d5 Mon Sep 17 00:00:00 2001
From: kabir <123084434+kabir-afk@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:19:44 +0530
Subject: [PATCH] feat : iframe video overlay buttons (#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
---
SignItVideosGallery.js | 46 ++-----------------------------
content_scripts/wpintegration.css | 29 +++++++++++++++++++
popup/popup.css | 29 +++++++++++++++++++
3 files changed, 60 insertions(+), 44 deletions(-)
diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js
index 555cea5..9166baf 100644
--- 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 = $('
');
@@ -33,48 +33,6 @@ var SignItVideosGallery = function (container) {
);
};
-const styles = `
-
-`;
-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) {
$(`
+ src="https://lingua-libre.github.io/SignIt/SignItVideosIframe.html?width=370&twospeed=${param.twospeed}&video=${files[i].filename}" class="">
${await banana.i18n(
"si-panel-videos-gallery-attribution",
url,
diff --git a/content_scripts/wpintegration.css b/content_scripts/wpintegration.css
index cd9d733..6651e2a 100644
--- 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
index dc86595..2b054a1 100644
--- 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%;
+}
\ No newline at end of file