diff --git a/src/execute_script/script.ts b/src/execute_script/script.ts index cd2c10e..c73df24 100644 --- 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 index 93ff6fc..0ff408c 100644 --- 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); +}