@hopeplayer/vue 1.6.0 → 1.7.0
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.
package/dist/hope-player-vue.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const E = /* @__PURE__ */
|
|
1
|
+
import { defineComponent as O, getCurrentInstance as k, ref as j, onMounted as v, watch as S, onUpdated as w, onBeforeUnmount as R, openBlock as P, createElementBlock as _, camelize as q } from "vue";
|
|
2
|
+
const E = /* @__PURE__ */ O({
|
|
3
3
|
__name: "HopePlayer",
|
|
4
4
|
props: {
|
|
5
5
|
id: {},
|
|
@@ -21,6 +21,9 @@ const E = /* @__PURE__ */ k({
|
|
|
21
21
|
pipButton: { type: Boolean },
|
|
22
22
|
documentPip: { type: [Boolean, Object] },
|
|
23
23
|
interactive: {},
|
|
24
|
+
multiview: {},
|
|
25
|
+
share: { type: [Boolean, Object] },
|
|
26
|
+
audioDescription: { type: [Boolean, Object] },
|
|
24
27
|
fullscreenButton: { type: Boolean },
|
|
25
28
|
autoHideDelayMs: {},
|
|
26
29
|
cursorHideDelayMs: { type: [Number, Boolean] },
|
|
@@ -72,7 +75,7 @@ const E = /* @__PURE__ */ k({
|
|
|
72
75
|
},
|
|
73
76
|
emits: ["ready", "play", "pause", "ended", "error", "qualitychange", "ratechange", "adstart", "adend", "aderror", "itemchange", "sticky", "sourcefallback", "analytics"],
|
|
74
77
|
setup(d, { expose: u, emit: m }) {
|
|
75
|
-
const i = d, a = m, r =
|
|
78
|
+
const i = d, a = m, r = k();
|
|
76
79
|
function h() {
|
|
77
80
|
const t = (r == null ? void 0 : r.vnode.props) ?? {}, e = new Set(Object.keys(t).map(q));
|
|
78
81
|
return Object.fromEntries(Object.entries(i).filter(([o, g]) => e.has(o) && g !== void 0));
|
|
@@ -122,7 +125,7 @@ const E = /* @__PURE__ */ k({
|
|
|
122
125
|
const t = h(), e = JSON.stringify(t);
|
|
123
126
|
e !== y && (y = e, n.value.options = t);
|
|
124
127
|
}
|
|
125
|
-
S(() => JSON.stringify(i), s),
|
|
128
|
+
S(() => JSON.stringify(i), s), w(s), R(() => {
|
|
126
129
|
p = !0;
|
|
127
130
|
const t = n.value;
|
|
128
131
|
if (t) for (const [e, o] of l) t.removeEventListener(e, o);
|
|
@@ -131,14 +134,14 @@ const E = /* @__PURE__ */ k({
|
|
|
131
134
|
var t;
|
|
132
135
|
return ((t = n.value) == null ? void 0 : t.play()) ?? Promise.resolve();
|
|
133
136
|
}
|
|
134
|
-
function
|
|
137
|
+
function b() {
|
|
135
138
|
var t;
|
|
136
139
|
(t = n.value) == null || t.pause();
|
|
137
140
|
}
|
|
138
|
-
function
|
|
141
|
+
function f() {
|
|
139
142
|
return n.value;
|
|
140
143
|
}
|
|
141
|
-
return u({ play: B, pause:
|
|
144
|
+
return u({ play: B, pause: b, getElement: f }), (t, e) => (P(), _("hope-player", {
|
|
142
145
|
ref_key: "elRef",
|
|
143
146
|
ref: n
|
|
144
147
|
}, null, 512));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hope-player-vue.js","sources":["../src/HopePlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// <hope-player> için ince Vue sarmalayıcı: prop'ları `.options`'a yazar, `hp:*` event'lerini emit'lere çevirir.\n// class/style Vue'nun fallthrough attribute'larıyla köke geçer. Core `onMounted` içinde dinamik import edilir —\n// statik import `HTMLElement` olmayan SSR'da (Nuxt) çöker.\nimport { ref, onMounted, onBeforeUnmount, onUpdated, watch, getCurrentInstance, camelize } from 'vue';\nimport type { HopePlayerElement as HopePlayerEl, HopePlayerEventMap, HopePlayerOptions, StickyCorner } from '@hopeplayer/core';\n\nconst props = defineProps<HopePlayerOptions>();\n\nconst emit = defineEmits<{\n ready: [];\n play: [];\n pause: [];\n ended: [];\n error: [message: string];\n qualitychange: [label: string];\n ratechange: [rate: number];\n adstart: [type: 'preroll' | 'midroll' | 'postroll'];\n adend: [type: 'preroll' | 'midroll' | 'postroll'];\n aderror: [message: string];\n itemchange: [index: number, source: 'playlist' | 'story'];\n sticky: [sticky: boolean, corner: StickyCorner | undefined];\n sourcefallback: [detail: HopePlayerEventMap['hp:sourcefallback']['detail']];\n analytics: [detail: HopePlayerEventMap['hp:analytics']['detail']];\n}>();\n\nconst instance = getCurrentInstance();\n\n/**\n * Yalnızca gerçekten verilen prop'lar `.options`'a geçer. Vue, `boolean` tipli bir prop verilmediğinde onu `undefined`\n * değil `false` yapar (boolean casting) — `{ ...props }` doğrudan yazılsaydı varsayılanı açık / 'auto' olan seçenekler\n * kapanırdı: `tapToPlay: false` (videoya tıklamak oynatmıyordu), `cursorHideDelayMs: false` (imleç hiç gizlenmiyordu),\n * `qualityBadge: false`.\n */\nfunction passedOptions(): HopePlayerOptions {\n const raw = instance?.vnode.props ?? {};\n const passed = new Set(Object.keys(raw).map(camelize));\n return Object.fromEntries(Object.entries(props).filter(([key, value]) => passed.has(key) && value !== undefined)) as HopePlayerOptions;\n}\n\nconst elRef = ref<HopePlayerEl | null>(null);\nlet cancelled = false;\nlet listeners: Array<[keyof HopePlayerEventMap, EventListener]> = [];\n\nonMounted(() => {\n const el = elRef.value;\n if (!el) return;\n\n // Dinleyiciler import'u beklemeden eklenir: core yüklenince customElements.define() elementi senkron upgrade\n // edip hp:ready'yi .then()'den ÖNCE dispatch ediyor — beklenirse @ready kaçırılır.\n listeners = [\n ['hp:ready', () => emit('ready')],\n ['hp:play', () => emit('play')],\n ['hp:pause', () => emit('pause')],\n ['hp:ended', () => emit('ended')],\n ['hp:error', (e) => emit('error', (e as CustomEvent<{ message: string }>).detail.message)],\n ['hp:qualitychange', (e) => emit('qualitychange', (e as CustomEvent<{ label: string }>).detail.label)],\n ['hp:ratechange', (e) => emit('ratechange', (e as CustomEvent<{ rate: number }>).detail.rate)],\n ['hp:adstart', (e) => emit('adstart', (e as CustomEvent<{ type: 'preroll' | 'midroll' | 'postroll' }>).detail.type)],\n ['hp:adend', (e) => emit('adend', (e as CustomEvent<{ type: 'preroll' | 'midroll' | 'postroll' }>).detail.type)],\n ['hp:aderror', (e) => emit('aderror', (e as CustomEvent<{ message: string }>).detail.message)],\n [\n 'hp:itemchange',\n (e) => {\n const detail = (e as CustomEvent<{ index: number; source: 'playlist' | 'story' }>).detail;\n emit('itemchange', detail.index, detail.source);\n },\n ],\n [\n 'hp:sticky',\n (e) => {\n const detail = (e as CustomEvent<{ sticky: boolean; corner?: StickyCorner }>).detail;\n emit('sticky', detail.sticky, detail.corner);\n },\n ],\n ['hp:sourcefallback', (e) => emit('sourcefallback', (e as HopePlayerEventMap['hp:sourcefallback']).detail)],\n ['hp:analytics', (e) => emit('analytics', (e as HopePlayerEventMap['hp:analytics']).detail)],\n ];\n for (const [name, handler] of listeners) el.addEventListener(name, handler);\n\n // .options için import'u bekle: element upgrade olmadan yazmak prototip accessor'ını kalıcı olarak maskeler.\n import('@hopeplayer/core').then(() => {\n if (cancelled || !elRef.value) return;\n coreReady = true;\n sync();\n });\n});\n\nlet coreReady = false;\nlet lastOptions = '';\n\n/** Verilen prop'lar değiştiyse `.options`'a yazar (aynıysa yazmaz — player gereksiz yere yeniden kurulmasın). */\nfunction sync(): void {\n if (!coreReady || !elRef.value) return;\n const options = passedOptions();\n const json = JSON.stringify(options);\n if (json === lastOptions) return;\n lastOptions = json;\n elRef.value.options = options;\n}\n\n// Değer değişimi: tüm prop'lar tek bir string olarak izlenir (prop başına ayrı watcher gerekmez).\nwatch(() => JSON.stringify(props), sync);\n// Prop'un verilip verilmemesi: boolean casting yüzünden değer aynı kalabilir (yokken de false) — Vue yine de bileşeni\n// günceller (verilen prop'ların listesi değişti), o an tekrar bakılır.\nonUpdated(sync);\n\nonBeforeUnmount(() => {\n cancelled = true;\n const el = elRef.value;\n if (el) for (const [name, handler] of listeners) el.removeEventListener(name, handler);\n});\n\nfunction play(): Promise<void> {\n return elRef.value?.play() ?? Promise.resolve();\n}\n\nfunction pause(): void {\n elRef.value?.pause();\n}\n\nfunction getElement(): HopePlayerEl | null {\n return elRef.value;\n}\n\ndefineExpose({ play, pause, getElement });\n</script>\n\n<template>\n <hope-player ref=\"elRef\" />\n</template>\n"],"names":["props","__props","emit","__emit","instance","getCurrentInstance","passedOptions","raw","passed","camelize","key","value","elRef","ref","cancelled","listeners","onMounted","el","detail","name","handler","coreReady","sync","lastOptions","options","json","watch","onUpdated","onBeforeUnmount","play","_a","pause","getElement","__expose","_createElementBlock"],"mappings":"
|
|
1
|
+
{"version":3,"file":"hope-player-vue.js","sources":["../src/HopePlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// <hope-player> için ince Vue sarmalayıcı: prop'ları `.options`'a yazar, `hp:*` event'lerini emit'lere çevirir.\n// class/style Vue'nun fallthrough attribute'larıyla köke geçer. Core `onMounted` içinde dinamik import edilir —\n// statik import `HTMLElement` olmayan SSR'da (Nuxt) çöker.\nimport { ref, onMounted, onBeforeUnmount, onUpdated, watch, getCurrentInstance, camelize } from 'vue';\nimport type { HopePlayerElement as HopePlayerEl, HopePlayerEventMap, HopePlayerOptions, StickyCorner } from '@hopeplayer/core';\n\nconst props = defineProps<HopePlayerOptions>();\n\nconst emit = defineEmits<{\n ready: [];\n play: [];\n pause: [];\n ended: [];\n error: [message: string];\n qualitychange: [label: string];\n ratechange: [rate: number];\n adstart: [type: 'preroll' | 'midroll' | 'postroll'];\n adend: [type: 'preroll' | 'midroll' | 'postroll'];\n aderror: [message: string];\n itemchange: [index: number, source: 'playlist' | 'story'];\n sticky: [sticky: boolean, corner: StickyCorner | undefined];\n sourcefallback: [detail: HopePlayerEventMap['hp:sourcefallback']['detail']];\n analytics: [detail: HopePlayerEventMap['hp:analytics']['detail']];\n}>();\n\nconst instance = getCurrentInstance();\n\n/**\n * Yalnızca gerçekten verilen prop'lar `.options`'a geçer. Vue, `boolean` tipli bir prop verilmediğinde onu `undefined`\n * değil `false` yapar (boolean casting) — `{ ...props }` doğrudan yazılsaydı varsayılanı açık / 'auto' olan seçenekler\n * kapanırdı: `tapToPlay: false` (videoya tıklamak oynatmıyordu), `cursorHideDelayMs: false` (imleç hiç gizlenmiyordu),\n * `qualityBadge: false`.\n */\nfunction passedOptions(): HopePlayerOptions {\n const raw = instance?.vnode.props ?? {};\n const passed = new Set(Object.keys(raw).map(camelize));\n return Object.fromEntries(Object.entries(props).filter(([key, value]) => passed.has(key) && value !== undefined)) as HopePlayerOptions;\n}\n\nconst elRef = ref<HopePlayerEl | null>(null);\nlet cancelled = false;\nlet listeners: Array<[keyof HopePlayerEventMap, EventListener]> = [];\n\nonMounted(() => {\n const el = elRef.value;\n if (!el) return;\n\n // Dinleyiciler import'u beklemeden eklenir: core yüklenince customElements.define() elementi senkron upgrade\n // edip hp:ready'yi .then()'den ÖNCE dispatch ediyor — beklenirse @ready kaçırılır.\n listeners = [\n ['hp:ready', () => emit('ready')],\n ['hp:play', () => emit('play')],\n ['hp:pause', () => emit('pause')],\n ['hp:ended', () => emit('ended')],\n ['hp:error', (e) => emit('error', (e as CustomEvent<{ message: string }>).detail.message)],\n ['hp:qualitychange', (e) => emit('qualitychange', (e as CustomEvent<{ label: string }>).detail.label)],\n ['hp:ratechange', (e) => emit('ratechange', (e as CustomEvent<{ rate: number }>).detail.rate)],\n ['hp:adstart', (e) => emit('adstart', (e as CustomEvent<{ type: 'preroll' | 'midroll' | 'postroll' }>).detail.type)],\n ['hp:adend', (e) => emit('adend', (e as CustomEvent<{ type: 'preroll' | 'midroll' | 'postroll' }>).detail.type)],\n ['hp:aderror', (e) => emit('aderror', (e as CustomEvent<{ message: string }>).detail.message)],\n [\n 'hp:itemchange',\n (e) => {\n const detail = (e as CustomEvent<{ index: number; source: 'playlist' | 'story' }>).detail;\n emit('itemchange', detail.index, detail.source);\n },\n ],\n [\n 'hp:sticky',\n (e) => {\n const detail = (e as CustomEvent<{ sticky: boolean; corner?: StickyCorner }>).detail;\n emit('sticky', detail.sticky, detail.corner);\n },\n ],\n ['hp:sourcefallback', (e) => emit('sourcefallback', (e as HopePlayerEventMap['hp:sourcefallback']).detail)],\n ['hp:analytics', (e) => emit('analytics', (e as HopePlayerEventMap['hp:analytics']).detail)],\n ];\n for (const [name, handler] of listeners) el.addEventListener(name, handler);\n\n // .options için import'u bekle: element upgrade olmadan yazmak prototip accessor'ını kalıcı olarak maskeler.\n import('@hopeplayer/core').then(() => {\n if (cancelled || !elRef.value) return;\n coreReady = true;\n sync();\n });\n});\n\nlet coreReady = false;\nlet lastOptions = '';\n\n/** Verilen prop'lar değiştiyse `.options`'a yazar (aynıysa yazmaz — player gereksiz yere yeniden kurulmasın). */\nfunction sync(): void {\n if (!coreReady || !elRef.value) return;\n const options = passedOptions();\n const json = JSON.stringify(options);\n if (json === lastOptions) return;\n lastOptions = json;\n elRef.value.options = options;\n}\n\n// Değer değişimi: tüm prop'lar tek bir string olarak izlenir (prop başına ayrı watcher gerekmez).\nwatch(() => JSON.stringify(props), sync);\n// Prop'un verilip verilmemesi: boolean casting yüzünden değer aynı kalabilir (yokken de false) — Vue yine de bileşeni\n// günceller (verilen prop'ların listesi değişti), o an tekrar bakılır.\nonUpdated(sync);\n\nonBeforeUnmount(() => {\n cancelled = true;\n const el = elRef.value;\n if (el) for (const [name, handler] of listeners) el.removeEventListener(name, handler);\n});\n\nfunction play(): Promise<void> {\n return elRef.value?.play() ?? Promise.resolve();\n}\n\nfunction pause(): void {\n elRef.value?.pause();\n}\n\nfunction getElement(): HopePlayerEl | null {\n return elRef.value;\n}\n\ndefineExpose({ play, pause, getElement });\n</script>\n\n<template>\n <hope-player ref=\"elRef\" />\n</template>\n"],"names":["props","__props","emit","__emit","instance","getCurrentInstance","passedOptions","raw","passed","camelize","key","value","elRef","ref","cancelled","listeners","onMounted","el","detail","name","handler","coreReady","sync","lastOptions","options","json","watch","onUpdated","onBeforeUnmount","play","_a","pause","getElement","__expose","_createElementBlock"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hopeplayer/vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "Thin Vue 3 wrapper around <hope-player> (@hopeplayer/core) — prop/event bridge only, no state duplication",
|
|
5
5
|
"keywords": ["vue", "vue3", "nuxt", "vue-component", "video-player", "video", "player", "html5-video", "hls", "m3u8", "web-component", "custom-element", "ima", "vast", "vmap", "prebid", "ads", "monetization", "chromecast", "airplay", "subtitles", "shadow-dom", "hopeplayer"],
|
|
6
6
|
"repository": {
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"typecheck": "vue-tsc -p tsconfig.json --noEmit"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@hopeplayer/core": "^1.
|
|
38
|
+
"@hopeplayer/core": "^1.7.0",
|
|
39
39
|
"vue": ">=3.3"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@hopeplayer/core": "^1.
|
|
42
|
+
"@hopeplayer/core": "^1.7.0",
|
|
43
43
|
"@vitejs/plugin-vue": "^6.0.0",
|
|
44
44
|
"typescript": "^5.7.0",
|
|
45
45
|
"vite": "^6.0.0",
|