再生時間の操作時に操作方向がわかるようにポップアップを表示

windyakin · Mar 14, 2024 · 261cb92 · 261cb92
1 parent a40cbbe
commit 261cb92
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/src/execute_script/script.ts b/src/execute_script/script.ts
@@ -15,11 +15,31 @@ export default function () {
     return;
   }
 
+  const controlDisplay = document.createElement('div');
+  controlDisplay.setAttribute('class', 'video-overlay-display');
+
+  player.appendChild(controlDisplay);
+
+  const startAnimation = () => {
+    controlDisplay.classList.remove('video-overlay-display-animation');
+    window.requestAnimationFrame(function () {
+      window.requestAnimationFrame(function () {
+        controlDisplay.classList.add('video-overlay-display-animation');
+      });
+    });
+  };
+
   const skip = () => {
     video.currentTime = video.currentTime + 10;
+    controlDisplay.classList.remove('video-overlay-display-forward');
+    controlDisplay.classList.add('video-overlay-display-skip');
+    startAnimation();
   }
   const forward = () => {
     video.currentTime = video.currentTime - 10;
+    controlDisplay.classList.remove('video-overlay-display-skip');
+    controlDisplay.classList.add('video-overlay-display-forward');
+    startAnimation();
   }
 
   const controlBarElements = document.getElementsByClassName('vjs-control-bar');

