@maas/vue-equipment 0.20.1 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/nuxt/module.json +1 -1
  2. package/dist/nuxt/module.mjs +1 -1
  3. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs +15 -1
  4. package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts +2 -2
  5. package/dist/plugins/MagicDrawer/src/types/index.d.ts +1 -0
  6. package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs +1 -0
  7. package/dist/plugins/MagicPlayer/index.d.ts +3 -3
  8. package/dist/plugins/MagicPlayer/index.mjs +6 -3
  9. package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue +24 -18
  10. package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue.d.ts +8 -5
  11. package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue +20 -9
  12. package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue +2 -4
  13. package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue +29 -25
  14. package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue.d.ts +1 -0
  15. package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue +27 -0
  16. package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue.d.ts +21 -0
  17. package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue +10 -7
  18. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerControlsApi.d.ts +34 -0
  19. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerControlsApi.mjs +297 -0
  20. package/dist/plugins/MagicPlayer/src/composables/private/{useMediaApi.d.ts → usePlayerMediaApi.d.ts} +11 -7
  21. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs +263 -0
  22. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.d.ts +12 -0
  23. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs +70 -0
  24. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerStateEmitter.d.ts +15 -0
  25. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerStateEmitter.mjs +9 -0
  26. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.d.ts +22 -0
  27. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.mjs +142 -0
  28. package/dist/plugins/MagicPlayer/src/composables/usePlayerApi.d.ts +63 -5
  29. package/dist/plugins/MagicPlayer/src/composables/usePlayerApi.mjs +12 -65
  30. package/dist/plugins/MagicPlayer/src/types/index.d.ts +12 -25
  31. package/package.json +1 -1
  32. package/dist/plugins/MagicPlayer/src/composables/private/useControlsApi.d.ts +0 -17
  33. package/dist/plugins/MagicPlayer/src/composables/private/useControlsApi.mjs +0 -131
  34. package/dist/plugins/MagicPlayer/src/composables/private/useMediaApi.mjs +0 -122
  35. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerInternalApi.d.ts +0 -18
  36. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerInternalApi.mjs +0 -63
  37. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerStore.d.ts +0 -20
  38. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerStore.mjs +0 -42
  39. package/dist/plugins/MagicPlayer/src/composables/private/useRuntimeSourceProvider.d.ts +0 -6
  40. package/dist/plugins/MagicPlayer/src/composables/private/useRuntimeSourceProvider.mjs +0 -48
  41. package/dist/plugins/MagicPlayer/src/utils/index.d.ts +0 -1
  42. package/dist/plugins/MagicPlayer/src/utils/index.mjs +0 -8
