fix(player): fix fullscreen controls bottom padding

auioc · Aug 26, 2024 · 924987a · 924987a
1 parent 16aa733
commit 924987a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/src/core/player.ts b/src/core/player.ts
@@ -21,7 +21,14 @@
 import ASS from 'assjs';
 import { CommentManager } from '../lib/CommentCoreLibrary';
 import { bindMetaEvent, PlayerMetadata } from './metadata';
-import { appendChild, clamp, fTime, StrAnyKV, StrGenKV } from './utils';
+import {
+    appendChild,
+    clamp,
+    fTime,
+    StrAnyKV,
+    StrGenKV,
+    toggleClass,
+} from './utils';
 
 interface PlayerOptions extends StrAnyKV {
     autoPlay?: boolean;
@@ -82,7 +89,9 @@ export default class Player {
         {
             this.options.autoPlay ? this.play() : this.pause();
             this.options.muted ? this.mute() : this.unmute();
-            this.options.fullscreen ? this.requestFullscreen() : this.setContainerData('fullscreen', false);
+            this.options.fullscreen
+                ? this.requestFullscreen()
+                : this.setContainerData('fullscreen', false);
         }
         this.#constructed = true;
         if (this.options.autoPlay) {
@@ -103,13 +112,20 @@ export default class Player {
             this.#overHour = this.video.duration >= 60 * 60;
         });
         this.onVideoEvent('canplay', () => this.focus());
-        this.onVideoEvent('play', () => this.setContainerData('paused', this.video.paused));
-        this.onVideoEvent('pause', () => this.setContainerData('paused', this.video.paused));
-        this.onVideoEvent('volumechange', () => this.setContainerData('muted', this.video.muted));
+        this.onVideoEvent('play', () =>
+            this.setContainerData('paused', this.video.paused)
+        );
+        this.onVideoEvent('pause', () =>
+            this.setContainerData('paused', this.video.paused)
+        );
+        this.onVideoEvent('volumechange', () =>
+            this.setContainerData('muted', this.video.muted)
+        );
         this.onPlayerEvent('fullscreenchange', () => {
             const fullscreen = document.fullscreenElement === this.container;
             this.setContainerData('fullscreen', fullscreen ? true : false);
             this.firePlayerEvent(fullscreen ? 'fullscreen' : 'fullscreenexit');
+            toggleClass(this.container, 'fullscreen', fullscreen);
         });
         new ResizeObserver(() => {
             this.video.dispatchEvent(
@@ -146,7 +162,9 @@ export default class Player {
     }
 
     firePlayerEvent(type: string, detail?: any) {
-        this.container.dispatchEvent(new CustomEvent(type, detail ? { detail: detail } : null));
+        this.container.dispatchEvent(
+            new CustomEvent(type, detail ? { detail: detail } : null)
+        );
     }
 
     toast(html: string) {
@@ -156,12 +174,19 @@ export default class Player {
     }
 
     fCurrentTime(alwaysHour?: boolean) {
-        return fTime(this.video.currentTime, alwaysHour === undefined ? this.#overHour : alwaysHour);
+        return fTime(
+            this.video.currentTime,
+            alwaysHour === undefined ? this.#overHour : alwaysHour
+        );
     }
 
     seek(time: number) {
         const fixedTime = clamp(time, 0, this.video.duration);
-        this.toast(`Seek: ${fTime(fixedTime, this.#overHour)} / ${fTime(this.video.duration)}`);
+        this.toast(
+            `Seek: ${fTime(fixedTime, this.#overHour)} / ${fTime(
+                this.video.duration
+            )}`
+        );
         this.video.currentTime = fixedTime;
     }
 

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -32,18 +32,27 @@ export interface StrKV {
 
 export type AnyFunction = (...args: any[]) => any;
 
-export type AppendArguments<F extends AnyFunction, A extends any[]> = F extends (...arg: [...infer P]) => infer R
+export type AppendArguments<
+    F extends AnyFunction,
+    A extends any[]
+> = F extends (...arg: [...infer P]) => infer R
     ? (...args: [...P, ...A]) => R
     : never;
 
-export type PrependArguments<F extends AnyFunction, A extends any[]> = F extends (...arg: [...infer P]) => infer R
+export type PrependArguments<
+    F extends AnyFunction,
+    A extends any[]
+> = F extends (...arg: [...infer P]) => infer R
     ? (...args: [...A, ...P]) => R
     : never;
 
 export type ExtendedHTMLEventMap = StrAnyKV & HTMLElementEventMap;
 
 export type EventListenerMap<F extends AnyFunction> = {
-    [key in keyof ExtendedHTMLEventMap]?: AppendArguments<F, [ExtendedHTMLEventMap[key]]>;
+    [key in keyof ExtendedHTMLEventMap]?: AppendArguments<
+        F,
+        [ExtendedHTMLEventMap[key]]
+    >;
 };
 
 export type HTMLTagNames = keyof HTMLElementTagNameMap;
@@ -90,6 +99,18 @@ export function removeClass(element: HTMLElement, clazz: string) {
     element.classList.remove(clazz);
 }
 
+export function toggleClass(
+    element: HTMLElement,
+    clazz: string,
+    bool: boolean
+) {
+    if (bool) {
+        addClass(element, clazz);
+    } else {
+        removeClass(element, clazz);
+    }
+}
+
 export function toggleDisplayBi(display: HTMLElement, hide: HTMLElement) {
     addClass(hide, 'hide');
     removeClass(display, 'hide');
@@ -138,7 +159,11 @@ export function randomStr() {
     return Math.random().toString(36).slice(-8);
 }
 
-export function bindEvents<F extends AnyFunction>(target: HTMLElement, listeners: EventListenerMap<F>, params: any[]) {
+export function bindEvents<F extends AnyFunction>(
+    target: HTMLElement,
+    listeners: EventListenerMap<F>,
+    params: any[]
+) {
     for (const [type, listener] of Object.entries(listeners)) {
         target.addEventListener(type, (event) => listener(...params, event));
     }

diff --git a/src/style/player.css b/src/style/player.css
@@ -123,10 +123,14 @@ video {
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 2px 4px;
+    padding: 2px 4px 4px 4px;
     border-width: 1px 0 0 0 !important;
 }
 
+.fullscreen .controls {
+    padding: 2px 4px;
+}
+
 .controls > button.play-toggle {
     padding: 2px 5px;
 }