@maas/vue-equipment 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue.d.ts

@@ -1,13 +1,7 @@
-declare const loaded: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    loaded: typeof loaded;
-    touched: typeof touched;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerProvider.vue

@@ -4,26 +4,39 @@
     class="magic-player-provider"
     :data-id="id"
     :data-mode="mappedOptions.mode"
-    :data-fullscreen="isFullscreen"
+    :data-fullscreen="fullscreen"
     :data-touched="touched"
     :data-playing="playing"
-    :data-paused="!playing"
+    :data-paused="paused"
+    :data-started="started"
     :data-waiting="waiting"
     :data-loaded="loaded"
     :data-muted="muted"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
+    @pointerdown="onPointerdown"
   >
     <slot />
   </div>
 </template>
 
 <script setup>
-import { toRefs, provide, onUnmounted } from "vue";
+import {
+  toRefs,
+  provide,
+  onMounted,
+  onUnmounted,
+  useTemplateRef
+} from "vue";
 import defu from "defu";
 import { usePlayerState } from "../composables/private/usePlayerState";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef
+} from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
+import { usePlayerEmitter } from "../composables/private/usePlayerEmitter";
 const { id, options } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
@@ -31,18 +44,37 @@ const { id, options } = defineProps({
 const mappedOptions = defu(options, defaultOptions);
 const { initializeState, deleteState } = usePlayerState(id);
 const state = initializeState();
-const { playing, waiting, muted, loaded, isFullscreen, touched, mouseEntered } = toRefs(state);
+const {
+  playing,
+  paused,
+  started,
+  waiting,
+  muted,
+  loaded,
+  fullscreen,
+  touched,
+  mouseEntered
+} = toRefs(state);
+const { initializeEmitter } = usePlayerEmitter({ id });
+const playerRef = useTemplateRef("player");
 function onMouseenter() {
   mouseEntered.value = true;
 }
 function onMouseleave() {
   mouseEntered.value = false;
 }
+function onPointerdown() {
+  touched.value = true;
+}
+onMounted(() => {
+  initializeEmitter();
+});
 onUnmounted(() => {
   deleteState();
 });
 provide(MagicPlayerInstanceId, id);
 provide(MagicPlayerOptionsKey, mappedOptions);
+provide(MagicPlayerRef, playerRef);
 </script>
 
 <style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerProvider.vue.d.ts

@@ -4,26 +4,10 @@ interface MagicPlayerProps {
     id: MaybeRef<string>;
     options?: MagicPlayerOptions;
 }
-declare const mappedOptions: MagicPlayerOptions;
-declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, muted: import("vue").Ref<boolean, boolean>, loaded: import("vue").Ref<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>;
-declare function onMouseenter(): void;
-declare function onMouseleave(): void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
-    mappedOptions: typeof mappedOptions;
-    playing: typeof playing;
-    waiting: typeof waiting;
-    muted: typeof muted;
-    loaded: typeof loaded;
-    isFullscreen: typeof isFullscreen;
-    touched: typeof touched;
-    onMouseenter: typeof onMouseenter;
-    onMouseleave: typeof onMouseleave;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue

@@ -45,7 +45,7 @@ import {
 const instanceId = inject(MagicPlayerInstanceId, void 0);
 if (!instanceId) {
   throw new Error(
-    "MagicPlayerPoster must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
+    "MagicPlayerTimeline must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
   );
 }
 const { initializeState } = usePlayerState(instanceId);
@@ -53,7 +53,7 @@ const state = initializeState();
 const { controlsMouseEntered, seekedPercentage, scrubbedPercentage } = toRefs(state);
 const barRef = inject(MagicPlayerBarRef);
 const trackRef = inject(MagicPlayerTrackRef);
-const popoverRef = inject(MagicPlayerPopoverRef);
+const popoverRef = inject(MagicPlayerPopoverRef, void 0);
 const { bufferedPercentage, onPointerdown, onPointermove } = usePlayerControlsApi({
   id: instanceId,
   barRef,

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideo.vue

@@ -17,7 +17,9 @@ import {
   watch,
   onMounted,
   inject,
-  onBeforeUnmount
+  onBeforeUnmount,
+  shallowRef,
+  computed
 } from "vue";
 import {
   useElementVisibility,
@@ -28,9 +30,15 @@ import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
 import { usePlayerState } from "../composables/private/usePlayerState";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import { videoModePlaybackDefaults } from "../utils/playbackDefaults";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef
+} from "../symbols";
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+const injectedPlayerRef = inject(MagicPlayerRef, void 0);
 if (!injectedInstanceId) {
   throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
 }
@@ -38,7 +46,6 @@ if (!injectedOptions) {
   throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
 }
 const elRef = useTemplateRef("el");
-const isVisible = useElementVisibility(elRef);
 const { initialize, destroy } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
@@ -47,38 +54,58 @@ const { initialize, destroy } = usePlayerRuntime({
 });
 const { initializeState } = usePlayerState(injectedInstanceId);
 const state = initializeState();
-const { muted, playing } = toRefs(state);
+const { muted, playing, started } = toRefs(state);
 usePlayerMediaApi({
   id: injectedInstanceId,
   mediaRef: elRef
 });
-const { play, pause } = usePlayerVideoApi({
+const { play, pause, mute, initializeFullscreen } = usePlayerVideoApi({
   id: injectedInstanceId,
-  videoRef: elRef
+  videoRef: elRef,
+  playerRef: injectedPlayerRef
+});
+const wasPlaying = shallowRef(false);
+const isVisible = useElementVisibility(elRef);
+const manageWindow = computed(() => {
+  const playbackOptions = injectedOptions.playback || videoModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("window");
+});
+const manageViewport = computed(() => {
+  const playbackOptions = injectedOptions.playback || videoModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("viewport");
 });
 function onWindowFocus() {
-  if (isVisible.value && !playing.value && injectedOptions?.autoplay) {
+  if (isVisible.value && wasPlaying.value) {
     play();
   }
 }
-useEventListener(defaultWindow, "focus", onWindowFocus);
-watch(
-  isVisible,
-  (value) => {
-    if (value && !playing.value && injectedOptions.autoplay) {
-      play();
-    } else if (!value && playing.value) {
+function onWindowBlur() {
+  wasPlaying.value = playing.value;
+  pause();
+}
+if (manageWindow.value) {
+  useEventListener(defaultWindow, "focus", onWindowFocus);
+  useEventListener(defaultWindow, "blur", onWindowBlur);
+}
+if (manageViewport.value) {
+  watch(isVisible, (value) => {
+    if (!value) {
+      wasPlaying.value = playing.value;
       pause();
     }
-  },
-  {
-    immediate: true
-  }
-);
+    if (value && wasPlaying.value) {
+      play();
+    }
+    if (value && injectedOptions.autoplay && !started.value) {
+      play();
+    }
+  });
+}
 onMounted(() => {
   initialize();
+  initializeFullscreen();
   if (injectedOptions.autoplay) {
-    muted.value = true;
+    mute();
   }
 });
 onBeforeUnmount(() => {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue

@@ -2,10 +2,11 @@
   <div
     ref="el"
     class="magic-player-video-controls"
-    :data-fullscreen="isFullscreen"
+    :data-fullscreen="fullscreen"
     :data-touched="touched"
+    :data-started="started"
     :data-playing="playing"
-    :data-paused="!playing"
+    :data-paused="paused"
     :data-waiting="waiting"
     :data-muted="muted"
     :data-idle="idle"
@@ -27,7 +28,7 @@
         </div>
         <div ref="bar" class="magic-player-video-controls__bar--inner">
           <div class="magic-player-video-controls__item -shrink-0">
-            <button v-if="!playing" @click="play">
+            <button v-if="paused || !started" @click="play">
               <slot name="playIcon">
                 <icon-play />
               </slot>
@@ -58,7 +59,7 @@
             </button>
           </div>
           <div class="magic-player-video-controls__item -shrink-0">
-            <button v-if="isFullscreen" @click="exitFullscreen">
+            <button v-if="fullscreen" @click="exitFullscreen">
               <slot name="fullscreenExitIcon">
                 <icon-fullscreen-exit />
               </slot>
@@ -130,13 +131,16 @@ const { initializeState } = usePlayerState(mappedInstanceId.value);
 const state = initializeState();
 const {
   playing,
+  started,
+  paused,
   waiting,
   muted,
   touched,
   mouseEntered,
   controlsMouseEntered,
-  isFullscreen,
+  fullscreen,
   popoverOffsetX,
+  hasOverlay,
   seekedTime
 } = toRefs(state);
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
@@ -153,14 +157,11 @@ const hidden = computed(() => {
   switch (true) {
     case standalone:
       return false;
+    case !isVisible.value:
     case (playing.value && idle.value):
-      return true;
+    case (hasOverlay.value && !touched.value && !started.value):
     case (playing.value && !controlsMouseEntered.value && !mouseEntered.value):
       return true;
-    case !isVisible.value:
-      return true;
-    case !touched.value:
-      return true;
     default:
       return false;
   }

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue.d.ts

@@ -1,9 +1,3 @@
-import IconPlay from './icons/Play.vue.js';
-import IconPause from './icons/Pause.vue.js';
-import IconVolumeOn from './icons/VolumeOn.vue.js';
-import IconVolumeOff from './icons/VolumeOff.vue.js';
-import IconFullscreenEnter from './icons/FullscreenEnter.vue.js';
-import IconFullscreenExit from './icons/FullscreenExit.vue.js';
 import '@maas/vue-equipment/utils/css/keyframes/fade-up-in.css';
 import '@maas/vue-equipment/utils/css/keyframes/fade-up-out.css';
 interface MagicPlayerControlsProps {
@@ -11,15 +5,8 @@ interface MagicPlayerControlsProps {
     standalone?: boolean;
     transition?: string;
 }
-declare const mappedTransition: import("vue").ComputedRef<string | undefined>;
-declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, muted: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>, controlsMouseEntered: import("vue").Ref<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, popoverOffsetX: import("vue").Ref<number, number>, seekedTime: import("vue").Ref<number, number>;
-declare const play: () => void, pause: () => void, mute: () => void, unmute: () => void, enterFullscreen: () => void, exitFullscreen: () => void;
-declare const onMouseenter: () => void, onMouseleave: () => void;
-declare const idle: import("vue").ShallowRef<boolean>;
-declare const hidden: import("vue").ComputedRef<boolean>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {}, __VLS_7: {}, __VLS_12: {}, __VLS_17: {}, __VLS_23: {}, __VLS_25: {}, __VLS_30: {}, __VLS_35: {}, __VLS_40: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     popover?: (props: typeof __VLS_5) => any;
 } & {
     playIcon?: (props: typeof __VLS_7) => any;
@@ -37,34 +24,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     fullscreenExitIcon?: (props: typeof __VLS_35) => any;
 } & {
     fullscreenEnterIcon?: (props: typeof __VLS_40) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicPlayerControlsProps, {
-    IconPlay: typeof IconPlay;
-    IconPause: typeof IconPause;
-    IconVolumeOn: typeof IconVolumeOn;
-    IconVolumeOff: typeof IconVolumeOff;
-    IconFullscreenEnter: typeof IconFullscreenEnter;
-    IconFullscreenExit: typeof IconFullscreenExit;
-    mappedTransition: typeof mappedTransition;
-    playing: typeof playing;
-    waiting: typeof waiting;
-    muted: typeof muted;
-    touched: typeof touched;
-    controlsMouseEntered: typeof controlsMouseEntered;
-    isFullscreen: typeof isFullscreen;
-    popoverOffsetX: typeof popoverOffsetX;
-    seekedTime: typeof seekedTime;
-    play: typeof play;
-    pause: typeof pause;
-    mute: typeof mute;
-    unmute: typeof unmute;
-    enterFullscreen: typeof enterFullscreen;
-    exitFullscreen: typeof exitFullscreen;
-    onMouseenter: typeof onMouseenter;
-    onMouseleave: typeof onMouseleave;
-    idle: typeof idle;
-    hidden: typeof hidden;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerAudioApi.mjs

@@ -1,18 +1,21 @@
-import { toRefs, watch, toValue } from "vue";
+import { toRefs, toValue } from "vue";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerAudioApi(args) {
   const { id } = args;
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
-  const { touched, currentTime, playing, muted } = toRefs(state);
+  const { currentTime, playing, paused, muted } = toRefs(state);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -23,11 +26,6 @@ export function usePlayerAudioApi(args) {
   function unmute() {
     muted.value = false;
   }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
   return {
     play,
     pause,

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerControlsApi.mjs

@@ -27,6 +27,7 @@ export function usePlayerControlsApi(args) {
     currentTime,
     duration,
     dragging,
+    touched,
     controlsMouseEntered,
     seekedTime,
     seekedPercentage,
@@ -37,7 +38,8 @@ export function usePlayerControlsApi(args) {
     buffered,
     controlsBarRect,
     controlsTrackRect,
-    controlsPopoverRect
+    controlsPopoverRect,
+    hasControls
   } = toRefs(state);
   const resumePlay = shallowRef(false);
   let cancelPointerup = void 0;
@@ -126,6 +128,7 @@ export function usePlayerControlsApi(args) {
       guardedSetPointerCapture({ event: e, element: barRef?.value });
       resumePlay.value = playing.value;
       dragging.value = true;
+      touched.value = true;
       pause();
       getSizes();
       cancelPointerup = useEventListener(document, "pointerup", onPointerup);
@@ -158,6 +161,7 @@ export function usePlayerControlsApi(args) {
   let resizeObserverBar = null;
   let windowResizeCleanup = null;
   function initialize() {
+    hasControls.value = true;
     watchTrack = watch(() => trackRef, getTimelineTrackSize);
     watchPopover = watch(() => popoverRef, getPopoverSizes);
     watchBar = watch(() => barRef, getPopoverSizes);

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerEmitter.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeRef } from 'vue';
+export type UsePlayerEmitterArgs = {
+    id: MaybeRef<string>;
+};
+export declare function usePlayerEmitter(args: UsePlayerEmitterArgs): {
+    initializeEmitter: () => void;
+};
+export type UsePlayerEmitterReturn = ReturnType<typeof usePlayerEmitter>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerEmitter.mjs

@@ -0,0 +1,103 @@
+import { toRefs, watch, toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { usePlayerState } from "./usePlayerState.mjs";
+export function usePlayerEmitter(args) {
+  const { id } = args;
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    dragging,
+    ended,
+    fullscreen,
+    loaded,
+    muted,
+    paused,
+    playing,
+    rate,
+    stalled,
+    started,
+    touched,
+    volume,
+    waiting
+  } = toRefs(state);
+  const emitter = useMagicEmitter();
+  function initializeEmitter() {
+    watch(dragging, (newDragging) => {
+      if (newDragging) {
+        emitter.emit("onDragStart", toValue(id));
+      }
+      if (!newDragging) {
+        emitter.emit("onDragEnd", toValue(id));
+      }
+    });
+    watch(ended, (newEnded) => {
+      if (newEnded) {
+        emitter.emit("onEnd", toValue(id));
+      }
+    });
+    watch(fullscreen, (newFullscreen) => {
+      if (newFullscreen) {
+        emitter.emit("onFullscreenEnter", toValue(id));
+      }
+      if (!newFullscreen) {
+        emitter.emit("onFullscreenLeave", toValue(id));
+      }
+    });
+    watch(loaded, (newLoaded) => {
+      if (newLoaded) {
+        emitter.emit("onLoad", toValue(id));
+      }
+    });
+    watch(muted, (newMuted) => {
+      if (newMuted) {
+        emitter.emit("onMute", toValue(id));
+      }
+      if (!newMuted) {
+        emitter.emit("onUnmute", toValue(id));
+      }
+    });
+    watch(paused, (newPaused) => {
+      if (newPaused) {
+        emitter.emit("onPause", toValue(id));
+      }
+    });
+    watch(playing, (newPlaying) => {
+      if (newPlaying) {
+        emitter.emit("onPlay", toValue(id));
+      }
+    });
+    watch(rate, (newRate) => {
+      if (newRate) {
+        emitter.emit("onRateChange", toValue(id));
+      }
+    });
+    watch(started, (newStarted) => {
+      if (newStarted) {
+        emitter.emit("onStart", toValue(id));
+      }
+    });
+    watch(stalled, (newStalled) => {
+      if (newStalled) {
+        emitter.emit("onStall", toValue(id));
+      }
+    });
+    watch(touched, (newTouched) => {
+      if (newTouched) {
+        emitter.emit("onTouch", toValue(id));
+      }
+    });
+    watch(volume, (newVolume) => {
+      if (newVolume) {
+        emitter.emit("onVolumeChange", toValue(id));
+      }
+    });
+    watch(waiting, (newWaiting) => {
+      if (newWaiting) {
+        emitter.emit("onWait", toValue(id));
+      }
+    });
+  }
+  return {
+    initializeEmitter
+  };
+}

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs

@@ -12,8 +12,10 @@ export function usePlayerMediaApi(args) {
     volume,
     rate,
     waiting,
+    started,
     ended,
     playing,
+    paused,
     stalled,
     buffered,
     muted
@@ -42,10 +44,11 @@ export function usePlayerMediaApi(args) {
   if (toValue(mediaRef)) {
     watch([mediaRef], () => {
       const el = toValue(mediaRef);
-      if (!el) return;
-      el.volume = volume.value;
-      el.muted = muted.value;
-      el.playbackRate = rate.value;
+      if (el) {
+        el.volume = volume.value;
+        el.muted = muted.value;
+        el.playbackRate = rate.value;
+      }
     });
   }
   const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(
@@ -60,11 +63,15 @@ export function usePlayerMediaApi(args) {
     playing,
     (isPlaying) => {
       const el = toValue(mediaRef);
-      if (!el) return;
+      if (!el) {
+        return;
+      }
       if (isPlaying) {
         const playPromise = el.play();
-        if (playPromise !== void 0) playPromise.catch((error) => {
-        });
+        if (playPromise !== void 0) {
+          playPromise.catch(() => {
+          });
+        }
       } else {
         el.pause();
       }
@@ -95,12 +102,13 @@ export function usePlayerMediaApi(args) {
     waiting.value = false;
   });
   useEventListener(mediaRef, "playing", () => {
+    started.value = true;
     waiting.value = false;
     ended.value = false;
     ignorePlayingUpdates(() => playing.value = true);
   });
   useEventListener(mediaRef, "ratechange", () => {
-    rate.value = toValue(mediaRef).playbackRate;
+    rate.value = toValue(mediaRef)?.playbackRate ?? rate.value;
   });
   useEventListener(mediaRef, "stalled", () => {
     stalled.value = true;
@@ -113,14 +121,17 @@ export function usePlayerMediaApi(args) {
   });
   useEventListener(mediaRef, "pause", () => {
     playing.value = false;
+    paused.value = true;
   });
   useEventListener(mediaRef, "play", () => {
     playing.value = true;
+    started.value = true;
   });
   useEventListener(mediaRef, "volumechange", () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    volume.value = el.volume;
-    muted.value = el.muted;
+    if (el) {
+      volume.value = el.volume;
+      muted.value = el.muted;
+    }
   });
 }