@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,4 +1,10 @@
-import { ref, computed, watch, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  watch,
+  toValue
+} from "vue";
 import {
   useResizeObserver,
   useEventListener,
@@ -9,24 +15,20 @@ import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./usePlayerVideoApi.mjs";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerControlsApi(args) {
-  const resumePlay = ref(false);
+  const resumePlay = shallowRef(false);
   const barRect = ref(void 0);
   const trackRect = ref(void 0);
   const popoverRect = ref(void 0);
-  const { trackRef, barRef, popoverRef } = args;
-  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({
-    id: args.id
-  });
-  const { play, pause, seek } = usePlayerVideoApi({
-    id: args.id
-  });
-  const dragging = ref(false);
-  const mouseEntered = ref(false);
-  const seekedTime = ref(0);
-  const seekedPercentage = ref(0);
-  const scrubbedPercentage = ref(0);
-  const thumbPercentage = ref(0);
-  const popoverOffsetX = ref(0);
+  const { id, trackRef, barRef, popoverRef } = args;
+  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({ id });
+  const { play, pause, seek } = usePlayerVideoApi({ id });
+  const dragging = shallowRef(false);
+  const mouseEntered = shallowRef(false);
+  const seekedTime = shallowRef(0);
+  const seekedPercentage = shallowRef(0);
+  const scrubbedPercentage = shallowRef(0);
+  const thumbPercentage = shallowRef(0);
+  const popoverOffsetX = shallowRef(0);
   const bufferedPercentage = computed(() => {
     if (!buffered) return 0;
     const endBuffer = buffered.value?.length > 0 ? buffered.value[0][1] : 0;
@@ -119,8 +121,8 @@ export function usePlayerControlsApi(args) {
     defaultWindow,
     "resize",
     () => {
-      getTimelineTrackSize;
-      getPopoverSizes;
+      getTimelineTrackSize();
+      getPopoverSizes();
     },
     {
       passive: true
@@ -128,7 +130,7 @@ export function usePlayerControlsApi(args) {
   );
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "controls") {
       switch (payload.key) {
         case "dragging": {
@@ -176,7 +178,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(dragging, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "dragging",
       value
@@ -184,7 +186,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(mouseEntered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "mouseEntered",
       value
@@ -192,7 +194,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(seekedTime, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "seekedTime",
       value
@@ -200,7 +202,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(seekedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "seekedPercentage",
       value
@@ -208,7 +210,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(scrubbedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "scrubbedPercentage",
       value
@@ -216,7 +218,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(bufferedPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "bufferedPercentage",
       value
@@ -224,7 +226,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(thumbPercentage, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "thumbPercentage",
       value
@@ -232,7 +234,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(popoverOffsetX, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "popoverOffsetX",
       value
@@ -240,7 +242,7 @@ export function usePlayerControlsApi(args) {
   });
   watch(resumePlay, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "resumePlay",
       value
@@ -249,7 +251,7 @@ export function usePlayerControlsApi(args) {
   watch(barRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "barRect",
       value
@@ -258,7 +260,7 @@ export function usePlayerControlsApi(args) {
   watch(trackRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "trackRect",
       value
@@ -267,7 +269,7 @@ export function usePlayerControlsApi(args) {
   watch(popoverRect, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "controls",
       key: "popoverRect",
       value

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

@@ -1,21 +1,21 @@
-import { type MaybeRef } from 'vue';
+import { type Ref, type MaybeRef } from 'vue';
 import type { Buffered } from '../../types/index.js';
 export type UsePlayerMediaApiArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLMediaElement | undefined>;
+    mediaRef?: Ref<HTMLMediaElement | null>;
 };
 export declare function usePlayerMediaApi(args: UsePlayerMediaApiArgs): {
-    currentTime: import("vue").Ref<number, number>;
+    currentTime: import("vue").ShallowRef<number, number>;
     remainingTime: import("vue").ComputedRef<number>;
-    duration: import("vue").Ref<number, number>;
-    seeking: import("vue").Ref<boolean, boolean>;
-    volume: import("vue").Ref<number, number>;
-    rate: import("vue").Ref<number, number>;
-    waiting: import("vue").Ref<boolean, boolean>;
-    ended: import("vue").Ref<boolean, boolean>;
-    playing: import("vue").Ref<boolean, boolean>;
-    stalled: import("vue").Ref<boolean, boolean>;
-    buffered: import("vue").Ref<[number, number][], Buffered | [number, number][]>;
-    muted: import("vue").Ref<boolean, boolean>;
+    duration: import("vue").ShallowRef<number, number>;
+    seeking: import("vue").ShallowRef<boolean, boolean>;
+    volume: import("vue").ShallowRef<number, number>;
+    rate: import("vue").ShallowRef<number, number>;
+    waiting: import("vue").ShallowRef<boolean, boolean>;
+    ended: import("vue").ShallowRef<boolean, boolean>;
+    playing: import("vue").ShallowRef<boolean, boolean>;
+    stalled: import("vue").ShallowRef<boolean, boolean>;
+    buffered: Ref<[number, number][], Buffered | [number, number][]>;
+    muted: import("vue").ShallowRef<boolean, boolean>;
 };
 export type UsePlayerMediaApiReturn = ReturnType<typeof usePlayerMediaApi>;

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

@@ -1,19 +1,26 @@
-import { ref, computed, watch, unref, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  watch,
+  unref,
+  toValue
+} from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerMediaApi(args) {
-  const currentTime = ref(0);
-  const duration = ref(0);
-  const seeking = ref(false);
-  const volume = ref(1);
-  const rate = ref(1);
-  const waiting = ref(false);
-  const ended = ref(false);
-  const playing = ref(false);
-  const stalled = ref(false);
+  const currentTime = shallowRef(0);
+  const duration = shallowRef(0);
+  const seeking = shallowRef(false);
+  const volume = shallowRef(1);
+  const rate = shallowRef(1);
+  const waiting = shallowRef(false);
+  const ended = shallowRef(false);
+  const playing = shallowRef(false);
+  const stalled = shallowRef(false);
   const buffered = ref([]);
-  const muted = ref(false);
-  const { mediaRef } = args;
+  const muted = shallowRef(false);
+  const { mediaRef, id } = args;
   const remainingTime = computed(() => duration.value - currentTime.value);
   function timeRangeToArray(timeRanges) {
     let ranges = [];
@@ -122,7 +129,7 @@ export function usePlayerMediaApi(args) {
   });
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "media") {
       switch (payload.key) {
         case "currentTime":
@@ -163,7 +170,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(currentTime, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "currentTime",
       value
@@ -171,7 +178,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(duration, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "duration",
       value
@@ -179,7 +186,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(seeking, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "seeking",
       value
@@ -187,7 +194,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(volume, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "volume",
       value
@@ -195,7 +202,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(rate, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "rate",
       value
@@ -203,7 +210,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(waiting, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "waiting",
       value
@@ -211,7 +218,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(ended, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "ended",
       value
@@ -219,7 +226,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(playing, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "playing",
       value
@@ -227,7 +234,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(stalled, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "stalled",
       value
@@ -235,7 +242,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(buffered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "buffered",
       value
@@ -243,7 +250,7 @@ export function usePlayerMediaApi(args) {
   });
   watch(muted, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "media",
       key: "muted",
       value

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

@@ -1,13 +1,13 @@
-import { type MaybeRef } from 'vue';
-import type { MagicPlayerSourceType } from '../../types/index.js';
+import { type MaybeRef, type Ref } from 'vue';
+import type { MagicPlayerOptions } from '../../types/index.js';
 export type UsePlayerRuntimeArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
-    srcType?: MagicPlayerSourceType;
+    mediaRef?: Ref<HTMLVideoElement | HTMLAudioElement | null>;
+    srcType?: MagicPlayerOptions['srcType'];
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
-    loaded: import("vue").Ref<boolean, boolean>;
+    loaded: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

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

@@ -1,12 +1,12 @@
-import { ref, watch, toValue } from "vue";
+import { shallowRef, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { useEventListener } from "@vueuse/core";
 export function usePlayerRuntime(args) {
   let hls;
-  const loaded = ref(false);
-  const defferedLoading = ref(false);
+  const loaded = shallowRef(false);
+  const defferedLoading = shallowRef(false);
   const { mediaRef, srcType, src } = args;
-  const useNative = () => {
+  function useNative() {
     const el = toValue(mediaRef);
     if (!el || !src) return;
     el.src = src;
@@ -17,8 +17,8 @@ export function usePlayerRuntime(args) {
       },
       { once: true }
     );
-  };
-  const useHlsJS = async () => {
+  }
+  async function useHlsJS() {
     const el = toValue(mediaRef);
     if (!el) return;
     useEventListener(mediaRef, "play", () => {
@@ -49,7 +49,7 @@ export function usePlayerRuntime(args) {
       hls.loadSource(src);
       hls.attachMedia(el);
     }
-  };
+  }
   function initialize() {
     if (srcType === "native") {
       useNative();

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

@@ -1,13 +1,13 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
-    playerRef?: MaybeRef<HTMLElement | undefined>;
-    videoRef?: MaybeRef<HTMLVideoElement | undefined>;
+    playerRef?: Ref<HTMLElement | null>;
+    videoRef?: Ref<HTMLVideoElement | null>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: import("vue").Ref<boolean, boolean>;
-    isFullscreen: import("vue").Ref<boolean, boolean>;
-    touched: import("vue").Ref<boolean, boolean>;
+    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+    isFullscreen: Ref<boolean, boolean>;
+    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;

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

@@ -1,16 +1,14 @@
-import { ref, watch, toValue } from "vue";
+import { ref, shallowRef, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerVideoApi(args) {
-  const fullscreenTarget = ref(void 0);
-  const { playing, currentTime, muted } = usePlayerMediaApi({
-    id: args.id
-  });
-  const { playerRef, videoRef } = args;
-  const touched = ref(false);
-  const mouseEntered = ref(false);
+  const { id, playerRef, videoRef } = args;
+  const fullscreenTarget = ref(null);
+  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
+  const touched = shallowRef(false);
+  const mouseEntered = shallowRef(false);
   const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;
@@ -82,7 +80,7 @@ export function usePlayerVideoApi(args) {
   }
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "player") {
       switch (payload.key) {
         case "mouseEntered":
@@ -99,7 +97,7 @@ export function usePlayerVideoApi(args) {
   });
   watch(mouseEntered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "mouseEntered",
       value
@@ -107,7 +105,7 @@ export function usePlayerVideoApi(args) {
   });
   watch(touched, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "touched",
       value
@@ -116,7 +114,7 @@ export function usePlayerVideoApi(args) {
   watch(fullscreenTarget, (value) => {
     if (!value) return;
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "fullscreenTarget",
       value

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -1,26 +1,23 @@
-import type { MaybeRef } from '@vueuse/core';
-type usePlayerApiArgs = {
-    id: MaybeRef<string>;
-};
-export declare function useMagicPlayer(args: usePlayerApiArgs): {
+import type { MaybeRef } from 'vue';
+export declare function useMagicPlayer(id: MaybeRef<string>): {
     mediaApi: {
-        currentTime: import("vue").Ref<number, number>;
+        currentTime: import("vue").ShallowRef<number, number>;
         remainingTime: import("vue").ComputedRef<number>;
-        duration: import("vue").Ref<number, number>;
-        seeking: import("vue").Ref<boolean, boolean>;
-        volume: import("vue").Ref<number, number>;
-        rate: import("vue").Ref<number, number>;
-        waiting: import("vue").Ref<boolean, boolean>;
-        ended: import("vue").Ref<boolean, boolean>;
-        playing: import("vue").Ref<boolean, boolean>;
-        stalled: import("vue").Ref<boolean, boolean>;
+        duration: import("vue").ShallowRef<number, number>;
+        seeking: import("vue").ShallowRef<boolean, boolean>;
+        volume: import("vue").ShallowRef<number, number>;
+        rate: import("vue").ShallowRef<number, number>;
+        waiting: import("vue").ShallowRef<boolean, boolean>;
+        ended: import("vue").ShallowRef<boolean, boolean>;
+        playing: import("vue").ShallowRef<boolean, boolean>;
+        stalled: import("vue").ShallowRef<boolean, boolean>;
         buffered: import("vue").Ref<[number, number][], import("../types").Buffered | [number, number][]>;
-        muted: import("vue").Ref<boolean, boolean>;
+        muted: import("vue").ShallowRef<boolean, boolean>;
     };
     videoApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
+        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
         isFullscreen: import("vue").Ref<boolean, boolean>;
-        touched: import("vue").Ref<boolean, boolean>;
+        touched: import("vue").ShallowRef<boolean, boolean>;
         play: () => void;
         pause: () => void;
         togglePlay: () => void;
@@ -33,14 +30,14 @@ export declare function useMagicPlayer(args: usePlayerApiArgs): {
         onMouseleave: () => void;
     };
     controlsApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<boolean, boolean>;
-        seekedTime: import("vue").Ref<number, number>;
-        seekedPercentage: import("vue").Ref<number, number>;
-        scrubbedPercentage: import("vue").Ref<number, number>;
+        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+        dragging: import("vue").ShallowRef<boolean, boolean>;
+        seekedTime: import("vue").ShallowRef<number, number>;
+        seekedPercentage: import("vue").ShallowRef<number, number>;
+        scrubbedPercentage: import("vue").ShallowRef<number, number>;
         bufferedPercentage: import("vue").ComputedRef<number>;
-        thumbPercentage: import("vue").Ref<number, number>;
-        popoverOffsetX: import("vue").Ref<number, number>;
+        thumbPercentage: import("vue").ShallowRef<number, number>;
+        popoverOffsetX: import("vue").ShallowRef<number, number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
         onPointerdown: (e: MouseEvent | TouchEvent) => void;
@@ -69,10 +66,9 @@ export declare function useMagicPlayer(args: usePlayerApiArgs): {
         } | undefined>;
     };
     playerRuntime: {
-        loaded: import("vue").Ref<boolean, boolean>;
+        loaded: import("vue").ShallowRef<boolean, boolean>;
         initialize: () => void;
         destroy: () => void;
     };
 };
 export type UseMagicPlayerReturn = ReturnType<typeof useMagicPlayer>;
-export {};

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.mjs

@@ -2,11 +2,11 @@ import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
 import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
-export function useMagicPlayer(args) {
-  const mediaApi = usePlayerMediaApi({ id: args.id });
-  const videoApi = usePlayerVideoApi({ id: args.id });
-  const controlsApi = usePlayerControlsApi({ id: args.id });
-  const playerRuntime = usePlayerRuntime({ id: args.id });
+export function useMagicPlayer(id) {
+  const mediaApi = usePlayerMediaApi({ id });
+  const videoApi = usePlayerVideoApi({ id });
+  const controlsApi = usePlayerControlsApi({ id });
+  const playerRuntime = usePlayerRuntime({ id });
   return {
     mediaApi,
     videoApi,

package/dist/plugins/MagicPlayer/src/css/magic-player-audio-controls.css

@@ -0,0 +1,95 @@
+@import './magic-player-timeline.css';
+@import './magic-player-display-time.css';
+
+/* We keep this variable since it's used in multiple places */
+:root {
+  --magic-player-audio-controls-height: 3rem;
+}
+
+.magic-player-audio-controls {
+  width: 100%;
+  pointer-events: none;
+}
+
+.magic-player-audio-controls__bar {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  pointer-events: auto;
+}
+
+.magic-player-audio-controls__bar--inner {
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--magic-player-audio-controls-height);
+  padding: 0;
+  color: inherit;
+  display: flex;
+  align-items: center;
+}
+
+.magic-player-audio-controls__item {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+.magic-player-audio-controls__item.-shrink-0 {
+  flex-shrink: 0;
+}
+
+.magic-player-audio-controls__item.-grow {
+  flex-grow: 1;
+}
+
+.magic-player-audio-controls__item button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  outline: none;
+  appearance: none;
+  padding: 0;
+  border-radius: 0;
+  cursor: pointer;
+  width: 3rem;
+  height: var(--magic-player-audio-controls-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magic-player-audio-controls__item button svg {
+  display: block;
+  width: 1.25rem;
+  height: auto;
+}
+
+.magic-player-audio-controls__timeline {
+  width: 100%;
+}
+
+@container (max-width: 480px) {
+  .magic-player-audio-controls__item[data-slot='display-time-current'] {
+    display: none;
+  }
+}
+
+@container (max-width: 320px) {
+  .magic-player-audio-controls__item[data-slot='display-time-duration'] {
+    display: none;
+  }
+  .magic-player-audio-controls__item[data-slot='timeline'] {
+    padding-right: 1rem;
+  }
+}
+
+@container (max-width: 240px) {
+  .magic-player-audio-controls__item[data-slot='timeline'] {
+    display: none;
+  }
+  .magic-player-audio-controls__bar--inner {
+    justify-content: center;
+  }
+}