fix(player): remove decorators

vidstack · Aug 7, 2024 · 1acaec2 · 1acaec2
1 parent c0ff225
commit 1acaec2
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 97 deletions.
diff --git a/packages/vidstack/src/components/layouts/default/default-layout.ts b/packages/vidstack/src/components/layouts/default/default-layout.ts
@@ -1,9 +1,10 @@
-import { Component, computed, prop, provideContext, signal } from 'maverick.js';
+import { Component, computed, provideContext, signal } from 'maverick.js';
 import { isBoolean } from 'maverick.js/std';
 
 import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
 import type { MediaPlayerQuery } from '../../../core/api/player-state';
 import { watchColorScheme } from '../../../utils/dom';
+import { declare_props } from '../../../utils/typed-decorators';
 import { defaultLayoutContext } from './context';
 import { defaultLayoutProps, type DefaultLayoutProps } from './props';
 
@@ -22,12 +23,10 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
     return this.#matches(when);
   });
 
-  @prop
   get isMatch() {
     return this.#when();
   }
 
-  @prop
   get isSmallLayout() {
     return this.#smallWhen();
   }
@@ -65,3 +64,5 @@ export class DefaultLayout extends Component<DefaultLayoutProps> {
     );
   }
 }
+
+declare_props(DefaultLayout, ['isMatch', 'isSmallLayout']);
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -2,10 +2,8 @@ import {
   Component,
   computed,
   effect,
-  method,
   onDispose,
   peek,
-  prop,
   provideContext,
   signal,
   type WriteSignalRecord,
@@ -61,6 +59,7 @@ import type { AnyMediaProvider, MediaProviderAdapter } from '../providers/types'
 import { setAttributeIfEmpty } from '../utils/dom';
 import { clampNumber } from '../utils/number';
 import { IS_IPHONE } from '../utils/support';
+import { declare_methods, declare_props } from '../utils/typed-decorators';
 
 declare global {
   interface HTMLElementEventMap {
@@ -128,10 +127,8 @@ export class MediaPlayer
   readonly #stateMgr: MediaStateManager;
   readonly #requestMgr: MediaRequestManager;
 
-  @prop
   readonly canPlayQueue = new RequestQueue();
 
-  @prop
   readonly remoteControl: MediaRemoteControl;
 
   get #provider() {
@@ -380,15 +377,13 @@ export class MediaPlayer
   /**
    * The current media provider.
    */
-  @prop
   get provider(): AnyMediaProvider | null {
     return this.#provider;
   }
 
   /**
    * Media controls settings.
    */
-  @prop
   get controls(): MediaControls {
     return this.#requestMgr.controls;
   }
@@ -401,13 +396,11 @@ export class MediaPlayer
    * Controls the screen orientation of the current browser window and dispatches orientation
    * change events on the player.
    */
-  @prop
   readonly orientation: ScreenOrientationController;
 
   /**
    * The title of the current media.
    */
-  @prop
   get title() {
     return peek(this.$state.providedTitle);
   }
@@ -426,7 +419,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/video-quality}
    */
-  @prop
   get qualities(): VideoQualityList {
     return this.#media.qualities;
   }
@@ -436,7 +428,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
    */
-  @prop
   get audioTracks(): AudioTrackList {
     return this.#media.audioTracks;
   }
@@ -446,7 +437,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/text-tracks}
    */
-  @prop
   get textTracks(): TextTrackList {
     return this.#media.textTracks;
   }
@@ -455,12 +445,10 @@ export class MediaPlayer
    * Contains text renderers which are responsible for loading, parsing, and rendering text
    * tracks.
    */
-  @prop
   get textRenderers(): TextRenderers {
     return this.#media.textRenderers;
   }
 
-  @prop
   get duration() {
     return this.$state.duration();
   }
@@ -469,7 +457,6 @@ export class MediaPlayer
     this.#props.duration.set(duration);
   }
 
-  @prop
   get paused() {
     return peek(this.$state.paused);
   }
@@ -488,7 +475,6 @@ export class MediaPlayer
     } else this.canPlayQueue.enqueue('paused', () => this.#requestMgr.play());
   }
 
-  @prop
   get muted() {
     return peek(this.$state.muted);
   }
@@ -507,7 +493,6 @@ export class MediaPlayer
     });
   }
 
-  @prop
   get currentTime() {
     return peek(this.$state.currentTime);
   }
@@ -545,7 +530,6 @@ export class MediaPlayer
     });
   }
 
-  @prop
   get volume() {
     return peek(this.$state.volume);
   }
@@ -565,7 +549,6 @@ export class MediaPlayer
     });
   }
 
-  @prop
   get playbackRate() {
     return peek(this.$state.playbackRate);
   }
@@ -632,7 +615,6 @@ export class MediaPlayer
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play}
    */
-  @method
   async play(trigger?: Event) {
     return this.#requestMgr.play(trigger);
   }
@@ -643,7 +625,6 @@ export class MediaPlayer
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause}
    */
-  @method
   async pause(trigger?: Event) {
     return this.#requestMgr.pause(trigger);
   }
@@ -654,7 +635,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/fullscreen}
    */
-  @method
   async enterFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event) {
     return this.#requestMgr.enterFullscreen(target, trigger);
   }
@@ -665,7 +645,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/fullscreen}
    */
-  @method
   async exitFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event) {
     return this.#requestMgr.exitFullscreen(target, trigger);
   }
@@ -677,7 +656,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
    */
-  @method
   enterPictureInPicture(trigger?: Event) {
     return this.#requestMgr.enterPictureInPicture(trigger);
   }
@@ -688,7 +666,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
    */