@@ -1,63 +0,0 @@
1
- import { ref, watch, toValue } from "vue";
2
- import { useFullscreen } from "@vueuse/core";
3
- import { isIOS } from "@maas/vue-equipment/utils";
4
- import { usePlayerStore } from "./usePlayerStore.mjs";
5
- export function usePlayerInternalApi(args) {
6
- const touched = ref(false);
7
- const mouseEntered = ref(false);
8
- const fullscreenTarget = isIOS() ? args.videoRef : args.playerRef;
9
- const { findInstance } = usePlayerStore();
10
- const instance = findInstance(toValue(args.id));
11
- const { currentTime, playing, muted } = instance.mediaApi;
12
- const {
13
- isFullscreen,
14
- enter: enterFullscreen,
15
- exit: exitFullscreen,
16
- toggle: toggleFullscreen
17
- } = useFullscreen(fullscreenTarget);
18
- function play() {
19
- playing.value = true;
20
- }
21
- function pause() {
22
- playing.value = false;
23
- }
24
- function togglePlay() {
25
- playing.value = !playing.value;
26
- }
27
- function seek(time) {
28
- currentTime.value = time;
29
- }
30
- function mute() {
31
- muted.value = true;
32
- }
33
- function unmute() {
34
- muted.value = false;
35
- }
36
- function onMouseenter() {
37
- mouseEntered.value = true;
38
- }
39
- function onMouseleave() {
40
- mouseEntered.value = false;
41
- }
42
- watch(playing, () => {
43
- if (!touched.value) {
44
- touched.value = true;
45
- }
46
- });
47
- return {
48
- mouseEntered,
49
- isFullscreen,
50
- touched,
51
- play,
52
- pause,
53
- togglePlay,
54
- seek,
55
- mute,
56
- unmute,
57
- enterFullscreen,
58
- exitFullscreen,
59
- toggleFullscreen,
60
- onMouseenter,
61
- onMouseleave
62
- };
63
- }
@@ -1,20 +0,0 @@
1
- import { type ShallowRef } from 'vue';
2
- import type { UseMediaApiReturn } from './useMediaApi.js';
3
- import type { UsePlayerInternalApiReturn } from './usePlayerInternalApi.js';
4
- import type { UseRuntimeSourceProviderReturn } from './useRuntimeSourceProvider.js';
5
- import type { UseControlsApiReturn } from './useControlsApi.js';
6
- import type { UsePlayerApiArgs } from '../../types.js';
7
- export interface PlayerInstance {
8
- id: string;
9
- mediaApi: UseMediaApiReturn;
10
- playerApi: UsePlayerInternalApiReturn;
11
- controlsApi: UseControlsApiReturn;
12
- runtimeProvider: UseRuntimeSourceProviderReturn;
13
- args: UsePlayerApiArgs;
14
- }
15
- export declare function usePlayerStore(): {
16
- playerStore: ShallowRef<PlayerInstance[]>;
17
- findInstance: (id: string) => PlayerInstance;
18
- addInstance: (id: string) => PlayerInstance;
19
- removeInstance: (id: string) => void;
20
- };
@@ -1,42 +0,0 @@
1
- import { shallowRef, reactive } from "vue";
2
- const playerStore = shallowRef([]);
3
- export function usePlayerStore() {
4
- const defaultMediaApi = reactive({});
5
- const defaultPlayerApi = reactive({});
6
- const defaultControlsApi = reactive({});
7
- const defaultRuntimeProvider = reactive({});
8
- const defaultArgs = reactive({});
9
- function createInstance(id) {
10
- const instance = {
11
- id,
12
- mediaApi: defaultMediaApi,
13
- playerApi: defaultPlayerApi,
14
- controlsApi: defaultControlsApi,
15
- runtimeProvider: defaultRuntimeProvider,
16
- args: defaultArgs
17
- };
18
- return instance;
19
- }
20
- function findInstance(id) {
21
- const instance = playerStore.value.find((instance2) => {
22
- return instance2.id === id;
23
- });
24
- return instance;
25
- }
26
- function addInstance(id) {
27
- const instance = createInstance(id);
28
- playerStore.value.push(instance);
29
- return findInstance(id);
30
- }
31
- function removeInstance(id) {
32
- playerStore.value = playerStore.value.filter(
33
- (instance) => instance.id !== id
34
- );
35
- }
36
- return {
37
- playerStore,
38
- findInstance,
39
- addInstance,
40
- removeInstance
41
- };
42
- }
@@ -1,6 +0,0 @@
1
- import { type Ref } from 'vue';
2
- import type { UseRuntimeSourceProviderArgs } from '../../types.js';
3
- export type UseRuntimeSourceProviderReturn = {
4
- loaded: Ref<boolean>;
5
- };
6
- export declare function useRuntimeSourceProvider(args: UseRuntimeSourceProviderArgs): UseRuntimeSourceProviderReturn;
@@ -1,48 +0,0 @@
1
- import { ref, onMounted, onUnmounted, toValue } from "vue";
2
- export function useRuntimeSourceProvider(args) {
3
- let hls;
4
- const loaded = ref(false);
5
- const useNative = () => {
6
- const el = toValue(args.videoRef);
7
- if (!el)
8
- return;
9
- el.src = args.src;
10
- el.addEventListener(
11
- "loadeddata",
12
- () => {
13
- loaded.value = true;
14
- },
15
- { once: true }
16
- );
17
- el.load();
18
- };
19
- const useHlsJS = async () => {
20
- const el = toValue(args.videoRef);
21
- if (!el)
22
- return;
23
- const { default: Hls } = await import("hls.js");
24
- hls = new Hls();
25
- if (!Hls.isSupported()) {
26
- useNative();
27
- } else {
28
- hls.loadSource(args.src);
29
- hls.attachMedia(el);
30
- hls.on(Hls.Events.FRAG_LOADED, () => {
31
- loaded.value = true;
32
- });
33
- }
34
- };
35
- onMounted(() => {
36
- if (args.srcType === "native") {
37
- useNative();
38
- } else if (args.srcType === "hls") {
39
- useHlsJS();
40
- }
41
- });
42
- onUnmounted(() => {
43
- hls?.destroy();
44
- });
45
- return {
46
- loaded
47
- };
48
- }
@@ -1 +0,0 @@
1
- export declare function formatTime(s: number): string;
@@ -1,8 +0,0 @@
1
- export function formatTime(s) {
2
- const hours = Math.floor(s / 3600);
3
- const minutes = Math.floor((s - hours * 3600) / 60);
4
- const seconds = Math.floor(s - hours * 3600 - minutes * 60);
5
- const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
6
- const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;
7
- return `${hours > 0 ? `${hours}:` : ""}${minutesString}:${secondsString}`;
8
- }