@hopeplayer/vue 1.3.0 → 1.3.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.
- package/dist/hope-player-vue.js +14 -12
- package/dist/hope-player-vue.js.map +1 -1
- package/package.json +3 -3
package/dist/hope-player-vue.js
CHANGED
|
@@ -16,6 +16,8 @@ const E = /* @__PURE__ */ k({
|
|
|
16
16
|
playbackRates: {},
|
|
17
17
|
qualityBadge: { type: Boolean },
|
|
18
18
|
liveSeekBar: { type: Boolean },
|
|
19
|
+
pipButton: { type: Boolean },
|
|
20
|
+
fullscreenButton: { type: Boolean },
|
|
19
21
|
autoHideDelayMs: {},
|
|
20
22
|
cursorHideDelayMs: { type: [Number, Boolean] },
|
|
21
23
|
tapToPlay: { type: [String, Boolean] },
|
|
@@ -58,14 +60,14 @@ const E = /* @__PURE__ */ k({
|
|
|
58
60
|
dai: {}
|
|
59
61
|
},
|
|
60
62
|
emits: ["ready", "play", "pause", "ended", "error", "qualitychange", "ratechange", "adstart", "adend", "aderror", "itemchange", "sticky", "sourcefallback"],
|
|
61
|
-
setup(
|
|
62
|
-
const
|
|
63
|
+
setup(d, { expose: y, emit: h }) {
|
|
64
|
+
const p = d, a = h, r = O();
|
|
63
65
|
function m() {
|
|
64
66
|
const t = (r == null ? void 0 : r.vnode.props) ?? {}, e = new Set(Object.keys(t).map(q));
|
|
65
|
-
return Object.fromEntries(Object.entries(
|
|
67
|
+
return Object.fromEntries(Object.entries(p).filter(([o, g]) => e.has(o) && g !== void 0));
|
|
66
68
|
}
|
|
67
69
|
const n = v(null);
|
|
68
|
-
let
|
|
70
|
+
let i = !1, l = [];
|
|
69
71
|
j(() => {
|
|
70
72
|
const t = n.value;
|
|
71
73
|
if (t) {
|
|
@@ -98,18 +100,18 @@ const E = /* @__PURE__ */ k({
|
|
|
98
100
|
];
|
|
99
101
|
for (const [e, o] of l) t.addEventListener(e, o);
|
|
100
102
|
import("@hopeplayer/core").then(() => {
|
|
101
|
-
|
|
103
|
+
i || !n.value || (c = !0, s());
|
|
102
104
|
});
|
|
103
105
|
}
|
|
104
106
|
});
|
|
105
|
-
let c = !1,
|
|
107
|
+
let c = !1, u = "";
|
|
106
108
|
function s() {
|
|
107
109
|
if (!c || !n.value) return;
|
|
108
110
|
const t = m(), e = JSON.stringify(t);
|
|
109
|
-
e !==
|
|
111
|
+
e !== u && (u = e, n.value.options = t);
|
|
110
112
|
}
|
|
111
|
-
S(() => JSON.stringify(
|
|
112
|
-
|
|
113
|
+
S(() => JSON.stringify(p), s), w(s), R(() => {
|
|
114
|
+
i = !0;
|
|
113
115
|
const t = n.value;
|
|
114
116
|
if (t) for (const [e, o] of l) t.removeEventListener(e, o);
|
|
115
117
|
});
|
|
@@ -117,14 +119,14 @@ const E = /* @__PURE__ */ k({
|
|
|
117
119
|
var t;
|
|
118
120
|
return ((t = n.value) == null ? void 0 : t.play()) ?? Promise.resolve();
|
|
119
121
|
}
|
|
120
|
-
function
|
|
122
|
+
function B() {
|
|
121
123
|
var t;
|
|
122
124
|
(t = n.value) == null || t.pause();
|
|
123
125
|
}
|
|
124
|
-
function
|
|
126
|
+
function b() {
|
|
125
127
|
return n.value;
|
|
126
128
|
}
|
|
127
|
-
return y({ play: f, pause:
|
|
129
|
+
return y({ play: f, pause: B, getElement: b }), (t, e) => (_(), P("hope-player", {
|
|
128
130
|
ref_key: "elRef",
|
|
129
131
|
ref: n
|
|
130
132
|
}, 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}>();\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 ];\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}>();\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 ];\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.
|
|
3
|
+
"version": "1.3.1",
|
|
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.3.
|
|
38
|
+
"@hopeplayer/core": "^1.3.1",
|
|
39
39
|
"vue": ">=3.3"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@hopeplayer/core": "^1.3.
|
|
42
|
+
"@hopeplayer/core": "^1.3.1",
|
|
43
43
|
"@vitejs/plugin-vue": "^6.0.0",
|
|
44
44
|
"typescript": "^5.7.0",
|
|
45
45
|
"vite": "^6.0.0",
|