diff --git a/src/execute_script/style.css b/src/execute_script/style.css
@@ -1,3 +1,8 @@
+:root {
+  --forward-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iZm9yd2FyZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUuMDQgMjUuNDgiPgo8ZGVmcz48c3R5bGU+LmN7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTguMzcsMTcuMnYtNi41NWwtMS42NiwxLjI4LTEuMS0xLjUsMi45My0yLjE1aDEuOTN2OC45MWgtMi4xWiIvPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTE4Ljk5LDEyLjcyYzAsLjYzLS4wNiwxLjIzLS4xOSwxLjhzLS4zMywxLjA3LS42LDEuNWMtLjI4LjQzLS42NC43OC0xLjA4LDEuMDMtLjQ0LjI2LS45OC4zOC0xLjYuMzhzLTEuMTctLjEzLTEuNjEtLjM4Yy0uNDQtLjI2LS44MS0uNi0xLjA5LTEuMDMtLjI4LS40My0uNDgtLjkzLS42MS0xLjUtLjEzLS41Ny0uMTktMS4xNy0uMTktMS44cy4wNi0xLjIzLjE5LTEuNzljLjEzLS41Ny4zMy0xLjA2LjYxLTEuNDlzLjY0LS43NiwxLjA5LTEuMDFjLjQ0LS4yNS45OC0uMzgsMS42MS0uMzhzMS4xNi4xMywxLjYuMzhjLjQ0LjI1LjguNTksMS4wOCwxLjAxLjI4LjQyLjQ4LjkyLjYsMS40OXMuMTksMS4xNi4xOSwxLjc5Wm0tMi4xNywwYzAtLjI4LS4wMi0uNTgtLjA1LS45MnMtLjEtLjY1LS4xOS0uOTRjLS4wOS0uMjktLjIyLS41My0uNC0uNzMtLjE3LS4yLS40LS4zLS42Ny0uM3MtLjUuMS0uNjguMy0uMzEuNDQtLjQxLjczYy0uMS4yOS0uMTYuNi0uMi45NC0uMDMuMzQtLjA1LjY0LS4wNS45MnMuMDIuNi4wNS45NGMuMDMuMzQuMS42NS4yLjk0LjEuMjkuMjMuNTMuNDEuNzMuMTguMi40LjMuNjguM3MuNS0uMS42Ny0uM2MuMTctLjIuMy0uNDQuNC0uNzMuMDktLjI5LjE1LS42LjE5LS45NC4wMy0uMzQuMDUtLjY1LjA1LS45NFoiLz4KPHBhdGggY2xhc3M9ImMiIGQ9Im01LjQxLDE5LjY0YzMuOCwzLjgsOS45OSwzLjgsMTMuNzksMHMzLjgtOS45OSwwLTEzLjc5LTkuOTktMy44LTEzLjc5LDBsMS42NywxLjY3LTcuMDgsMS42MkwxLjYyLDIuMDZsMS42NywxLjY3YzQuOTctNC45NywxMy4wNi00Ljk3LDE4LjAzLDAsNC45Nyw0Ljk3LDQuOTcsMTMuMDYsMCwxOC4wMy0yLjQ5LDIuNDktNS43NSwzLjczLTkuMDEsMy43M3MtNi41My0xLjI0LTkuMDEtMy43M2MtLjk2LS45Ni0xLjc2LTIuMDYtMi4zNy0zLjI3bDIuNjgtMS4zNWMuNDcuOTIsMS4wOCwxLjc2LDEuODEsMi41WiIvPgo8L3N2Zz4K");
+  --skip-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ic2tpcCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUuMDQgMjUuNDgiPgo8ZGVmcz48c3R5bGU+LmN7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTguODEsMTcuMnYtNi41NWwtMS42NiwxLjI4LTEuMS0xLjUsMi45My0yLjE1aDEuOTN2OC45MWgtMi4xWiIvPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTE5LjQzLDEyLjcyYzAsLjYzLS4wNiwxLjIzLS4xOSwxLjhzLS4zMywxLjA3LS42LDEuNWMtLjI4LjQzLS42NC43OC0xLjA4LDEuMDMtLjQ0LjI2LS45OC4zOC0xLjYuMzhzLTEuMTctLjEzLTEuNjEtLjM4Yy0uNDQtLjI2LS44MS0uNi0xLjA5LTEuMDMtLjI4LS40My0uNDgtLjkzLS42MS0xLjUtLjEzLS41Ny0uMTktMS4xNy0uMTktMS44cy4wNi0xLjIzLjE5LTEuNzljLjEzLS41Ny4zMy0xLjA2LjYxLTEuNDlzLjY0LS43NiwxLjA5LTEuMDFjLjQ0LS4yNS45OC0uMzgsMS42MS0uMzhzMS4xNi4xMywxLjYuMzhjLjQ0LjI1LjguNTksMS4wOCwxLjAxLjI4LjQyLjQ4LjkyLjYsMS40OXMuMTksMS4xNi4xOSwxLjc5Wm0tMi4xNywwYzAtLjI4LS4wMi0uNTgtLjA1LS45MnMtLjEtLjY1LS4xOS0uOTRjLS4wOS0uMjktLjIyLS41My0uNC0uNzMtLjE3LS4yLS40LS4zLS42Ny0uM3MtLjUuMS0uNjguMy0uMzEuNDQtLjQxLjczYy0uMS4yOS0uMTYuNi0uMi45NC0uMDMuMzQtLjA1LjY0LS4wNS45MnMuMDIuNi4wNS45NGMuMDMuMzQuMS42NS4yLjk0LjEuMjkuMjMuNTMuNDEuNzMuMTguMi40LjMuNjguM3MuNS0uMS42Ny0uM2MuMTctLjIuMy0uNDQuNC0uNzMuMDktLjI5LjE1LS42LjE5LS45NC4wMy0uMzQuMDUtLjY1LjA1LS45NFoiLz4KPHBhdGggY2xhc3M9ImMiIGQ9Im0xOS42NCwxOS42NGMtMy44LDMuOC05Ljk5LDMuOC0xMy43OSwwcy0zLjgtOS45OSwwLTEzLjc5LDkuOTktMy44LDEzLjc5LDBsLTEuNjcsMS42Nyw3LjA4LDEuNjItMS42Mi03LjA4LTEuNjcsMS42N0MxNi43OS0xLjI0LDguNy0xLjI0LDMuNzMsMy43M2MtNC45Nyw0Ljk3LTQuOTcsMTMuMDYsMCwxOC4wMywyLjQ5LDIuNDksNS43NSwzLjczLDkuMDEsMy43M3M2LjUzLTEuMjQsOS4wMS0zLjczYy45Ni0uOTYsMS43Ni0yLjA2LDIuMzctMy4yN2wtMi42OC0xLjM1Yy0uNDcuOTItMS4wOCwxLjc2LTEuODEsMi41WiIvPgo8L3N2Zz4K");
+}
+
 .sps-button::before {
   content: '';
   display: block;
@@ -9,11 +14,11 @@
 }
 
 .sps-forward-button::before {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iZm9yd2FyZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUuMDQgMjUuNDgiPgo8ZGVmcz48c3R5bGU+LmN7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTguMzcsMTcuMnYtNi41NWwtMS42NiwxLjI4LTEuMS0xLjUsMi45My0yLjE1aDEuOTN2OC45MWgtMi4xWiIvPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTE4Ljk5LDEyLjcyYzAsLjYzLS4wNiwxLjIzLS4xOSwxLjhzLS4zMywxLjA3LS42LDEuNWMtLjI4LjQzLS42NC43OC0xLjA4LDEuMDMtLjQ0LjI2LS45OC4zOC0xLjYuMzhzLTEuMTctLjEzLTEuNjEtLjM4Yy0uNDQtLjI2LS44MS0uNi0xLjA5LTEuMDMtLjI4LS40My0uNDgtLjkzLS42MS0xLjUtLjEzLS41Ny0uMTktMS4xNy0uMTktMS44cy4wNi0xLjIzLjE5LTEuNzljLjEzLS41Ny4zMy0xLjA2LjYxLTEuNDlzLjY0LS43NiwxLjA5LTEuMDFjLjQ0LS4yNS45OC0uMzgsMS42MS0uMzhzMS4xNi4xMywxLjYuMzhjLjQ0LjI1LjguNTksMS4wOCwxLjAxLjI4LjQyLjQ4LjkyLjYsMS40OXMuMTksMS4xNi4xOSwxLjc5Wm0tMi4xNywwYzAtLjI4LS4wMi0uNTgtLjA1LS45MnMtLjEtLjY1LS4xOS0uOTRjLS4wOS0uMjktLjIyLS41My0uNC0uNzMtLjE3LS4yLS40LS4zLS42Ny0uM3MtLjUuMS0uNjguMy0uMzEuNDQtLjQxLjczYy0uMS4yOS0uMTYuNi0uMi45NC0uMDMuMzQtLjA1LjY0LS4wNS45MnMuMDIuNi4wNS45NGMuMDMuMzQuMS42NS4yLjk0LjEuMjkuMjMuNTMuNDEuNzMuMTguMi40LjMuNjguM3MuNS0uMS42Ny0uM2MuMTctLjIuMy0uNDQuNC0uNzMuMDktLjI5LjE1LS42LjE5LS45NC4wMy0uMzQuMDUtLjY1LjA1LS45NFoiLz4KPHBhdGggY2xhc3M9ImMiIGQ9Im01LjQxLDE5LjY0YzMuOCwzLjgsOS45OSwzLjgsMTMuNzksMHMzLjgtOS45OSwwLTEzLjc5LTkuOTktMy44LTEzLjc5LDBsMS42NywxLjY3LTcuMDgsMS42MkwxLjYyLDIuMDZsMS42NywxLjY3YzQuOTctNC45NywxMy4wNi00Ljk3LDE4LjAzLDAsNC45Nyw0Ljk3LDQuOTcsMTMuMDYsMCwxOC4wMy0yLjQ5LDIuNDktNS43NSwzLjczLTkuMDEsMy43M3MtNi41My0xLjI0LTkuMDEtMy43M2MtLjk2LS45Ni0xLjc2LTIuMDYtMi4zNy0zLjI3bDIuNjgtMS4zNWMuNDcuOTIsMS4wOCwxLjc2LDEuODEsMi41WiIvPgo8L3N2Zz4K');
+  background-image: var(--forward-image);
 }
 
 .sps-skip-button::before {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ic2tpcCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUuMDQgMjUuNDgiPgo8ZGVmcz48c3R5bGU+LmN7ZmlsbDojZmZmfTwvc3R5bGU+PC9kZWZzPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTguODEsMTcuMnYtNi41NWwtMS42NiwxLjI4LTEuMS0xLjUsMi45My0yLjE1aDEuOTN2OC45MWgtMi4xWiIvPgo8cGF0aCBjbGFzcz0iYyIgZD0ibTE5LjQzLDEyLjcyYzAsLjYzLS4wNiwxLjIzLS4xOSwxLjhzLS4zMywxLjA3LS42LDEuNWMtLjI4LjQzLS42NC43OC0xLjA4LDEuMDMtLjQ0LjI2LS45OC4zOC0xLjYuMzhzLTEuMTctLjEzLTEuNjEtLjM4Yy0uNDQtLjI2LS44MS0uNi0xLjA5LTEuMDMtLjI4LS40My0uNDgtLjkzLS42MS0xLjUtLjEzLS41Ny0uMTktMS4xNy0uMTktMS44cy4wNi0xLjIzLjE5LTEuNzljLjEzLS41Ny4zMy0xLjA2LjYxLTEuNDlzLjY0LS43NiwxLjA5LTEuMDFjLjQ0LS4yNS45OC0uMzgsMS42MS0uMzhzMS4xNi4xMywxLjYuMzhjLjQ0LjI1LjguNTksMS4wOCwxLjAxLjI4LjQyLjQ4LjkyLjYsMS40OXMuMTksMS4xNi4xOSwxLjc5Wm0tMi4xNywwYzAtLjI4LS4wMi0uNTgtLjA1LS45MnMtLjEtLjY1LS4xOS0uOTRjLS4wOS0uMjktLjIyLS41My0uNC0uNzMtLjE3LS4yLS40LS4zLS42Ny0uM3MtLjUuMS0uNjguMy0uMzEuNDQtLjQxLjczYy0uMS4yOS0uMTYuNi0uMi45NC0uMDMuMzQtLjA1LjY0LS4wNS45MnMuMDIuNi4wNS45NGMuMDMuMzQuMS42NS4yLjk0LjEuMjkuMjMuNTMuNDEuNzMuMTguMi40LjMuNjguM3MuNS0uMS42Ny0uM2MuMTctLjIuMy0uNDQuNC0uNzMuMDktLjI5LjE1LS42LjE5LS45NC4wMy0uMzQuMDUtLjY1LjA1LS45NFoiLz4KPHBhdGggY2xhc3M9ImMiIGQ9Im0xOS42NCwxOS42NGMtMy44LDMuOC05Ljk5LDMuOC0xMy43OSwwcy0zLjgtOS45OSwwLTEzLjc5LDkuOTktMy44LDEzLjc5LDBsLTEuNjcsMS42Nyw3LjA4LDEuNjItMS42Mi03LjA4LTEuNjcsMS42N0MxNi43OS0xLjI0LDguNy0xLjI0LDMuNzMsMy43M2MtNC45Nyw0Ljk3LTQuOTcsMTMuMDYsMCwxOC4wMywyLjQ5LDIuNDksNS43NSwzLjczLDkuMDEsMy43M3M2LjUzLTEuMjQsOS4wMS0zLjczYy45Ni0uOTYsMS43Ni0yLjA2LDIuMzctMy4yN2wtMi42OC0xLjM1Yy0uNDcuOTItMS4wOCwxLjc2LTEuODEsMi41WiIvPgo8L3N2Zz4K');
+  background-image: var(--skip-image);
 }
 
 #sps-override-input {
@@ -24,3 +29,57 @@
   height: 0;
   opacity: 0;
 }
+
+.video-overlay-display {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: auto;
+  width: 10%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 65%;
+  border-radius: 10%;
+  pointer-events: none;
+}
+
+.video-overlay-display::before {
+  content: '';
+  display: block;
+  width: 100%;
+  padding-top: 100%;
+}
+
+.video-overlay-display-animation {
+  animation: video-overlay-display-in 0.4s ease-in-out;
+}
+
+@keyframes video-overlay-display-in {
+  0% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 0;
+  }
+  20% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.7;
+  }
+  80% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
+
+.video-overlay-display-forward {
+  background-image: var(--forward-image);
+}
+
+.video-overlay-display-skip {
+  background-image: var(--skip-image);
+}