-  @method
   exitPictureInPicture(trigger?: Event) {
     return this.#requestMgr.exitPictureInPicture(trigger);
   }
@@ -699,7 +676,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/live}
    */
-  @method
   seekToLiveEdge(trigger?: Event): void {
     this.#requestMgr.seekToLiveEdge(trigger);
   }
@@ -710,7 +686,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
    */
-  @method
   startLoading(trigger?: Event): void {
     this.#media.notify('can-load', undefined, trigger);
   }
@@ -720,15 +695,13 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
    */
-  @method
   startLoadingPoster(trigger?: Event) {
     this.#media.notify('can-load-poster', undefined, trigger);
   }
 
   /**
    * Request Apple AirPlay picker to open.
    */
-  @method
   requestAirPlay(trigger?: Event) {
     return this.#requestMgr.requestAirPlay(trigger);
   }
@@ -737,7 +710,6 @@ export class MediaPlayer
    * Request Google Cast device picker to open. The Google Cast framework will be loaded if it
    * hasn't yet.
    */
-  @method
   requestGoogleCast(trigger?: Event) {
     return this.#requestMgr.requestGoogleCast(trigger);
   }
@@ -747,7 +719,6 @@ export class MediaPlayer
    *
    * @see {@link https://vidstack.io/docs/player/api/audio-gain}
    */
-  @method
   setAudioGain(gain: number, trigger?: Event) {
     return this.#requestMgr.setAudioGain(gain, trigger);
   }
@@ -758,3 +729,37 @@ export class MediaPlayer
     this.dispatch('destroy');
   }
 }
+
+declare_props(MediaPlayer, [
+  'canPlayQueue',
+  'remoteControl',
+  'provider',
+  'controls',
+  'orientation',
+  'title',
+  'qualities',
+  'audioTracks',
+  'textTracks',
+  'textRenderers',
+  'duration',
+  'paused',
+  'muted',
+  'currentTime',
+  'volume',
+  'playbackRate',
+]);
+
+declare_methods(MediaPlayer, [
+  'play',
+  'pause',
+  'enterFullscreen',
+  'exitFullscreen',
+  'enterPictureInPicture',
+  'exitPictureInPicture',
+  'seekToLiveEdge',
+  'startLoading',
+  'startLoadingPoster',
+  'requestAirPlay',
+  'requestGoogleCast',
+  'setAudioGain',
+]);
diff --git a/packages/vidstack/src/components/provider/provider.ts b/packages/vidstack/src/components/provider/provider.ts
@@ -1,11 +1,12 @@
-import { Component, method, onDispose, peek, signal, State, tick } from 'maverick.js';
+import { Component, onDispose, peek, signal, State, tick } from 'maverick.js';
 import { animationFrameThrottle, isString, setStyle } from 'maverick.js/std';
 import type { CaptionsFileFormat } from 'media-captions';
 
 import { useMediaContext, type MediaContext } from '../../core/api/media-context';
 import type { Src } from '../../core/api/src-types';
 import { TextTrack, type TextTrackInit } from '../../core/tracks/text/text-track';
 import type { MediaProviderLoader } from '../../providers/types';
+import { declare_methods } from '../../utils/typed-decorators';
 import { SourceSelection } from './source-select';
 import { Tracks } from './tracks';
 
@@ -74,7 +75,6 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
 
   #loadRafId = -1;
 
-  @method
   load(target: HTMLElement | null | undefined) {
     // Hide underlying provider element from screen readers.
     target?.setAttribute('aria-hidden', 'true');
@@ -182,3 +182,5 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
     tick();
   }
 }
+
+declare_methods(MediaProvider, ['load']);
diff --git a/packages/vidstack/src/components/ui/buttons/toggle-button.ts b/packages/vidstack/src/components/ui/buttons/toggle-button.ts
@@ -1,5 +1,6 @@
-import { Component, prop, signal } from 'maverick.js';
+import { Component, signal } from 'maverick.js';
 
+import { declare_props } from '../../../utils/typed-decorators';
 import { ToggleButtonController } from './toggle-button-controller';
 
 export interface ToggleButtonProps {
@@ -35,7 +36,6 @@ export class ToggleButton<
   /**
    * Whether the toggle is currently in a `pressed` state.
    */
-  @prop
   get pressed() {
     return this.#pressed();
   }
@@ -47,3 +47,5 @@ export class ToggleButton<
     });
   }
 }
+
+declare_props(ToggleButton, ['pressed']);
diff --git a/packages/vidstack/src/components/ui/menu/menu-button.ts b/packages/vidstack/src/components/ui/menu/menu-button.ts
@@ -1,8 +1,9 @@
-import { Component, effect, onDispose, prop, signal, useContext } from 'maverick.js';
+import { Component, effect, onDispose, signal, useContext } from 'maverick.js';
 import { DOMEvent } from 'maverick.js/std';
 
 import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
 import { onPress, setAttributeIfEmpty } from '../../../utils/dom';
+import { declare_props } from '../../../utils/typed-decorators';
 import { menuContext, type MenuContext } from './menu-context';
 
 /**
@@ -24,7 +25,6 @@ export class MenuButton extends Component<MenuButtonProps, {}, MenuButtonEvents>
   #menu!: MenuContext;
   #hintEl = signal<HTMLElement | null>(null);
 
-  @prop
   get expanded() {
     return this.#menu?.expanded() ?? false;
   }
@@ -93,3 +93,5 @@ export interface MenuButtonEvents {
 export interface MenuButtonSelectEvent extends DOMEvent<void> {
   target: MenuButton;
 }
+
+declare_props(MenuButton, ['expanded']);