diff --git a/ext/package-lock.json b/ext/package-lock.json index d7ee67e..5e3c53a 100644 --- a/ext/package-lock.json +++ b/ext/package-lock.json @@ -6,7 +6,6 @@ "": { "devDependencies": { "@types/firefox-webext-browser": "^94.0.1", - "@types/react-dom": "^18.0.2", "@types/semver": "^7.3.9", "@types/uuid": "^8.3.4", "esbuild": "^0.14.38", @@ -379,38 +378,12 @@ "integrity": "sha512-z/FG/6DUO7pnze3AE3TBGIjGGKkvCcGcWINe1C7cADY8hKLJPDYpzsNE37uExQ4md5RFtTCvg+M8Mu1Enyeg2A==", "dev": true }, - "node_modules/@types/prop-types": { - "version": "15.7.5", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true - }, "node_modules/@types/pug": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz", "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==", "dev": true }, - "node_modules/@types/react": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz", - "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==", - "dev": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/react-dom": { - "version": "18.0.2", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz", - "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/sass": { "version": "1.43.1", "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz", @@ -420,12 +393,6 @@ "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true - }, "node_modules/@types/semver": { "version": "7.3.9", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz", @@ -1698,12 +1665,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/csstype": { - "version": "3.0.11", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", - "dev": true - }, "node_modules/dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -8077,38 +8038,12 @@ "integrity": "sha512-z/FG/6DUO7pnze3AE3TBGIjGGKkvCcGcWINe1C7cADY8hKLJPDYpzsNE37uExQ4md5RFtTCvg+M8Mu1Enyeg2A==", "dev": true }, - "@types/prop-types": { - "version": "15.7.5", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true - }, "@types/pug": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz", "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==", "dev": true }, - "@types/react": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz", - "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==", - "dev": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "@types/react-dom": { - "version": "18.0.2", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz", - "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/sass": { "version": "1.43.1", "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz", @@ -8118,12 +8053,6 @@ "@types/node": "*" } }, - "@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true - }, "@types/semver": { "version": "7.3.9", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz", @@ -9136,12 +9065,6 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", "dev": true }, - "csstype": { - "version": "3.0.11", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", - "dev": true - }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/ext/package.json b/ext/package.json index 83f5de2..ae99a0c 100644 --- a/ext/package.json +++ b/ext/package.json @@ -9,7 +9,6 @@ }, "devDependencies": { "@types/firefox-webext-browser": "^94.0.1", - "@types/react-dom": "^18.0.2", "@types/semver": "^7.3.9", "@types/uuid": "^8.3.4", "esbuild": "^0.14.38", diff --git a/ext/src/ui/popup/ReceiverMedia.svelte b/ext/src/ui/popup/ReceiverMedia.svelte index a7defd8..65bf118 100644 --- a/ext/src/ui/popup/ReceiverMedia.svelte +++ b/ext/src/ui/popup/ReceiverMedia.svelte @@ -124,6 +124,31 @@ ret += date.getUTCSeconds().toString().padStart(2, "0"); return ret; } + + let seekHoverPosition: Nullable = null; + function onSeekMouseMove(node: HTMLInputElement) { + if (node.type !== "range") { + throw new Error("Wrong type of input!"); + } + + function onMouseMove(ev: MouseEvent) { + const clientRect = node.getBoundingClientRect(); + seekHoverPosition = + ((ev.clientX - clientRect.left) / clientRect.width) * 100; + } + + const onMouseLeave = () => (seekHoverPosition = null); + + node.addEventListener("mousemove", onMouseMove); + node.addEventListener("mouseleave", onMouseLeave); + + return { + destroy() { + node.removeEventListener("mousemove", onMouseMove); + node.removeEventListener("mouseleave", onMouseLeave); + } + }; + }
@@ -160,13 +185,38 @@ aria-label={_("popupMediaSeek")} max={status.media.duration ?? currentTime} value={currentTime} - on:change={ev => + on:change={ev => { + if (seekHoverPosition) { + ev.preventDefault(); + return; + } dispatch("seek", { position: ev.currentTarget.valueAsNumber - })} + }); + }} + on:click={() => { + if (seekHoverPosition && status.media?.duration) { + dispatch("seek", { + position: + status.media.duration * + (seekHoverPosition / 100) + }); + } + }} + use:onSeekMouseMove /> + {#if seekHoverPosition} +
+ {formatTime( + status.media.duration * (seekHoverPosition / 100) + )} +
+ {/if} - -{formatTime(status.media?.duration - currentTime)} + -{formatTime(status.media.duration - currentTime)}
{/if} diff --git a/ext/src/ui/popup/styles/index.css b/ext/src/ui/popup/styles/index.css index 907361f..f48a54b 100755 --- a/ext/src/ui/popup/styles/index.css +++ b/ext/src/ui/popup/styles/index.css @@ -193,20 +193,60 @@ body { .media__seek { align-items: center; - display: flex; + display: grid; gap: 10px; + grid-template-columns: auto 1fr auto; + grid-template-areas: "current-time seek-bar remaining-time"; min-height: 24px; width: 100%; } .media__seek-bar { flex: 1; + grid-area: seek-bar; +} +.media__seek-tooltip { + --tooltip-color: var(--button-background); + --tooltip-arrow-height: 5px; + align-items: center; + background-color: var(--tooltip-color); + border-radius: 2px; + display: flex; + grid-area: seek-bar; + height: 20px; + justify-self: start; + left: var(--seek-hover-position); + padding: 0 5px; + pointer-events: none; + position: relative; + transform: translate( + -50%, + calc( + -60% - (var(--slider-track-height) / 2) - var(--tooltip-arrow-height) + ) + ); + user-select: none; +} +.media__seek-tooltip::after { + border: var(--tooltip-arrow-height) solid transparent; + border-top-color: var(--tooltip-color); + bottom: 0; + content: ""; + left: 50%; + position: absolute; + transform: translate(-50%, 100%); } +.media__current-time { + grid-area: current-time; +} +.media__remaining-time { + grid-area: remaining-time; +} .media__current-time, .media__remaining-time { font-variant-numeric: tabular-nums; text-align: center; - min-width: 5ch; + width: 5ch; } .media__live { @@ -291,13 +331,15 @@ body { min-width: 0; } -.slider { +:root { --slider-track-height: 5px; --slider-thumb-size: 13px; --slider-fill-color: #00b6f0; --slider-track-color: rgba(0, 0, 0, 0.7); --slider-flare-color: rgba(255, 255, 255, 0.9); +} +.slider { appearance: none; border: initial; margin: initial;