@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.4
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/es/Accordion/style.d.mts +2 -2
- package/es/AutoComplete/style.d.mts +1 -1
- package/es/Video/context.mjs.map +1 -1
- package/es/Video/parts/Caption.mjs +4 -1
- package/es/Video/parts/Caption.mjs.map +1 -1
- package/es/Video/parts/Controls.mjs +6 -1
- package/es/Video/parts/Controls.mjs.map +1 -1
- package/es/Video/parts/Frame.mjs +9 -2
- package/es/Video/parts/Frame.mjs.map +1 -1
- package/package.json +1 -1
package/es/Accordion/style.d.mts
CHANGED
|
@@ -2,13 +2,13 @@ import "@stylexjs/stylex";
|
|
|
2
2
|
//#region src/Accordion/style.d.ts
|
|
3
3
|
export declare const accordionStyles: {
|
|
4
4
|
panel: string;
|
|
5
|
+
header: string;
|
|
5
6
|
action: string;
|
|
6
7
|
content: string;
|
|
7
8
|
trigger: string;
|
|
8
|
-
|
|
9
|
+
item: string;
|
|
9
10
|
root: string;
|
|
10
11
|
indicator: string;
|
|
11
|
-
item: string;
|
|
12
12
|
itemOutlined: string;
|
|
13
13
|
rootOutlined: string;
|
|
14
14
|
actionAlwaysVisible: string;
|
|
@@ -42,7 +42,7 @@ declare const styleArrays: {
|
|
|
42
42
|
}> | Readonly<{
|
|
43
43
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
44
44
|
readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
|
|
45
|
-
readonly display: stylex.StyleXClassNameFor<"display", "
|
|
45
|
+
readonly display: stylex.StyleXClassNameFor<"display", "none" | "flex">;
|
|
46
46
|
}>)[];
|
|
47
47
|
item: Readonly<{
|
|
48
48
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
package/es/Video/context.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n fps: number;\n markers: VideoMarker[];\n onMarkerClick?: (marker: VideoMarker) => void;\n onRetry?: () => Promise<unknown> | void;\n playbackRates?: number[];\n sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n config: VideoConfig;\n media: VideoMediaProps;\n store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n const value = use(VideoContext);\n if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n return value;\n};\n\nexport interface FrameContextValue {\n hold: (held: boolean) => void;\n visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;
|
|
1
|
+
{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n fps: number;\n markers: VideoMarker[];\n onMarkerClick?: (marker: VideoMarker) => void;\n onRetry?: () => Promise<unknown> | void;\n playbackRates?: number[];\n sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n config: VideoConfig;\n media: VideoMediaProps;\n store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n const value = use(VideoContext);\n if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n return value;\n};\n\nexport interface FrameContextValue {\n hold: (held: boolean) => void;\n overlay: boolean;\n setOverlay: (overlay: boolean) => void;\n visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}
|
|
@@ -10,8 +10,11 @@ const Caption = ({ action, className, style }) => {
|
|
|
10
10
|
const frame = use(FrameContext);
|
|
11
11
|
const markers = useVideo((state) => state.captions ? state.activeMarkers : void 0);
|
|
12
12
|
if (!markers || markers.length === 0) return null;
|
|
13
|
+
const raised = Boolean(frame?.overlay && frame.visible);
|
|
13
14
|
return /* @__PURE__ */ jsx("div", {
|
|
14
|
-
|
|
15
|
+
"data-raised": String(raised),
|
|
16
|
+
"data-video-caption": "",
|
|
17
|
+
...styleProps([styles.caption, raised && styles.captionRaised], className, style),
|
|
15
18
|
onClick: (event) => event.stopPropagation(),
|
|
16
19
|
onPointerDown: (event) => event.stopPropagation(),
|
|
17
20
|
children: markers.map((marker, index) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n const frame = use(FrameContext);\n const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n if (!markers || markers.length === 0) return null;\n\n return (\n <div\n {...styleProps([styles.caption,
|
|
1
|
+
{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n const frame = use(FrameContext);\n const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n if (!markers || markers.length === 0) return null;\n const raised = Boolean(frame?.overlay && frame.visible);\n\n return (\n <div\n data-raised={String(raised)}\n data-video-caption=\"\"\n {...styleProps([styles.caption, raised && styles.captionRaised], className, style)}\n onClick={(event) => event.stopPropagation()}\n onPointerDown={(event) => event.stopPropagation()}\n >\n {markers.map((marker, index) => (\n <div key={marker.key ?? `${marker.time}-${index}`} {...styleProps(styles.captionItem)}>\n {(marker.label !== undefined || action) && (\n <div {...styleProps(styles.captionTitle)}>\n <span\n {...styleProps(styles.dot, undefined, { background: markerColor(marker.color) })}\n />\n {marker.label}\n {action?.(marker)}\n </div>\n )}\n <div>{marker.content}</div>\n </div>\n ))}\n </div>\n );\n};\n\nCaption.displayName = 'VideoCaption';\n\nexport default Caption;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,EAAE,QAAQ,WAAW,YAA+B;CACnE,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,UAAU,UAAU,UAAW,MAAM,WAAW,MAAM,gBAAgB,KAAA,CAAU;CACtF,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAC7C,MAAM,SAAS,QAAQ,OAAO,WAAW,MAAM,OAAO;CAEtD,OACE,oBAAC,OAAD;EACE,eAAa,OAAO,MAAM;EAC1B,sBAAmB;EACnB,GAAI,WAAW,CAAC,OAAO,SAAS,UAAU,OAAO,aAAa,GAAG,WAAW,KAAK;EACjF,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAE/C,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,OAAD;GAAmD,GAAI,WAAW,OAAO,WAAW;GAApF,UAAA,EACI,OAAO,UAAU,KAAA,KAAa,WAC9B,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA;KACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW,EAAE,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC,EAChF,CAAA;KACA,OAAO;KACP,SAAS,MAAM;IACb;GAEP,CAAA,GAAA,oBAAC,OAAD,EAAA,UAAM,OAAO,QAAa,CAAA,CACvB;EAXK,GAAA,OAAO,OAAO,GAAG,OAAO,KAAK,GAAG,OAWrC,CACN;CACE,CAAA;AAET;AAEA,QAAQ,cAAc"}
|
|
@@ -11,7 +11,7 @@ import PlayPauseIcon from "./PlayPauseIcon.mjs";
|
|
|
11
11
|
import RateMenu from "./RateMenu.mjs";
|
|
12
12
|
import SectionMenu from "./SectionMenu.mjs";
|
|
13
13
|
import Timeline from "./Timeline.mjs";
|
|
14
|
-
import { use } from "react";
|
|
14
|
+
import { use, useLayoutEffect } from "react";
|
|
15
15
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
16
16
|
import { Captions, ChevronLeft, ChevronRight, Maximize, Minimize, Volume2, VolumeX } from "lucide-react";
|
|
17
17
|
//#region src/Video/parts/Controls.tsx
|
|
@@ -51,6 +51,11 @@ const Controls = ({ children, className, extra, frameStep, style }) => {
|
|
|
51
51
|
const ready = useVideo((state) => state.status === "ready");
|
|
52
52
|
const fullscreen = useFullscreen(store);
|
|
53
53
|
const overlay = frame !== null;
|
|
54
|
+
useLayoutEffect(() => {
|
|
55
|
+
if (!frame) return;
|
|
56
|
+
frame.setOverlay(true);
|
|
57
|
+
return () => frame.setOverlay(false);
|
|
58
|
+
}, [frame?.setOverlay]);
|
|
54
59
|
const visible = !overlay || frame.visible;
|
|
55
60
|
const hasCaptions = config.markers.some((marker) => marker.content !== void 0 && marker.content !== null);
|
|
56
61
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n Captions,\n ChevronLeft,\n ChevronRight,\n Maximize,\n Minimize,\n Volume2,\n VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use } from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n active,\n children,\n label,\n onClick,\n pressed,\n shortcut,\n}: {\n active?: boolean;\n children: ReactNode;\n label: string;\n onClick: () => void;\n pressed?: boolean;\n shortcut?: string;\n}) => (\n <button\n aria-label={label}\n aria-pressed={pressed}\n title={shortcut ? `${label} (${shortcut})` : label}\n type=\"button\"\n {...styleProps([styles.barButton, active && styles.barButtonActive])}\n onClick={onClick}\n >\n {children}\n </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n const seconds = useVideo((state) => Math.floor(state.time));\n const duration = useVideo((state) => state.duration);\n return (\n <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n {`${formatTime(seconds)} / ${formatTime(duration)}`}\n </span>\n );\n};\n\nconst FrameReadout = () => {\n const { config } = useVideoContext();\n const { t } = useTranslation(videoMessages);\n const frame = useVideo((state) => frameOf(state.time, config.fps));\n return (\n <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n {`${t('video.frame')} ${frame}`}\n </span>\n );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n const { config, store } = useVideoContext();\n const frame = use(FrameContext);\n const { t } = useTranslation(videoMessages);\n const paused = useVideo((state) => state.paused);\n const muted = useVideo((state) => state.muted);\n const captions = useVideo((state) => state.captions);\n const ready = useVideo((state) => state.status === 'ready');\n const fullscreen = useFullscreen(store);\n const overlay = frame !== null;\n const visible = !overlay || frame.visible;\n const hasCaptions = config.markers.some(\n (marker) => marker.content !== undefined && marker.content !== null,\n );\n\n return (\n <div\n data-video-controls=\"\"\n data-visible={String(visible)}\n {...styleProps(\n [\n styles.controls,\n overlay ? styles.controlsOverlay : styles.controlsBelow,\n overlay && !visible && styles.controlsHidden,\n ],\n className,\n style,\n )}\n onClick={(event) => event.stopPropagation()}\n onDoubleClick={(event) => event.stopPropagation()}\n >\n <div {...styleProps(!ready && styles.disabled)}>\n {children ?? <Timeline />}\n <div {...styleProps(styles.row)}>\n <BarButton\n label={paused ? t('video.play') : t('video.pause')}\n shortcut=\"K\"\n onClick={store.toggle}\n >\n <PlayPauseIcon paused={paused} />\n </BarButton>\n <BarButton\n label={muted ? t('video.unmute') : t('video.mute')}\n shortcut=\"M\"\n onClick={store.toggleMute}\n >\n {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n </BarButton>\n {frameStep && (\n <>\n <BarButton\n label={t('video.previousFrame')}\n shortcut=\",\"\n onClick={() => store.step(-1)}\n >\n <ChevronLeft size={16} />\n </BarButton>\n <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n <ChevronRight size={16} />\n </BarButton>\n </>\n )}\n <TimeReadout />\n {frameStep && <FrameReadout />}\n <SectionMenu />\n <div {...styleProps(styles.spacer)} />\n {extra}\n {hasCaptions && (\n <BarButton\n active={captions}\n label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n pressed={captions}\n shortcut=\"C\"\n onClick={() => store.setCaptions(!captions)}\n >\n <Captions size={16} />\n </BarButton>\n )}\n <RateMenu />\n <BarButton\n label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n shortcut=\"F\"\n onClick={store.toggleFullscreen}\n >\n {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n </BarButton>\n </div>\n </div>\n </div>\n );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAa,EACjB,QACA,UACA,OACA,SACA,SACA,eASA,oBAAC,UAAD;CACE,cAAY;CACZ,gBAAc;CACd,OAAO,WAAW,GAAG,MAAM,IAAI,SAAS,KAAK;CAC7C,MAAK;CACL,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,eAAe,CAAC;CAC1D;CAER;AACK,CAAA;AAIV,MAAM,oBAAoB;CACxB,MAAM,UAAU,UAAU,UAAU,KAAK,MAAM,MAAM,IAAI,CAAC;CAC1D,MAAM,WAAW,UAAU,UAAU,MAAM,QAAQ;CACnD,OACE,oBAAC,QAAD;EAAM,GAAI,WAAW,OAAO,MAAM,KAAA,GAAW,EAAE,cAAc,EAAE,CAAC;EAC7D,UAAA,GAAG,WAAW,OAAO,EAAE,KAAK,WAAW,QAAQ;CAC5C,CAAA;AAEV;AAEA,MAAM,qBAAqB;CACzB,MAAM,EAAE,WAAW,gBAAgB;CACnC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,QAAQ,UAAU,UAAU,QAAQ,MAAM,MAAM,OAAO,GAAG,CAAC;CACjE,OACE,oBAAC,QAAD;EAAM,GAAI,WAAW,OAAO,SAAS,KAAA,GAAW,EAAE,iBAAiB,EAAE,CAAC;EACnE,UAAA,GAAG,EAAE,aAAa,EAAE,GAAG;CACpB,CAAA;AAEV;AAEA,MAAM,YAAY,EAAE,UAAU,WAAW,OAAO,WAAW,YAAgC;CACzF,MAAM,EAAE,QAAQ,UAAU,gBAAgB;CAC1C,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,SAAS,UAAU,UAAU,MAAM,MAAM;CAC/C,MAAM,QAAQ,UAAU,UAAU,MAAM,KAAK;CAC7C,MAAM,WAAW,UAAU,UAAU,MAAM,QAAQ;CACnD,MAAM,QAAQ,UAAU,UAAU,MAAM,WAAW,OAAO;CAC1D,MAAM,aAAa,cAAc,KAAK;CACtC,MAAM,UAAU,UAAU;
|
|
1
|
+
{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n Captions,\n ChevronLeft,\n ChevronRight,\n Maximize,\n Minimize,\n Volume2,\n VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use, useLayoutEffect } from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n active,\n children,\n label,\n onClick,\n pressed,\n shortcut,\n}: {\n active?: boolean;\n children: ReactNode;\n label: string;\n onClick: () => void;\n pressed?: boolean;\n shortcut?: string;\n}) => (\n <button\n aria-label={label}\n aria-pressed={pressed}\n title={shortcut ? `${label} (${shortcut})` : label}\n type=\"button\"\n {...styleProps([styles.barButton, active && styles.barButtonActive])}\n onClick={onClick}\n >\n {children}\n </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n const seconds = useVideo((state) => Math.floor(state.time));\n const duration = useVideo((state) => state.duration);\n return (\n <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n {`${formatTime(seconds)} / ${formatTime(duration)}`}\n </span>\n );\n};\n\nconst FrameReadout = () => {\n const { config } = useVideoContext();\n const { t } = useTranslation(videoMessages);\n const frame = useVideo((state) => frameOf(state.time, config.fps));\n return (\n <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n {`${t('video.frame')} ${frame}`}\n </span>\n );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n const { config, store } = useVideoContext();\n const frame = use(FrameContext);\n const { t } = useTranslation(videoMessages);\n const paused = useVideo((state) => state.paused);\n const muted = useVideo((state) => state.muted);\n const captions = useVideo((state) => state.captions);\n const ready = useVideo((state) => state.status === 'ready');\n const fullscreen = useFullscreen(store);\n const overlay = frame !== null;\n\n useLayoutEffect(() => {\n if (!frame) return;\n frame.setOverlay(true);\n return () => frame.setOverlay(false);\n }, [frame?.setOverlay]);\n const visible = !overlay || frame.visible;\n const hasCaptions = config.markers.some(\n (marker) => marker.content !== undefined && marker.content !== null,\n );\n\n return (\n <div\n data-video-controls=\"\"\n data-visible={String(visible)}\n {...styleProps(\n [\n styles.controls,\n overlay ? styles.controlsOverlay : styles.controlsBelow,\n overlay && !visible && styles.controlsHidden,\n ],\n className,\n style,\n )}\n onClick={(event) => event.stopPropagation()}\n onDoubleClick={(event) => event.stopPropagation()}\n >\n <div {...styleProps(!ready && styles.disabled)}>\n {children ?? <Timeline />}\n <div {...styleProps(styles.row)}>\n <BarButton\n label={paused ? t('video.play') : t('video.pause')}\n shortcut=\"K\"\n onClick={store.toggle}\n >\n <PlayPauseIcon paused={paused} />\n </BarButton>\n <BarButton\n label={muted ? t('video.unmute') : t('video.mute')}\n shortcut=\"M\"\n onClick={store.toggleMute}\n >\n {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n </BarButton>\n {frameStep && (\n <>\n <BarButton\n label={t('video.previousFrame')}\n shortcut=\",\"\n onClick={() => store.step(-1)}\n >\n <ChevronLeft size={16} />\n </BarButton>\n <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n <ChevronRight size={16} />\n </BarButton>\n </>\n )}\n <TimeReadout />\n {frameStep && <FrameReadout />}\n <SectionMenu />\n <div {...styleProps(styles.spacer)} />\n {extra}\n {hasCaptions && (\n <BarButton\n active={captions}\n label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n pressed={captions}\n shortcut=\"C\"\n onClick={() => store.setCaptions(!captions)}\n >\n <Captions size={16} />\n </BarButton>\n )}\n <RateMenu />\n <BarButton\n label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n shortcut=\"F\"\n onClick={store.toggleFullscreen}\n >\n {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n </BarButton>\n </div>\n </div>\n </div>\n );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":"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"}
|
package/es/Video/parts/Frame.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import { FrameContext, useVideoContext } from "../context.mjs";
|
|
|
4
4
|
import { styles } from "../style.mjs";
|
|
5
5
|
import { useVideo } from "../useVideo.mjs";
|
|
6
6
|
import { useControlsIdle } from "../useControlsIdle.mjs";
|
|
7
|
-
import { useEffect, useMemo, useRef } from "react";
|
|
7
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
//#region src/Video/parts/Frame.tsx
|
|
10
10
|
const isFocusVisible = (element) => {
|
|
@@ -21,6 +21,7 @@ const Frame = ({ children, className, style }) => {
|
|
|
21
21
|
const size = useVideo((state) => state.size);
|
|
22
22
|
const idleForced = useVideo((state) => state.paused || state.status !== "ready");
|
|
23
23
|
const idle = useControlsIdle(idleForced);
|
|
24
|
+
const [overlay, setOverlay] = useState(false);
|
|
24
25
|
useEffect(() => {
|
|
25
26
|
const video = videoRef.current;
|
|
26
27
|
if (!video) return;
|
|
@@ -28,8 +29,14 @@ const Frame = ({ children, className, style }) => {
|
|
|
28
29
|
}, [store, media.src]);
|
|
29
30
|
const frame = useMemo(() => ({
|
|
30
31
|
hold: idle.hold,
|
|
32
|
+
overlay,
|
|
33
|
+
setOverlay,
|
|
31
34
|
visible: idle.visible
|
|
32
|
-
}), [
|
|
35
|
+
}), [
|
|
36
|
+
idle.hold,
|
|
37
|
+
idle.visible,
|
|
38
|
+
overlay
|
|
39
|
+
]);
|
|
33
40
|
const aspectRatio = size?.height ? `${size.width} / ${size.height}` : "16 / 9";
|
|
34
41
|
return /* @__PURE__ */ jsx(FrameContext, {
|
|
35
42
|
value: frame,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n try {\n return element.matches(':focus-visible');\n } catch {\n return true;\n }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n const { media, store } = useVideoContext();\n const videoRef = useRef<HTMLVideoElement>(null);\n const pointerTypeRef = useRef('mouse');\n const size = useVideo((state) => state.size);\n const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n const idle = useControlsIdle(idleForced);\n\n useEffect(() => {\n const video = videoRef.current;\n if (!video) return;\n return store.attach(video);\n }, [store, media.src]);\n\n const frame = useMemo<FrameContextValue>(\n () => ({ hold: idle.hold, visible: idle.visible }),\n [idle.hold, idle.visible],\n );\n\n const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n return (\n <FrameContext value={frame}>\n <div\n {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n idle.setFocused(false);\n }}\n onFocus={(event) => {\n idle.setFocused(isFocusVisible(event.target));\n }}\n onPointerDownCapture={(event) => {\n pointerTypeRef.current = event.pointerType || 'mouse';\n }}\n onPointerLeave={(event) => {\n if (event.pointerType !== 'touch') idle.sleep();\n }}\n onPointerMove={(event) => {\n if (event.pointerType !== 'touch') idle.wake();\n }}\n >\n <video\n playsInline\n autoPlay={media.autoPlay}\n loop={media.loop}\n poster={media.poster}\n preload={media.preload}\n ref={videoRef}\n src={media.src}\n onEnded={media.onEnded}\n onError={media.onError}\n onPause={media.onPause}\n onPlay={media.onPlay}\n onTimeUpdate={media.onTimeUpdate}\n {...styleProps(styles.video)}\n />\n <div\n data-video-surface=\"\"\n {...styleProps(styles.surface)}\n onDoubleClick={() => store.toggleFullscreen()}\n onClick={() => {\n if (pointerTypeRef.current === 'touch' && !idle.visible) {\n idle.wake();\n return;\n }\n if (pointerTypeRef.current === 'touch') idle.wake();\n store.toggle();\n }}\n />\n {children}\n </div>\n </FrameContext>\n );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;
|
|
1
|
+
{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n try {\n return element.matches(':focus-visible');\n } catch {\n return true;\n }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n const { media, store } = useVideoContext();\n const videoRef = useRef<HTMLVideoElement>(null);\n const pointerTypeRef = useRef('mouse');\n const size = useVideo((state) => state.size);\n const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n const idle = useControlsIdle(idleForced);\n const [overlay, setOverlay] = useState(false);\n\n useEffect(() => {\n const video = videoRef.current;\n if (!video) return;\n return store.attach(video);\n }, [store, media.src]);\n\n const frame = useMemo<FrameContextValue>(\n () => ({ hold: idle.hold, overlay, setOverlay, visible: idle.visible }),\n [idle.hold, idle.visible, overlay],\n );\n\n const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n return (\n <FrameContext value={frame}>\n <div\n {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n idle.setFocused(false);\n }}\n onFocus={(event) => {\n idle.setFocused(isFocusVisible(event.target));\n }}\n onPointerDownCapture={(event) => {\n pointerTypeRef.current = event.pointerType || 'mouse';\n }}\n onPointerLeave={(event) => {\n if (event.pointerType !== 'touch') idle.sleep();\n }}\n onPointerMove={(event) => {\n if (event.pointerType !== 'touch') idle.wake();\n }}\n >\n <video\n playsInline\n autoPlay={media.autoPlay}\n loop={media.loop}\n poster={media.poster}\n preload={media.preload}\n ref={videoRef}\n src={media.src}\n onEnded={media.onEnded}\n onError={media.onError}\n onPause={media.onPause}\n onPlay={media.onPlay}\n onTimeUpdate={media.onTimeUpdate}\n {...styleProps(styles.video)}\n />\n <div\n data-video-surface=\"\"\n {...styleProps(styles.surface)}\n onDoubleClick={() => store.toggleFullscreen()}\n onClick={() => {\n if (pointerTypeRef.current === 'touch' && !idle.visible) {\n idle.wake();\n return;\n }\n if (pointerTypeRef.current === 'touch') idle.wake();\n store.toggle();\n }}\n />\n {children}\n </div>\n </FrameContext>\n );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CACvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM;EAAS;EAAY,SAAS,KAAK;CAAQ,IACrE;EAAC,KAAK;EAAM,KAAK;EAAS;CAAO,CACnC;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAEtE,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE;IAAa,GAAG;GAAM,CAAC;GACjE,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}
|