@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.13

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/plugins/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
 
-> plugins@1.0.0-beta.6 lint /Users/robinscholz/Repositories/@maas/vue-equipment/packages/plugins
-> eslint .
+> plugins@1.0.0-beta.12 lint /Users/robinscholz/Repositories/@maas/vue-equipment/packages/plugins
+> eslint . --fix
 

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

@@ -6,6 +6,7 @@ const _hoisted_1 = {
   class: "magic-player-audio"
 };
 import {
+  toRefs,
   useTemplateRef,
   shallowRef,
   inject,
@@ -16,13 +17,14 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudio",
   setup(__props) {
-    const injectedId = inject(MagicPlayerInstanceId, void 0);
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
     const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-    if (!injectedId) {
+    if (!injectedInstanceId) {
       throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
     }
     if (!injectedOptions) {
@@ -31,18 +33,21 @@ export default /* @__PURE__ */ _defineComponent({
     const elRef = useTemplateRef("el");
     const pausedByIntersection = shallowRef(false);
     const { initialize, destroy } = usePlayerRuntime({
-      id: injectedId,
+      id: injectedInstanceId,
       mediaRef: elRef,
       src: injectedOptions.src,
       srcType: injectedOptions.srcType
     });
-    const { playing } = usePlayerMediaApi({
-      id: injectedId,
+    usePlayerMediaApi({
+      id: injectedInstanceId,
       mediaRef: elRef
     });
     const { play, pause } = usePlayerAudioApi({
-      id: injectedId
+      id: injectedInstanceId
     });
+    const { initializeState } = usePlayerState(injectedInstanceId);
+    const state = initializeState();
+    const { playing } = toRefs(state);
     useIntersectionObserver(
       elRef,
       ([{ isIntersecting }]) => {

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

@@ -27,14 +27,25 @@ const _hoisted_8 = {
   class: "magic-player-audio-controls__item -shrink-0",
   "data-slot": "display-time-duration"
 };
-import { computed, inject, provide, useTemplateRef } from "vue";
+import {
+  toRefs,
+  computed,
+  inject,
+  provide,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
 import { useIdle } from "@vueuse/core";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
-import { MagicPlayerInstanceId } from "../symbols";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef
+} from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudioControls",
   props: {
@@ -50,19 +61,25 @@ export default /* @__PURE__ */ _defineComponent({
     }
     const barRef = useTemplateRef("bar");
     const trackRef = useTemplateRef("track");
-    const { playing, waiting } = usePlayerMediaApi({
+    const { play, pause } = usePlayerAudioApi({
       id: mappedInstanceId.value
     });
-    const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedInstanceId.value
-    });
-    usePlayerControlsApi({
+    const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
       id: mappedInstanceId.value,
       barRef,
       trackRef
     });
+    const { initializeState } = usePlayerState(mappedInstanceId.value);
+    const state = initializeState();
+    const { playing, waiting, touched, controlsMouseEntered } = toRefs(state);
     const { idle } = useIdle(3e3);
+    initialize();
+    onBeforeUnmount(() => {
+      destroy();
+    });
     provide(MagicPlayerInstanceId, mappedInstanceId.value);
+    provide(MagicPlayerTrackRef, trackRef);
+    provide(MagicPlayerBarRef, barRef);
     return (_ctx, _cache) => {
       const _component_magic_player_display_time = _resolveComponent("magic-player-display-time");
       const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
@@ -73,7 +90,11 @@ export default /* @__PURE__ */ _defineComponent({
         "data-paused": !_unref(playing),
         "data-waiting": _unref(waiting),
         "data-idle": _unref(idle),
-        "data-hover": _unref(mouseEntered)
+        "data-hover": _unref(controlsMouseEntered),
+        onMouseenter: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
+        onMouseleave: _cache[3] || (_cache[3] = //@ts-ignore
+        (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args))
       }, [
         _createElementVNode("div", _hoisted_2, [
           _createElementVNode(
@@ -121,7 +142,7 @@ export default /* @__PURE__ */ _defineComponent({
             /* NEED_PATCH */
           )
         ])
-      ], 8, _hoisted_1);
+      ], 40, _hoisted_1);
     };
   }
 });

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

@@ -3,8 +3,9 @@ import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
     instanceId?: string;
 }
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
-declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+declare const play: () => void, pause: () => void;
+declare const onMouseenter: () => void, onMouseleave: () => void;
+declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>, controlsMouseEntered: import("vue").Ref<boolean, boolean>;
 declare const idle: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_6: {};
@@ -16,12 +17,14 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 declare const __VLS_self: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {
     IconPlay: typeof IconPlay;
     IconPause: typeof IconPause;
-    playing: typeof playing;
-    waiting: typeof waiting;
     play: typeof play;
     pause: typeof pause;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
+    playing: typeof playing;
+    waiting: typeof waiting;
     touched: typeof touched;
-    mouseEntered: typeof mouseEntered;
+    controlsMouseEntered: typeof controlsMouseEntered;
     idle: typeof idle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -2,9 +2,9 @@
 import { defineComponent as _defineComponent } from "vue";
 import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "magic-player-display-time" };
-import { computed, inject } from "vue";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { computed, inject, toRefs } from "vue";
 import { formatTime } from "@maas/vue-equipment/utils";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerDisplayTime",
@@ -18,9 +18,10 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicPlayerDisplayTime must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
       );
     }
-    const { currentTime, remainingTime, duration } = usePlayerMediaApi({
-      id: instanceId
-    });
+    const { initializeState } = usePlayerState(instanceId);
+    const state = initializeState();
+    const { currentTime, duration } = toRefs(state);
+    const remainingTime = computed(() => duration.value - currentTime.value);
     const stringifiedTime = computed(() => {
       switch (__props.type) {
         case "current":

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

@@ -3,6 +3,7 @@ import { defineComponent as _defineComponent } from "vue";
 import { createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["width", "height"];
 import {
+  toRefs,
   shallowRef,
   onMounted,
   watch,
@@ -11,7 +12,7 @@ import {
   useTemplateRef
 } from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
-import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerMuxPopover",
@@ -26,7 +27,9 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicPlayerMuxPopover must be nested inside MagicPlayerVideoControls."
       );
     }
-    const { seekedTime } = usePlayerControlsApi({ id: instanceId });
+    const { initializeState } = usePlayerState(instanceId);
+    const state = initializeState();
+    const { seekedTime } = toRefs(state);
     const { pixelRatio } = useDevicePixelRatio();
     const canvasRef = useTemplateRef("canvas");
     const storyboard = shallowRef();

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

@@ -14,12 +14,12 @@ const _hoisted_4 = {
   key: 1,
   class: "magic-player-overlay__button"
 };
-import { inject } from "vue";
+import { inject, toRefs } from "vue";
 import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconWaiting from "./icons/Waiting.vue";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
@@ -31,10 +31,10 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
       );
     }
-    const { playing, waiting } = usePlayerMediaApi({
-      id: instanceId
-    });
-    const { mouseEntered, togglePlay } = usePlayerVideoApi({
+    const { initializeState } = usePlayerState(instanceId);
+    const state = initializeState();
+    const { mouseEntered, playing, waiting } = toRefs(state);
+    const { togglePlay } = usePlayerVideoApi({
       id: instanceId
     });
     const { idle } = useIdle(3e3);

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

@@ -1,8 +1,8 @@
 import IconPlay from './icons/Play.vue.js';
 import IconPause from './icons/Pause.vue.js';
 import IconWaiting from './icons/Waiting.vue.js';
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
-declare const mouseEntered: import("vue").ShallowRef<boolean, boolean>, togglePlay: () => void;
+declare const mouseEntered: import("vue").Ref<boolean, boolean>, playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>;
+declare const togglePlay: () => void;
 declare const idle: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_8: {}, __VLS_13: {};
@@ -19,9 +19,9 @@ declare const __VLS_self: import("vue").DefineComponent<{}, {
     IconPlay: typeof IconPlay;
     IconPause: typeof IconPause;
     IconWaiting: typeof IconWaiting;
+    mouseEntered: typeof mouseEntered;
     playing: typeof playing;
     waiting: typeof waiting;
-    mouseEntered: typeof mouseEntered;
     togglePlay: typeof togglePlay;
     idle: typeof idle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -2,9 +2,8 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "magic-player-poster" };
-import { inject } from "vue";
-import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
-import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { inject, toRefs } from "vue";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerPoster",
@@ -15,12 +14,9 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicPlayerPoster must be nested inside MagicPlayerProvider."
       );
     }
-    const { loaded } = usePlayerRuntime({
-      id: instanceId
-    });
-    const { touched } = usePlayerVideoApi({
-      id: instanceId
-    });
+    const { initializeState } = usePlayerState(instanceId);
+    const state = initializeState();
+    const { loaded, touched } = toRefs(state);
     return (_ctx, _cache) => {
       return _withDirectives((_openBlock(), _createElementBlock(
         "div",

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

@@ -1,5 +1,4 @@
-declare const loaded: import("vue").ShallowRef<boolean, boolean>;
-declare const touched: import("vue").ShallowRef<boolean, boolean>;
+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> & {

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

@@ -1,12 +1,10 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
-import { useTemplateRef, provide } from "vue";
+const _hoisted_1 = ["data-id", "data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
+import { toRefs, provide, onUnmounted } from "vue";
 import defu from "defu";
-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 { defaultOptions } from "../utils/defaultOptions";
 export default /* @__PURE__ */ _defineComponent({
@@ -17,27 +15,25 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const mappedOptions = defu(__props.options, defaultOptions);
-    const playerRef = useTemplateRef("player");
-    const { playing, waiting, muted } = usePlayerMediaApi({
-      id: __props.id
+    const { initializeState, deleteState } = usePlayerState(__props.id);
+    const state = initializeState();
+    const { playing, waiting, muted, loaded, isFullscreen, touched, mouseEntered } = toRefs(state);
+    function onMouseenter() {
+      mouseEntered.value = true;
+    }
+    function onMouseleave() {
+      mouseEntered.value = false;
+    }
+    onUnmounted(() => {
+      deleteState();
     });
-    const { loaded } = usePlayerRuntime({
-      id: __props.id,
-      src: mappedOptions.src,
-      srcType: mappedOptions.srcType
-    });
-    const { onMouseenter, onMouseleave, isFullscreen, touched } = usePlayerVideoApi(
-      {
-        id: __props.id,
-        playerRef
-      }
-    );
     provide(MagicPlayerInstanceId, __props.id);
     provide(MagicPlayerOptionsKey, mappedOptions);
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("div", {
         ref: "player",
         class: "magic-player-provider",
+        "data-id": _ctx.id,
         "data-mode": _unref(mappedOptions).mode,
         "data-fullscreen": _unref(isFullscreen),
         "data-touched": _unref(touched),
@@ -46,10 +42,8 @@ export default /* @__PURE__ */ _defineComponent({
         "data-waiting": _unref(waiting),
         "data-loaded": _unref(loaded),
         "data-muted": _unref(muted),
-        onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
-        onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
-        (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args))
+        onMouseenter,
+        onMouseleave
       }, [
         _renderSlot(_ctx.$slots, "default")
       ], 40, _hoisted_1);

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

@@ -5,9 +5,9 @@ interface MagicPlayerProps {
     options?: MagicPlayerOptions;
 }
 declare const mappedOptions: MagicPlayerOptions;
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>, muted: import("vue").ShallowRef<boolean, boolean>;
-declare const loaded: import("vue").ShallowRef<boolean, boolean>;
-declare const onMouseenter: () => void, onMouseleave: () => void, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").ShallowRef<boolean, boolean>;
+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> & {
@@ -19,10 +19,10 @@ declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
     waiting: typeof waiting;
     muted: typeof muted;
     loaded: typeof loaded;
-    onMouseenter: typeof onMouseenter;
-    onMouseleave: typeof onMouseleave;
     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>;

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

@@ -1,12 +1,21 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "magic-player-timeline" };
+const _hoisted_1 = {
+  ref: "track",
+  class: "magic-player-timeline"
+};
 const _hoisted_2 = { class: "magic-player-timeline__track" };
 const _hoisted_3 = { class: "magic-player-timeline__inner-track" };
-import { inject } from "vue";
+import { inject, toRefs } from "vue";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
-import { MagicPlayerInstanceId } from "../symbols";
+import { usePlayerState } from "../composables/private/usePlayerState";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerTrackRef,
+  MagicPlayerPopoverRef,
+  MagicPlayerBarRef
+} from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerTimeline",
   setup(__props) {
@@ -16,96 +25,95 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicPlayerPoster must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
       );
     }
-    const {
-      mouseEntered,
-      seekedPercentage,
-      scrubbedPercentage,
-      bufferedPercentage,
-      onMouseenter,
-      onMouseleave,
-      onPointerdown,
-      onPointerup,
-      onPointermove
-    } = usePlayerControlsApi({
-      id: instanceId
+    const { initializeState } = usePlayerState(instanceId);
+    const state = initializeState();
+    const { controlsMouseEntered, seekedPercentage, scrubbedPercentage } = toRefs(state);
+    const barRef = inject(MagicPlayerBarRef);
+    const trackRef = inject(MagicPlayerTrackRef);
+    const popoverRef = inject(MagicPlayerPopoverRef);
+    const { bufferedPercentage, onPointerdown, onPointermove } = usePlayerControlsApi({
+      id: instanceId,
+      barRef,
+      trackRef,
+      popoverRef
     });
     return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", _hoisted_1, [
-        _createElementVNode(
-          "div",
-          {
-            class: "magic-player-timeline__target",
-            onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
-            onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args)),
-            onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-            (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
-            onPointerup: _cache[3] || (_cache[3] = //@ts-ignore
-            (...args) => _unref(onPointerup) && _unref(onPointerup)(...args)),
-            onPointermove: _cache[4] || (_cache[4] = //@ts-ignore
-            (...args) => _unref(onPointermove) && _unref(onPointermove)(...args))
-          },
-          [
-            _createElementVNode("div", _hoisted_2, [
-              _createElementVNode(
-                "div",
-                {
-                  class: "magic-player-timeline__thumb",
-                  style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
-                },
-                _cache[5] || (_cache[5] = [
-                  _createElementVNode(
-                    "div",
-                    { class: "magic-player-timeline__thumb-handle" },
-                    null,
-                    -1
-                    /* HOISTED */
-                  )
-                ]),
-                4
-                /* STYLE */
-              ),
-              _createElementVNode("div", _hoisted_3, [
+      return _openBlock(), _createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: "magic-player-timeline__target",
+              onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
+              onPointermove: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => _unref(onPointermove) && _unref(onPointermove)(...args))
+            },
+            [
+              _createElementVNode("div", _hoisted_2, [
                 _createElementVNode(
                   "div",
                   {
-                    class: "magic-player-timeline__buffered",
-                    style: _normalizeStyle({ left: `${_unref(bufferedPercentage)}%` })
-                  },
-                  null,
-                  4
-                  /* STYLE */
-                ),
-                _withDirectives(_createElementVNode(
-                  "div",
-                  {
-                    class: "magic-player-timeline__seeked",
-                    style: _normalizeStyle({ left: `${_unref(seekedPercentage)}%` })
-                  },
-                  null,
-                  4
-                  /* STYLE */
-                ), [
-                  [_vShow, _unref(mouseEntered)]
-                ]),
-                _createElementVNode(
-                  "div",
-                  {
-                    class: "magic-player-timeline__scrubbed",
+                    class: "magic-player-timeline__thumb",
                     style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
                   },
-                  null,
+                  _cache[2] || (_cache[2] = [
+                    _createElementVNode(
+                      "div",
+                      { class: "magic-player-timeline__thumb-handle" },
+                      null,
+                      -1
+                      /* HOISTED */
+                    )
+                  ]),
                   4
                   /* STYLE */
-                )
+                ),
+                _createElementVNode("div", _hoisted_3, [
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: "magic-player-timeline__buffered",
+                      style: _normalizeStyle({ left: `${_unref(bufferedPercentage)}%` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  ),
+                  _withDirectives(_createElementVNode(
+                    "div",
+                    {
+                      class: "magic-player-timeline__seeked",
+                      style: _normalizeStyle({ left: `${_unref(seekedPercentage)}%` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  ), [
+                    [_vShow, _unref(controlsMouseEntered)]
+                  ]),
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: "magic-player-timeline__scrubbed",
+                      style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )
+                ])
               ])
-            ])
-          ],
-          32
-          /* NEED_HYDRATION */
-        )
-      ]);
+            ],
+            32
+            /* NEED_HYDRATION */
+          )
+        ],
+        512
+        /* NEED_PATCH */
+      );
     };
   }
 });