@maas/vue-equipment 0.12.0 → 0.13.0

package/dist/plugins/MagicMarquee/nuxt.mjs

@@ -6,7 +6,7 @@ import {
 } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
-    name: "@maas/vue-equipment/MagicMarquee"
+    name: "@maas/vue-equipment/nuxt/MagicMarquee"
   },
   setup() {
     const resolver = createResolver(import.meta.url);

package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue

@@ -48,58 +48,6 @@ defineExpose({
 })
 </script>
 
-<style lang="css">
-:root {
-  --magic-marquee-gap: 1rem;
-  --magic-marquee-content-width: unset;
-  --magic-marquee-transform-target-x: -100%;
-}
-
-@keyframes magicMarqueeScrollX {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes magicMarqueeScrollY {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.magic-marquee {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  user-select: none;
-}
-
-.magic-marquee__track {
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-}
-
-.magic-marquee__content {
-  white-space: nowrap;
-  backface-visibility: hidden;
-  padding-right: var(--magic-marquee-gap);
-  width: var(--magic-marquee-content-width);
-  animation-name: var(--magic-marquee-animation-name);
-  animation-duration: var(--magic-marquee-animation-duration);
-  animation-play-state: var(--magic-marquee-animation-play-state, running);
-  animation-direction: var(--magic-marquee-animation-direction, normal);
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-delay: 0;
-  flex-shrink: 0;
-  flex-grow: 0;
-}
+<style>
+:root{--magic-marquee-gap:1rem;--magic-marquee-content-width:unset;--magic-marquee-transform-target-x:-100%}@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{display:flex;justify-content:flex-start;position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;flex-grow:0;flex-shrink:0;padding-right:var(--magic-marquee-gap);white-space:nowrap;width:var(--magic-marquee-content-width)}
 </style>

package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue.d.ts

@@ -1,32 +1,41 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    direction: {
-        type: import("vue").PropType<"reverse" | "normal">;
-        default: string;
-    };
-    speed: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-}, {
+interface Props {
+    direction?: 'reverse' | 'normal';
+    speed?: number;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    direction: string;
+    speed: number;
+}>, {
     playing: import("vue").Ref<boolean>;
     play: () => void;
     pause: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: import("vue").PropType<"reverse" | "normal">;
-        default: string;
-    };
-    speed: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-}>>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    direction: string;
+    speed: number;
+}>>>, {
     direction: "reverse" | "normal";
     speed: number;
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/plugins/MagicModal/nuxt.mjs

@@ -6,7 +6,7 @@ import {
 } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
-    name: "@maas/vue-equipment/MagicModal"
+    name: "@maas/vue-equipment/nuxt/MagicModal"
   },
   setup() {
     const resolver = createResolver(import.meta.url);
@@ -17,12 +17,10 @@ export default defineNuxtModule({
     });
     addImports({
       from: "@maas/vue-equipment/plugins/MagicModal",
-      typeFrom: "@maas/vue-equipment/plugins/MagicModal",
       name: "useModalApi"
     });
     addImports({
       from: "@maas/vue-equipment/plugins/MagicModal",
-      typeFrom: "@maas/vue-equipment/plugins/MagicModal",
       name: "useModalEmitter"
     });
   }

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -63,6 +63,7 @@ import {
   type Component,
   type MaybeRef,
 } from 'vue'
+import { createDefu } from 'defu'
 import { onKeyStroke } from '@vueuse/core'
 import { defaultOptions } from './../utils/defaultOptions'
 import { useModalApi } from './../composables/useModalApi'
@@ -70,7 +71,8 @@ import { useModalCallback } from '../composables/private/useModalCallback'
 
 import type { ModalOptions } from './../types/index'
 
-import { createDefu } from 'defu'
+import 'utils/css/animations/fade-in.css'
+import 'utils/css/animations/fade-out.css'
 
 // Prevent keys array from being merged with default
 const customDefu = createDefu((obj, key, value) => {
@@ -160,104 +162,5 @@ watch(isActive, async (value) => {
 </script>
 
 <style>
-@import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-@import '@maas/vue-equipment/utils/css/animations/fade-out.css';
-
-:root {
-  --magic-modal-z-index: 999;
-  --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
-  --magic-modal-backdrop-filter: unset;
-  --magic-modal-content-align-items: center;
-  --magic-modal-content-justify-content: center;
-  --magic-modal-content-overflow-y: auto;
-}
-
-@keyframes magic-modal-content-enter {
-  0% {
-    opacity: 0;
-    transform: translateY(2rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes magic-modal-content-leave {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.02);
-  }
-}
-
-.magic-modal {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--magic-modal-z-index);
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  border: none;
-}
-
-.magic-modal__content {
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  max-height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: var(--magic-modal-content-align-items);
-  justify-content: var(--magic-modal-content-justify-content);
-  overflow-y: var(--magic-modal-content-overflow-y);
-}
-
-.magic-modal__backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--magic-modal-backdrop-color);
-  backdrop-filter: var(--magic-modal-backdrop-filter);
-  z-index: -1;
-}
-
-/* Content */
-.magic-modal--content-enter-active {
-  animation: magic-modal-content-enter 300ms ease;
-}
-
-.magic-modal--content-leave-active {
-  animation: magic-modal-content-leave 300ms ease;
-}
-
-@media (prefers-reduced-motion) {
-  .magic-modal--content-enter-active {
-    animation: fade-in 300ms ease;
-  }
-
-  .magic-modal--content-leave-active {
-    animation: fade-out 300ms ease;
-  }
-}
-
-/* Backdrop */
-.magic-modal--backdrop-enter-active {
-  animation: fade-in 300ms ease;
-}
-
-.magic-modal--backdrop-leave-active {
-  animation: fade-out 300ms ease;
-}
+:root{--magic-modal-z-index:999;--magic-modal-backdrop-color:rgba(0,0,0,.5);--magic-modal-backdrop-filter:unset;--magic-modal-content-align-items:center;--magic-modal-content-justify-content:center;--magic-modal-content-overflow-y:auto}@keyframes magic-modal-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items);display:flex;justify-content:var(--magic-modal-content-justify-content);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y);scroll-behavior:smooth;width:100%}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter);backdrop-filter:var(--magic-modal-backdrop-filter);background-color:var(--magic-modal-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -1,48 +1,42 @@
 import { type Component, type MaybeRef } from 'vue';
 import type { ModalOptions } from './../types/index';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    props: {
-        type: import("vue").PropType<Record<string, unknown>>;
-    };
-    class: {
-        type: import("vue").PropType<MaybeRef<string>>;
-    };
-    id: {
-        type: import("vue").PropType<MaybeRef<string>>;
-        required: true;
-    };
-    component: {
-        type: import("vue").PropType<Component>;
-    };
-    options: {
-        type: import("vue").PropType<ModalOptions>;
-        default: () => RequireAll<ModalOptions>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    props: {
-        type: import("vue").PropType<Record<string, unknown>>;
-    };
-    class: {
-        type: import("vue").PropType<MaybeRef<string>>;
-    };
-    id: {
-        type: import("vue").PropType<MaybeRef<string>>;
-        required: true;
-    };
-    component: {
-        type: import("vue").PropType<Component>;
-    };
-    options: {
-        type: import("vue").PropType<ModalOptions>;
-        default: () => RequireAll<ModalOptions>;
-    };
-}>>, {
+import 'utils/css/animations/fade-in.css';
+import 'utils/css/animations/fade-out.css';
+interface MagicModalProps {
+    id: MaybeRef<string>;
+    class?: MaybeRef<string>;
+    component?: Component;
+    props?: Record<string, unknown>;
+    options?: ModalOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
+    options: () => RequireAll<ModalOptions>;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
+    options: () => RequireAll<ModalOptions>;
+}>>>, {
     options: ModalOptions;
 }, {}>, {
     backdrop?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts

@@ -5,7 +5,7 @@ export type useModalApiOptions = Pick<ModalOptions, 'scrollLock'> & {
     focusTarget: MaybeElementRef;
 };
 export declare function useModalApi(id?: MaybeRef<string>, options?: useModalApiOptions): {
-    id: import("vue").ComputedRef<any>;
+    id: import("vue").ComputedRef<string>;
     isActive: import("vue").ComputedRef<boolean>;
     open: () => void;
     close: () => void;

package/dist/plugins/MagicModal/src/composables/useModalApi.mjs

@@ -1,4 +1,4 @@
-import { uuid } from "@maas/vue-equipment/utils";
+import { uuid } from "utils";
 import { ref, computed, toValue } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";

package/dist/plugins/MagicModal/src/utils/defaultOptions.d.ts

@@ -1,4 +1,4 @@
 import type { ModalOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils/types/RequireAll';
+import type { RequireAll } from 'utils';
 declare const defaultOptions: RequireAll<ModalOptions>;
 export { defaultOptions };

package/dist/plugins/MagicNoise/nuxt.mjs

@@ -6,7 +6,7 @@ import {
 } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
-    name: "@maas/vue-equipment/MagicNoise"
+    name: "@maas/vue-equipment/nuxt/MagicNoise"
   },
   setup() {
     const resolver = createResolver(import.meta.url);

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue

@@ -14,7 +14,7 @@ import { useNoiseApi } from '../composables/useNoiseApi'
 import type { NoiseOptions } from '../types'
 
 interface Props {
-  options: NoiseOptions
+  options?: NoiseOptions
   pause?: boolean
 }
 
@@ -30,6 +30,7 @@ const noiseApi = useNoiseApi({
   offCanvasRef,
   options: props.options,
 })
+
 const {
   initialize,
   drawControls,
@@ -66,45 +67,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="css">
-:root {
-  --magic-noise-loading-background: #000;
-  --magic-noise-loading-transition: color 300ms ease, opacity 300ms ease;
-}
-
-.magic-noise {
-  position: relative;
-  user-select: none;
-  transition: var(--magic-noise-loading-transition);
-  &.-loading {
-    background: var(--magic-noise-loading-background);
-  }
-}
-
-.magic-noise__inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: var(--magic-noise-loading-transition);
-  &.-loading {
-    opacity: 0;
-  }
-}
-
-.magic-noise__canvas {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  object-fit: cover;
-}
-
-.magic-noise__off-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
+<style>
+:root{--magic-noise-loading-background:#000;--magic-noise-loading-transition:color 300ms ease,opacity 300ms ease}.magic-noise{position:relative;transition:var(--magic-noise-loading-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-noise.-loading{background:var(--magic-noise-loading-background)}.magic-noise__inner{height:100%;position:relative;transition:var(--magic-noise-loading-transition);width:100%}.magic-noise__inner.-loading{opacity:0}.magic-noise__canvas{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-noise__off-canvas{left:0;pointer-events:none;position:absolute;top:0;visibility:hidden}
 </style>

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue.d.ts

@@ -1,23 +1,30 @@
 import type { NoiseOptions } from '../types';
-declare const _default: import("vue").DefineComponent<{
-    pause: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    options: {
-        type: import("vue").PropType<NoiseOptions>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    pause: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    options: {
-        type: import("vue").PropType<NoiseOptions>;
-        required: true;
-    };
-}>>, {
+interface Props {
+    options?: NoiseOptions;
+    pause?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    pause: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    pause: boolean;
+}>>>, {
     pause: boolean;
 }, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/plugins/MagicNoise/src/utils/defaultOptions.d.ts

@@ -1,4 +1,4 @@
 import type { NoiseOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils/types/RequireAll';
+import type { RequireAll } from 'utils';
 declare const defaultOptions: RequireAll<NoiseOptions>;
 export { defaultOptions };

package/dist/plugins/MagicPlayer/nuxt.mjs

@@ -6,7 +6,7 @@ import {
 } from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
-    name: "@maas/vue-equipment/MagicPlayer"
+    name: "@maas/vue-equipment/nuxt/MagicPlayer"
   },
   setup() {
     const resolver = createResolver(import.meta.url);

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

@@ -11,6 +11,7 @@
       class="magic-player-video"
       preload="auto"
       playsinline
+      disablePictureInPicture
     />
     <div v-show="!loaded || !touched" class="magic-player-poster">
       <slot name="poster" />
@@ -20,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, toRefs } from 'vue'
+import { ref, computed } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
@@ -32,6 +33,7 @@ export type MagicPlayerProps = {
   src: string
   ratio?: string
   fill?: boolean
+  autoplay?: boolean
 }
 
 const props = withDefaults(defineProps<MagicPlayerProps>(), {
@@ -39,6 +41,7 @@ const props = withDefaults(defineProps<MagicPlayerProps>(), {
   src: '',
   ratio: '16:9',
   fill: false,
+  autoplay: false,
 })
 
 const playerRef = ref<HTMLDivElement | undefined>(undefined)
@@ -53,16 +56,24 @@ const { instance } = usePlayerApi({
   src: props.src,
 })
 
-const { playing } = toRefs(instance.value?.mediaApi)
-const { touched } = toRefs(instance.value?.playerApi)
+const { playing } = instance.value?.mediaApi
+const { touched } = instance.value?.playerApi
 const { onMouseenter, onMouseleave } = instance.value?.playerApi
-const { loaded } = toRefs(instance.value?.runtimeProvider)
+const { loaded } = instance.value?.runtimeProvider
 
-useIntersectionObserver(playerRef, ([{ isIntersecting }]) => {
-  if (!isIntersecting && playing.value) {
-    instance.value.playerApi.pause()
-  }
-})
+useIntersectionObserver(
+  playerRef,
+  ([{ isIntersecting }]) => {
+    if (!isIntersecting && playing.value) {
+      instance.value.playerApi.pause()
+    } else if (isIntersecting && !playing.value && props.autoplay) {
+      instance.value.playerApi.play()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 
 const computedRatio = computed(() => {
   if (props.ratio) {
@@ -83,26 +94,6 @@ const computedStyle = computed(() => {
 })
 </script>
 
-<style lang="css">
-.magic-player {
-  --aspect-ratio: 16 / 9;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  aspect-ratio: var(--aspect-ratio);
-}
-
-.magic-player-video {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  object-fit: cover;
-}
-
-.magic-player-poster {
-  position: absolute;
-  inset: 0;
-}
+<style>
+:root{--magic-player-aspect-ratio:16/9}.magic-player{aspect-ratio:var(--magic-player-aspect-ratio);overflow:hidden;position:relative;width:100%}.magic-player-video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-player-poster{inset:0;position:absolute}
 </style>