@video-lab/vue-config 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Video Lab Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @video-lab/vue-config
+
+Vue inline 与 Vue Frame 共用的 `PlayerProvider` 注入上下文。业务通常从 `@video-lab/vue` 或 `@video-lab/vue-frame` 导入 `PlayerProvider`、`usePlayerI18n`，无需直接安装本包。
+
+公开 API 与示例：[全局播放器配置与语言切换](../../docs/guides/PLAYER-GLOBAL-CONFIG.md)。
+
+```vue
+<script setup lang="ts">
+import { PlayerProvider, usePlayerI18n } from '@video-lab/vue-config'
+import { defineComponent, h } from 'vue'
+
+const LanguageLabel = defineComponent({
+  setup() {
+    const { locale } = usePlayerI18n()
+    return () => h('span', locale.value)
+  },
+})
+
+</script>
+
+<template>
+  <PlayerProvider default-locale="zh-CN"><LanguageLabel /></PlayerProvider>
+</template>
+```

package/dist/index.cjs

@@ -0,0 +1,116 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _video_lab_protocol = require("@video-lab/protocol");
+let vue = require("vue");
+//#region src/index.ts
+const key = Symbol("video-lab-player-config");
+const PlayerProvider = (0, vue.defineComponent)({
+	name: "PlayerProvider",
+	props: {
+		locale: String,
+		defaultLocale: String,
+		resources: Object,
+		messageOverrides: Object,
+		fallbackLocales: Array,
+		defaults: Object,
+		frameDefaults: Object
+	},
+	emits: { "update:locale": (_locale) => true },
+	setup(props, { emit, slots }) {
+		const parent = (0, vue.inject)(key, null);
+		const instance = (0, vue.getCurrentInstance)();
+		const initialLocale = (0, vue.ref)((0, _video_lab_protocol.normalizeLocaleTag)(props.defaultLocale ?? parent?.value.locale ?? "zh-CN"));
+		const context = (0, vue.computed)(() => {
+			const parentValue = parent?.value;
+			const inheritsLocale = props.locale === void 0 && props.defaultLocale === void 0 && !!parentValue;
+			return {
+				locale: inheritsLocale ? parentValue.locale : (0, _video_lab_protocol.normalizeLocaleTag)(props.locale ?? initialLocale.value),
+				resources: (0, _video_lab_protocol.mergeMessageResources)(parentValue?.resources, props.resources),
+				messageOverrides: (0, _video_lab_protocol.mergeMessageResources)(parentValue?.messageOverrides, props.messageOverrides),
+				fallbackLocales: props.fallbackLocales ?? parentValue?.fallbackLocales ?? [],
+				defaults: (0, _video_lab_protocol.mergePlayerDefaults)(parentValue?.defaults, props.defaults),
+				frameDefaults: (0, _video_lab_protocol.mergeFrameDefaults)(parentValue?.frameDefaults, props.frameDefaults),
+				changeLanguage(next) {
+					const normalized = (0, _video_lab_protocol.normalizeLocaleTag)(next);
+					if (inheritsLocale) return parentValue.changeLanguage(normalized);
+					if (props.locale !== void 0) {
+						if (!instance?.vnode.props?.["onUpdate:locale"]) return false;
+						emit("update:locale", normalized);
+						return true;
+					}
+					initialLocale.value = normalized;
+					emit("update:locale", normalized);
+					return true;
+				}
+			};
+		});
+		(0, vue.provide)(key, context);
+		return () => slots.default?.() ?? [];
+	}
+});
+/** 播放器组件使用的可选上下文。 */
+function useOptionalPlayerConfig() {
+	return (0, vue.inject)(key, null);
+}
+const LIVE_DEFAULTS = [
+	"muted",
+	"interactive",
+	"showErrorOverlay",
+	"showDefaultLoadingOverlay",
+	"showLoadingText",
+	"errorButtonColors"
+];
+/** Vue 组件在 setup 中调用；返回可供 watch 与模板追踪的 props 代理。 */
+function useResolvedPlayerProps(props, frame = false) {
+	const configProps = props;
+	const context = useOptionalPlayerConfig();
+	if (!context) return props;
+	const initialDefaults = context.value.defaults;
+	const initialFrameDefaults = context.value.frameDefaults;
+	let localeCache = null;
+	const effective = (0, vue.computed)(() => {
+		const current = context.value;
+		const defaults = { ...initialDefaults };
+		for (const key of LIVE_DEFAULTS) defaults[key] = current.defaults[key];
+		const resolved = (0, _video_lab_protocol.applyPlayerDefaults)(configProps, defaults);
+		if (frame) {
+			for (const field of [
+				"origin",
+				"iframeVersion",
+				"debug"
+			]) if (resolved[field] === void 0) resolved[field] = initialFrameDefaults[field];
+		}
+		const localeKey = JSON.stringify([
+			configProps.locale,
+			current.locale,
+			current.resources,
+			current.messageOverrides,
+			current.fallbackLocales
+		]);
+		if (localeCache?.key !== localeKey) localeCache = {
+			key: localeKey,
+			value: (0, _video_lab_protocol.applyProviderLocale)(configProps.locale, current.locale, current.resources, current.messageOverrides, current.fallbackLocales)
+		};
+		resolved.locale = localeCache.value;
+		return resolved;
+	});
+	return new Proxy(props, { get(_target, property, receiver) {
+		return Reflect.get(effective.value, property, receiver);
+	} });
+}
+function usePlayerI18n() {
+	const context = (0, vue.inject)(key, null);
+	if (!context) throw new Error("usePlayerI18n 必须在 PlayerProvider 内使用");
+	return {
+		locale: (0, vue.computed)(() => context.value.locale),
+		t(key) {
+			const value = context.value;
+			return (0, _video_lab_protocol.resolveLocaleMessages)((0, _video_lab_protocol.applyProviderLocale)(void 0, value.locale, value.resources, value.messageOverrides, value.fallbackLocales)).messages[key] ?? key;
+		},
+		changeLanguage: (next) => context.value.changeLanguage(next)
+	};
+}
+//#endregion
+exports.PlayerProvider = PlayerProvider;
+exports.useOptionalPlayerConfig = useOptionalPlayerConfig;
+exports.usePlayerI18n = usePlayerI18n;
+exports.useResolvedPlayerProps = useResolvedPlayerProps;

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import { FrameDefaults, LocaleConfig, MessageResources, PlayerDefaults } from "@video-lab/protocol";
+import { PropType, Ref } from "vue";
+//#region src/index.d.ts
+interface PlayerConfigContext {
+  locale: string;
+  resources: MessageResources;
+  messageOverrides: MessageResources;
+  fallbackLocales: string[];
+  defaults: PlayerDefaults;
+  frameDefaults: FrameDefaults;
+  changeLanguage(next: string): boolean;
+}
+declare const PlayerProvider: import("vue").DefineComponent<{
+  locale: StringConstructor;
+  defaultLocale: StringConstructor;
+  resources: PropType<MessageResources>;
+  messageOverrides: PropType<MessageResources>;
+  fallbackLocales: PropType<string[]>;
+  defaults: PropType<PlayerDefaults>;
+  frameDefaults: PropType<FrameDefaults>;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:locale': (_locale: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  locale: StringConstructor;
+  defaultLocale: StringConstructor;
+  resources: PropType<MessageResources>;
+  messageOverrides: PropType<MessageResources>;
+  fallbackLocales: PropType<string[]>;
+  defaults: PropType<PlayerDefaults>;
+  frameDefaults: PropType<FrameDefaults>;
+}>> & {
+  "onUpdate:locale"?: ((_locale: string) => any) | undefined;
+}, {}, {}>;
+/** 播放器组件使用的可选上下文。 */
+declare function useOptionalPlayerConfig(): Ref<PlayerConfigContext> | null;
+/** Vue 组件在 setup 中调用；返回可供 watch 与模板追踪的 props 代理。 */
+declare function useResolvedPlayerProps<T extends object>(props: T, frame?: boolean): T & {
+  locale?: LocaleConfig;
+};
+declare function usePlayerI18n(): {
+  locale: Readonly<Ref<string>>;
+  t(key: string): string;
+  changeLanguage(next: string): boolean;
+};
+//#endregion
+export { PlayerConfigContext, PlayerProvider, useOptionalPlayerConfig, usePlayerI18n, useResolvedPlayerProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import { FrameDefaults, LocaleConfig, MessageResources, PlayerDefaults } from "@video-lab/protocol";
+import { PropType, Ref } from "vue";
+//#region src/index.d.ts
+interface PlayerConfigContext {
+  locale: string;
+  resources: MessageResources;
+  messageOverrides: MessageResources;
+  fallbackLocales: string[];
+  defaults: PlayerDefaults;
+  frameDefaults: FrameDefaults;
+  changeLanguage(next: string): boolean;
+}
+declare const PlayerProvider: import("vue").DefineComponent<{
+  locale: StringConstructor;
+  defaultLocale: StringConstructor;
+  resources: PropType<MessageResources>;
+  messageOverrides: PropType<MessageResources>;
+  fallbackLocales: PropType<string[]>;
+  defaults: PropType<PlayerDefaults>;
+  frameDefaults: PropType<FrameDefaults>;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:locale': (_locale: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  locale: StringConstructor;
+  defaultLocale: StringConstructor;
+  resources: PropType<MessageResources>;
+  messageOverrides: PropType<MessageResources>;
+  fallbackLocales: PropType<string[]>;
+  defaults: PropType<PlayerDefaults>;
+  frameDefaults: PropType<FrameDefaults>;
+}>> & {
+  "onUpdate:locale"?: ((_locale: string) => any) | undefined;
+}, {}, {}>;
+/** 播放器组件使用的可选上下文。 */
+declare function useOptionalPlayerConfig(): Ref<PlayerConfigContext> | null;
+/** Vue 组件在 setup 中调用；返回可供 watch 与模板追踪的 props 代理。 */
+declare function useResolvedPlayerProps<T extends object>(props: T, frame?: boolean): T & {
+  locale?: LocaleConfig;
+};
+declare function usePlayerI18n(): {
+  locale: Readonly<Ref<string>>;
+  t(key: string): string;
+  changeLanguage(next: string): boolean;
+};
+//#endregion
+export { PlayerConfigContext, PlayerProvider, useOptionalPlayerConfig, usePlayerI18n, useResolvedPlayerProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,114 @@
+import { applyPlayerDefaults, applyProviderLocale, mergeFrameDefaults, mergeMessageResources, mergePlayerDefaults, normalizeLocaleTag, resolveLocaleMessages } from "@video-lab/protocol";
+import { computed, defineComponent, getCurrentInstance, inject, provide, ref } from "vue";
+//#region src/index.ts
+const key = Symbol("video-lab-player-config");
+const PlayerProvider = defineComponent({
+	name: "PlayerProvider",
+	props: {
+		locale: String,
+		defaultLocale: String,
+		resources: Object,
+		messageOverrides: Object,
+		fallbackLocales: Array,
+		defaults: Object,
+		frameDefaults: Object
+	},
+	emits: { "update:locale": (_locale) => true },
+	setup(props, { emit, slots }) {
+		const parent = inject(key, null);
+		const instance = getCurrentInstance();
+		const initialLocale = ref(normalizeLocaleTag(props.defaultLocale ?? parent?.value.locale ?? "zh-CN"));
+		const context = computed(() => {
+			const parentValue = parent?.value;
+			const inheritsLocale = props.locale === void 0 && props.defaultLocale === void 0 && !!parentValue;
+			return {
+				locale: inheritsLocale ? parentValue.locale : normalizeLocaleTag(props.locale ?? initialLocale.value),
+				resources: mergeMessageResources(parentValue?.resources, props.resources),
+				messageOverrides: mergeMessageResources(parentValue?.messageOverrides, props.messageOverrides),
+				fallbackLocales: props.fallbackLocales ?? parentValue?.fallbackLocales ?? [],
+				defaults: mergePlayerDefaults(parentValue?.defaults, props.defaults),
+				frameDefaults: mergeFrameDefaults(parentValue?.frameDefaults, props.frameDefaults),
+				changeLanguage(next) {
+					const normalized = normalizeLocaleTag(next);
+					if (inheritsLocale) return parentValue.changeLanguage(normalized);
+					if (props.locale !== void 0) {
+						if (!instance?.vnode.props?.["onUpdate:locale"]) return false;
+						emit("update:locale", normalized);
+						return true;
+					}
+					initialLocale.value = normalized;
+					emit("update:locale", normalized);
+					return true;
+				}
+			};
+		});
+		provide(key, context);
+		return () => slots.default?.() ?? [];
+	}
+});
+/** 播放器组件使用的可选上下文。 */
+function useOptionalPlayerConfig() {
+	return inject(key, null);
+}
+const LIVE_DEFAULTS = [
+	"muted",
+	"interactive",
+	"showErrorOverlay",
+	"showDefaultLoadingOverlay",
+	"showLoadingText",
+	"errorButtonColors"
+];
+/** Vue 组件在 setup 中调用；返回可供 watch 与模板追踪的 props 代理。 */
+function useResolvedPlayerProps(props, frame = false) {
+	const configProps = props;
+	const context = useOptionalPlayerConfig();
+	if (!context) return props;
+	const initialDefaults = context.value.defaults;
+	const initialFrameDefaults = context.value.frameDefaults;
+	let localeCache = null;
+	const effective = computed(() => {
+		const current = context.value;
+		const defaults = { ...initialDefaults };
+		for (const key of LIVE_DEFAULTS) defaults[key] = current.defaults[key];
+		const resolved = applyPlayerDefaults(configProps, defaults);
+		if (frame) {
+			for (const field of [
+				"origin",
+				"iframeVersion",
+				"debug"
+			]) if (resolved[field] === void 0) resolved[field] = initialFrameDefaults[field];
+		}
+		const localeKey = JSON.stringify([
+			configProps.locale,
+			current.locale,
+			current.resources,
+			current.messageOverrides,
+			current.fallbackLocales
+		]);
+		if (localeCache?.key !== localeKey) localeCache = {
+			key: localeKey,
+			value: applyProviderLocale(configProps.locale, current.locale, current.resources, current.messageOverrides, current.fallbackLocales)
+		};
+		resolved.locale = localeCache.value;
+		return resolved;
+	});
+	return new Proxy(props, { get(_target, property, receiver) {
+		return Reflect.get(effective.value, property, receiver);
+	} });
+}
+function usePlayerI18n() {
+	const context = inject(key, null);
+	if (!context) throw new Error("usePlayerI18n 必须在 PlayerProvider 内使用");
+	return {
+		locale: computed(() => context.value.locale),
+		t(key) {
+			const value = context.value;
+			return resolveLocaleMessages(applyProviderLocale(void 0, value.locale, value.resources, value.messageOverrides, value.fallbackLocales)).messages[key] ?? key;
+		},
+		changeLanguage: (next) => context.value.changeLanguage(next)
+	};
+}
+//#endregion
+export { PlayerProvider, useOptionalPlayerConfig, usePlayerI18n, useResolvedPlayerProps };
+
+//# sourceMappingURL=index.mjs.map

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@video-lab/vue-config",
+  "version": "4.0.0",
+  "license": "MIT",
+  "description": "Video Lab Player 的 Vue 全局配置与语言上下文",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@video-lab/protocol": "4.0.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "2.4.6",
+    "jsdom": "^24.0.0",
+    "tsdown": "^0.22.9",
+    "typescript": "~5.9.0",
+    "vitest": "^4.1.10",
+    "vue": "3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm,cjs --dts --clean",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json --noEmit"
+  }
+}