@class-kit/vue 0.1.0

package/dist/components/live-room.js

@@ -0,0 +1,642 @@
+import { defineComponent, ref, watch, h, inject, shallowRef, computed, onMounted, onBeforeUnmount } from 'vue';
+import { LiveRoomController, getClassComponentsLocale, configureClassComponents, VideoPlayerController, DanmakuController, ProgressController } from '@class-kit/core';
+
+const formSymbol = /*#__PURE__*/ Symbol("ClassComponentsForm");
+const formInteractivitySymbol = /*#__PURE__*/ Symbol("ClassComponentsFormInteractivity");
+function resolveClassKitThemeName(theme) {
+    if (typeof theme === "string")
+        return theme;
+    return theme?.name ?? "minimal";
+}
+defineComponent({
+    name: "ClassConfigProvider",
+    props: {
+        class: {
+            type: String,
+            default: "",
+        },
+        locale: {
+            type: Object,
+            default: undefined,
+        },
+        style: {
+            type: [String, Object, Array],
+            default: undefined,
+        },
+        theme: {
+            type: [String, Object],
+            default: "minimal",
+        },
+    },
+    setup(props, { slots }) {
+        const version = ref(0);
+        const applyConfig = () => {
+            configureClassComponents({
+                locale: props.locale,
+                theme: props.theme,
+            });
+            version.value += 1;
+        };
+        watch(() => [props.locale, props.theme], applyConfig, {
+            deep: true,
+            immediate: true,
+        });
+        return () => h("div", {
+            class: ["cc-config-provider", props.class].filter(Boolean),
+            "data-cc-theme": resolveClassKitThemeName(props.theme),
+            style: props.style,
+        }, [
+            h("div", { key: version.value, class: "cc-config-provider__content" }, slots.default?.()),
+        ]);
+    },
+});
+function optionalBooleanProp() {
+    return { type: Boolean, default: undefined };
+}
+function useFormInteractivity() {
+    return inject(formInteractivitySymbol, {
+        disabled: ref(false),
+        readOnly: ref(false),
+    });
+}
+function resolveFieldInteractivity(form, disabled, readOnly) {
+    const resolvedDisabled = disabled ?? form.disabled.value;
+    return {
+        disabled: resolvedDisabled,
+        readOnly: !resolvedDisabled && (readOnly ?? form.readOnly.value),
+    };
+}
+const ClassVideoPlayer = /*#__PURE__*/ defineComponent({
+    name: "ClassVideoPlayer",
+    inheritAttrs: false,
+    props: {
+        sources: {
+            type: [Array, String, Object],
+            required: true,
+        },
+        autoplay: { type: Boolean, default: false },
+        controls: { type: Boolean, default: true },
+        loop: { type: Boolean, default: false },
+        muted: { type: Boolean, default: false },
+        poster: String,
+        preload: {
+            type: String,
+            default: "metadata",
+        },
+        className: { type: String, default: "cc-video-player" },
+        videoClass: { type: String, default: "cc-video-player__video" },
+    },
+    setup(props, { attrs }) {
+        const videoRef = ref(null);
+        const currentTime = ref(0);
+        const duration = ref(0);
+        const playing = ref(false);
+        const toggle = () => {
+            const video = videoRef.value;
+            if (!video)
+                return;
+            if (video.paused)
+                void video.play();
+            else
+                video.pause();
+        };
+        return () => {
+            const state = new VideoPlayerController({
+                autoplay: props.autoplay,
+                controls: props.controls,
+                loop: props.loop,
+                muted: props.muted,
+                poster: props.poster,
+                preload: props.preload,
+                sources: props.sources,
+            }).getState();
+            return h("div", { class: props.className }, [
+                h("video", {
+                    ...attrs,
+                    autoplay: state.autoplay,
+                    class: props.videoClass,
+                    controls: false,
+                    loop: state.loop,
+                    muted: state.muted,
+                    ref: videoRef,
+                    onDurationchange: (event) => {
+                        duration.value =
+                            event.currentTarget.duration || 0;
+                    },
+                    onPause: () => {
+                        playing.value = false;
+                    },
+                    onPlay: () => {
+                        playing.value = true;
+                    },
+                    onTimeupdate: (event) => {
+                        currentTime.value = event.currentTarget.currentTime;
+                    },
+                    playsinline: true,
+                    poster: state.poster,
+                    preload: state.preload,
+                }, state.sources.map((source) => h("source", {
+                    key: source.src,
+                    src: source.src,
+                    type: source.type,
+                }))),
+                state.controls
+                    ? h("div", { class: "cc-video-player__controls" }, [
+                        h("button", {
+                            "aria-label": playing.value ? "Pause video" : "Play video",
+                            class: "cc-video-player__play",
+                            "data-playing": playing.value,
+                            type: "button",
+                            onClick: toggle,
+                        }, [
+                            h("span", {
+                                "aria-hidden": "true",
+                                class: "cc-video-player__play-icon",
+                            }),
+                        ]),
+                        h(ClassProgressBar, {
+                            className: "cc-progress cc-video-player__progress",
+                            max: duration.value || 0,
+                            min: 0,
+                            step: 0.1,
+                            value: currentTime.value,
+                            onChange: (next) => {
+                                if (!videoRef.value || !Number.isFinite(next))
+                                    return;
+                                videoRef.value.currentTime = next;
+                                currentTime.value = next;
+                            },
+                        }),
+                        h("span", { class: "cc-video-player__time" }, `${Math.floor(currentTime.value)} / ${Math.floor(duration.value || 0)}s`),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+const ClassProgressBar = /*#__PURE__*/ defineComponent({
+    name: "ClassProgressBar",
+    inheritAttrs: false,
+    props: {
+        defaultValue: Number,
+        disabled: optionalBooleanProp(),
+        errorClass: String,
+        fieldClass: { type: String, default: "cc-field cc-progress-field" },
+        followPointer: { type: Boolean, default: true },
+        initialValue: Number,
+        interactive: { type: Boolean, default: true },
+        label: [String, Object],
+        labelClass: { type: String, default: "cc-field__label" },
+        max: { type: Number, default: 100 },
+        min: { type: Number, default: 0 },
+        name: String,
+        readOnly: optionalBooleanProp(),
+        readonly: optionalBooleanProp(),
+        rules: Array,
+        step: { type: Number, default: 1 },
+        validateOn: Array,
+        value: Number,
+        className: { type: String, default: "cc-progress" },
+    },
+    emits: ["change", "changeEnd", "update:value"],
+    setup(props, { attrs, emit }) {
+        const form = inject(formSymbol, null);
+        const formInteractivity = useFormInteractivity();
+        const formState = shallowRef(form?.getState() ?? null);
+        const trackRef = ref(null);
+        const thumbRef = ref(null);
+        const dragging = ref(false);
+        const safeMin = computed(() => Number.isFinite(props.min) ? props.min : 0);
+        const safeMax = computed(() => Number.isFinite(props.max)
+            ? Math.max(safeMin.value, props.max)
+            : Math.max(safeMin.value, 100));
+        const safeStep = computed(() => Number.isFinite(props.step) && props.step > 0 ? props.step : 1);
+        const formField = computed(() => props.name ? formState.value?.fields[props.name] : undefined);
+        const formFieldValue = computed(() => Number(formField.value?.value));
+        const usesFormField = computed(() => Boolean(form && props.name));
+        const safeValue = computed(() => usesFormField.value && Number.isFinite(formFieldValue.value)
+            ? formFieldValue.value
+            : Number.isFinite(props.value)
+                ? props.value
+                : undefined);
+        const safeDefaultValue = computed(() => Number.isFinite(props.defaultValue) ? props.defaultValue : undefined);
+        const fieldInitialValue = computed(() => Number.isFinite(props.initialValue)
+            ? props.initialValue
+            : safeDefaultValue.value);
+        const interactivity = computed(() => resolveFieldInteractivity(formInteractivity, props.disabled, props.readOnly ?? props.readonly));
+        const locked = computed(() => interactivity.value.disabled || interactivity.value.readOnly);
+        const controller = new ProgressController({
+            disabled: locked.value,
+            max: safeMax.value,
+            min: safeMin.value,
+            step: safeStep.value,
+            value: safeValue.value ?? fieldInitialValue.value ?? safeMin.value,
+        });
+        const state = ref(controller.getState());
+        let unsubscribeField;
+        let unsubscribeForm;
+        onMounted(() => {
+            if (!form || !props.name)
+                return;
+            unsubscribeForm = form.subscribe((nextState) => {
+                formState.value = nextState;
+            });
+            unsubscribeField = form.registerField(props.name, {
+                initialValue: fieldInitialValue.value ?? safeMin.value,
+                rules: props.rules,
+                validateOn: props.validateOn,
+            });
+        });
+        onBeforeUnmount(() => {
+            unsubscribeField?.();
+            unsubscribeForm?.();
+        });
+        watch(() => [
+            locked.value,
+            props.max,
+            props.min,
+            props.step,
+            props.value,
+            formFieldValue.value,
+        ], () => {
+            state.value = controller.updateOptions({
+                disabled: locked.value,
+                max: safeMax.value,
+                min: safeMin.value,
+                step: safeStep.value,
+                value: safeValue.value ?? state.value.value,
+            });
+        });
+        const commitValue = (nextValue, end = false) => {
+            state.value = controller.setValue(nextValue);
+            if (form && props.name)
+                void form.setValue(props.name, state.value.value);
+            emit("update:value", state.value.value);
+            emit("change", state.value.value);
+            if (end)
+                emit("changeEnd", state.value.value);
+        };
+        const updateFromClientX = (clientX, end = false) => {
+            const rect = trackRef.value?.getBoundingClientRect();
+            if (!rect)
+                return;
+            state.value = controller.valueFromClientX(clientX, rect, thumbRef.value?.offsetWidth ?? 0);
+            if (form && props.name)
+                void form.setValue(props.name, state.value.value);
+            emit("update:value", state.value.value);
+            emit("change", state.value.value);
+            if (end)
+                emit("changeEnd", state.value.value);
+        };
+        return () => {
+            const errors = formField.value?.errors ?? [];
+            const errorId = props.name ? `${props.name}-error` : undefined;
+            const progress = h("div", {
+                ...attrs,
+                "aria-describedby": errors.length > 0 ? errorId : undefined,
+                "aria-disabled": interactivity.value.disabled,
+                "aria-readonly": interactivity.value.readOnly || undefined,
+                "aria-valuemax": state.value.max,
+                "aria-valuemin": state.value.min,
+                "aria-valuenow": state.value.value,
+                class: props.className,
+                "data-disabled": interactivity.value.disabled,
+                "data-dragging": dragging.value,
+                "data-interactive": props.interactive && !locked.value,
+                "data-readonly": interactivity.value.readOnly,
+                ref: trackRef,
+                role: "slider",
+                tabindex: locked.value || !props.interactive ? -1 : 0,
+                onKeydown: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+                        commitValue(state.value.value - state.value.step);
+                    if (event.key === "ArrowRight" || event.key === "ArrowUp")
+                        commitValue(state.value.value + state.value.step);
+                    if (event.key === "Home")
+                        commitValue(state.value.min);
+                    if (event.key === "End")
+                        commitValue(state.value.max);
+                },
+                onPointerdown: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    event.preventDefault();
+                    dragging.value = true;
+                    updateFromClientX(event.clientX);
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                },
+                onPointermove: (event) => {
+                    if (!props.interactive ||
+                        !props.followPointer ||
+                        locked.value ||
+                        event.buttons !== 1)
+                        return;
+                    updateFromClientX(event.clientX);
+                },
+                onPointerup: (event) => {
+                    if (locked.value || !props.interactive)
+                        return;
+                    dragging.value = false;
+                    event.currentTarget.releasePointerCapture?.(event.pointerId);
+                    updateFromClientX(event.clientX, true);
+                },
+                onPointercancel: () => {
+                    dragging.value = false;
+                },
+            }, [
+                h("span", { class: "cc-progress__track" }),
+                h("span", {
+                    class: "cc-progress__fill",
+                    style: { width: `${state.value.percent}%` },
+                }),
+                h("span", {
+                    class: "cc-progress__thumb",
+                    ref: thumbRef,
+                    style: {
+                        left: `calc(${state.value.percent / 100} * (100% - var(--cc-progress-thumb-size)))`,
+                    },
+                }),
+            ]);
+            if (!props.name && !props.label)
+                return progress;
+            return h("div", {
+                class: props.fieldClass,
+                "data-disabled": interactivity.value.disabled,
+                "data-readonly": interactivity.value.readOnly,
+            }, [
+                props.label
+                    ? h("span", { class: props.labelClass }, props.label)
+                    : null,
+                progress,
+                errorId && errors.length > 0
+                    ? h("div", { class: props.errorClass ?? "cc-field__error", id: errorId }, errors.join("，"))
+                    : null,
+            ]);
+        };
+    },
+});
+const ClassDanmaku = /*#__PURE__*/ defineComponent({
+    name: "ClassDanmaku",
+    props: {
+        items: { type: Array, required: true },
+        color: { type: String, default: "#ffffff" },
+        defaultDuration: Number,
+        enabled: { type: Boolean, default: true },
+        maxTracks: { type: Number, default: 6 },
+        speed: Number,
+        className: { type: String, default: "cc-danmaku" },
+    },
+    setup(props, { attrs, slots }) {
+        return () => {
+            const state = new DanmakuController(props.items, {
+                color: props.color,
+                defaultDuration: props.defaultDuration,
+                enabled: props.enabled,
+                maxTracks: props.maxTracks,
+                speed: props.speed,
+            }).getState();
+            const rootClassName = props.className === "cc-danmaku"
+                ? "cc-danmaku"
+                : `cc-danmaku ${props.className}`;
+            const inheritedStyle = attrs.style;
+            return h("div", {
+                ...attrs,
+                class: rootClassName,
+                "data-enabled": state.enabled,
+                style: [
+                    inheritedStyle,
+                    {
+                        "--cc-danmaku-color": props.color,
+                        "--cc-danmaku-track-count": state.maxTracks,
+                    },
+                ],
+            }, state.items.map((item) => h("div", {
+                key: item.id,
+                class: "cc-danmaku__item",
+                style: {
+                    "--cc-danmaku-color": item.color,
+                    "--cc-danmaku-duration": `${item.duration}ms`,
+                    "--cc-danmaku-track": item.track,
+                },
+            }, slots.default
+                ? slots.default({ item })
+                : item.type === "image" && item.imageSrc
+                    ? [
+                        h("img", {
+                            alt: item.imageAlt ?? item.content,
+                            src: item.imageSrc,
+                        }),
+                        item.content ? h("span", null, item.content) : null,
+                    ]
+                    : item.type === "icon"
+                        ? [
+                            h("span", { "aria-hidden": "true", class: "cc-danmaku__icon" }, item.icon ?? item.content),
+                        ]
+                        : [h("span", null, item.content)])));
+        };
+    },
+});
+function liveRoomIcon(name) {
+    const pathAttrs = {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+    };
+    const paths = {
+        gift: [
+            h("path", { ...pathAttrs, d: "M20 12v10H4V12" }),
+            h("path", { ...pathAttrs, d: "M2 7h20v5H2z" }),
+            h("path", { ...pathAttrs, d: "M12 22V7" }),
+            h("path", { ...pathAttrs, d: "M12 7H7.5a2.5 2.5 0 1 1 2.1-3.86L12 7Z" }),
+            h("path", { ...pathAttrs, d: "M12 7h4.5a2.5 2.5 0 1 0-2.1-3.86L12 7Z" }),
+        ],
+        heart: [
+            h("path", {
+                ...pathAttrs,
+                d: "M20.8 5.8a5.1 5.1 0 0 0-7.2 0L12 7.4l-1.6-1.6a5.1 5.1 0 0 0-7.2 7.2L12 21l8.8-8a5.1 5.1 0 0 0 0-7.2Z",
+            }),
+        ],
+        more: [
+            h("path", { ...pathAttrs, d: "M5 12h.01" }),
+            h("path", { ...pathAttrs, d: "M12 12h.01" }),
+            h("path", { ...pathAttrs, d: "M19 12h.01" }),
+        ],
+        send: [
+            h("path", { ...pathAttrs, d: "m22 2-7 20-4-9-9-4 20-7Z" }),
+            h("path", { ...pathAttrs, d: "M22 2 11 13" }),
+        ],
+        share: [
+            h("path", {
+                ...pathAttrs,
+                d: "M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7",
+            }),
+            h("path", { ...pathAttrs, d: "m16 6-4-4-4 4" }),
+            h("path", { ...pathAttrs, d: "M12 2v14" }),
+        ],
+        star: [
+            h("path", {
+                ...pathAttrs,
+                d: "m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2l-5-4.9 6.9-1L12 2Z",
+            }),
+        ],
+    };
+    return h("svg", {
+        "aria-hidden": "true",
+        class: "cc-live-room__icon",
+        fill: "none",
+        focusable: "false",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+    }, paths[name]);
+}
+const ClassLiveRoom = /*#__PURE__*/ defineComponent({
+    name: "ClassLiveRoom",
+    props: {
+        sources: {
+            type: [Array, String, Object],
+            required: true,
+        },
+        host: { type: Object, required: true },
+        chats: { type: Array, default: () => [] },
+        danmaku: { type: Array, default: () => [] },
+        danmakuColor: { type: String, default: "#ffffff" },
+        danmakuDefaultDuration: Number,
+        danmakuEnabled: { type: Boolean, default: true },
+        danmakuMaxTracks: { type: Number, default: 6 },
+        danmakuSpeed: Number,
+        likeCount: { type: Number, default: 0 },
+        className: { type: String, default: "cc-live-room" },
+    },
+    emits: ["sendChat"],
+    setup(props, { emit, attrs }) {
+        const message = ref("");
+        const state = ref(new LiveRoomController({
+            chats: props.chats,
+            danmaku: props.danmaku,
+            host: props.host,
+            likeCount: props.likeCount,
+        }).getState());
+        watch(() => [props.chats, props.danmaku, props.host, props.likeCount], () => {
+            state.value = new LiveRoomController({
+                chats: props.chats,
+                danmaku: props.danmaku,
+                favorited: state.value.favorited,
+                host: props.host,
+                liked: state.value.liked,
+                likeCount: props.likeCount,
+            }).getState();
+        });
+        const send = () => {
+            const text = message.value.trim();
+            if (!text)
+                return;
+            emit("sendChat", text);
+            state.value = {
+                ...state.value,
+                chats: [
+                    ...state.value.chats,
+                    {
+                        id: `chat-${Date.now()}`,
+                        text,
+                        user: getClassComponentsLocale().liveRoomSelfName,
+                    },
+                ],
+                danmaku: [
+                    ...state.value.danmaku,
+                    { id: `dm-${Date.now()}`, content: text },
+                ],
+            };
+            message.value = "";
+        };
+        return () => h("div", { ...attrs, class: props.className }, [
+            h(ClassVideoPlayer, {
+                sources: props.sources,
+                controls: false,
+                muted: true,
+                className: "cc-live-room__player",
+                videoClass: "cc-live-room__video",
+            }),
+            h(ClassDanmaku, {
+                color: props.danmakuColor,
+                defaultDuration: props.danmakuDefaultDuration,
+                enabled: props.danmakuEnabled,
+                items: state.value.danmaku,
+                maxTracks: props.danmakuMaxTracks,
+                speed: props.danmakuSpeed,
+                className: "cc-live-room__danmaku",
+            }),
+            h("div", { class: "cc-live-room__host" }, [
+                props.host.avatar
+                    ? h("img", { alt: "", src: props.host.avatar })
+                    : h("span", null, props.host.name.slice(0, 1)),
+                h("strong", null, props.host.name),
+            ]),
+            h("div", { class: "cc-live-room__icons" }, [
+                h("button", {
+                    "aria-label": getClassComponentsLocale().liveRoomShareLabel,
+                    title: getClassComponentsLocale().liveRoomShareLabel,
+                    type: "button",
+                }, [liveRoomIcon("share")]),
+                h("button", {
+                    "aria-label": getClassComponentsLocale().liveRoomMoreLabel,
+                    title: getClassComponentsLocale().liveRoomMoreLabel,
+                    type: "button",
+                }, [liveRoomIcon("more")]),
+            ]),
+            h("div", { class: "cc-live-room__actions" }, [
+                h("button", {
+                    "aria-label": getClassComponentsLocale().liveRoomLikeLabel,
+                    title: getClassComponentsLocale().liveRoomLikeLabel,
+                    type: "button",
+                    "data-active": state.value.liked,
+                    onClick: () => {
+                        state.value = new LiveRoomController(state.value).toggleLike();
+                    },
+                }, [liveRoomIcon("heart"), h("small", null, state.value.likeCount)]),
+                h("button", {
+                    "aria-label": getClassComponentsLocale().liveRoomFavoriteLabel,
+                    title: getClassComponentsLocale().liveRoomFavoriteLabel,
+                    type: "button",
+                    "data-active": state.value.favorited,
+                    onClick: () => {
+                        state.value = new LiveRoomController(state.value).toggleFavorite();
+                    },
+                }, [liveRoomIcon("star")]),
+                h("button", {
+                    "aria-label": getClassComponentsLocale().liveRoomGiftLabel,
+                    title: getClassComponentsLocale().liveRoomGiftLabel,
+                    type: "button",
+                }, [liveRoomIcon("gift")]),
+            ]),
+            h("div", { class: "cc-live-room__chat" }, [
+                h("div", { class: "cc-live-room__messages" }, state.value.chats
+                    .slice(-6)
+                    .map((item) => h("p", { key: item.id }, [h("b", null, item.user), item.text]))),
+                h("div", { class: "cc-live-room__input" }, [
+                    h("input", {
+                        value: message.value,
+                        placeholder: getClassComponentsLocale().liveRoomInputPlaceholder,
+                        onInput: (event) => {
+                            message.value = event.target.value;
+                        },
+                        onKeydown: (event) => {
+                            if (event.key === "Enter")
+                                send();
+                        },
+                    }),
+                    h("button", {
+                        "aria-label": getClassComponentsLocale().liveRoomSendLabel,
+                        title: getClassComponentsLocale().liveRoomSendLabel,
+                        type: "button",
+                        onClick: send,
+                    }, [liveRoomIcon("send")]),
+                ]),
+            ]),
+        ]);
+    },
+});
+
+export { ClassLiveRoom };
+//# sourceMappingURL=live-room.js.map