@bendyline/squisq-react 1.3.1 → 1.3.2
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/index.d.ts +710 -35
- package/dist/index.js +4288 -33
- package/dist/index.js.map +1 -1
- package/dist/squisq-player.global.js +1 -1
- package/dist/standalone-source.js +1 -1
- package/package.json +2 -2
- package/dist/BlockRenderer.d.ts +0 -37
- package/dist/BlockRenderer.d.ts.map +0 -1
- package/dist/BlockRenderer.js +0 -54
- package/dist/BlockRenderer.js.map +0 -1
- package/dist/CaptionOverlay.d.ts +0 -33
- package/dist/CaptionOverlay.d.ts.map +0 -1
- package/dist/CaptionOverlay.js +0 -44
- package/dist/CaptionOverlay.js.map +0 -1
- package/dist/DocControlsBottom.d.ts +0 -28
- package/dist/DocControlsBottom.d.ts.map +0 -1
- package/dist/DocControlsBottom.js +0 -27
- package/dist/DocControlsBottom.js.map +0 -1
- package/dist/DocControlsOverlay.d.ts +0 -28
- package/dist/DocControlsOverlay.d.ts.map +0 -1
- package/dist/DocControlsOverlay.js +0 -80
- package/dist/DocControlsOverlay.js.map +0 -1
- package/dist/DocControlsSidebar.d.ts +0 -27
- package/dist/DocControlsSidebar.d.ts.map +0 -1
- package/dist/DocControlsSidebar.js +0 -10
- package/dist/DocControlsSidebar.js.map +0 -1
- package/dist/DocControlsSlideshow.d.ts +0 -20
- package/dist/DocControlsSlideshow.d.ts.map +0 -1
- package/dist/DocControlsSlideshow.js +0 -69
- package/dist/DocControlsSlideshow.js.map +0 -1
- package/dist/DocPlayer.d.ts +0 -97
- package/dist/DocPlayer.d.ts.map +0 -1
- package/dist/DocPlayer.js +0 -657
- package/dist/DocPlayer.js.map +0 -1
- package/dist/DocPlayerWithSidebar.d.ts +0 -41
- package/dist/DocPlayerWithSidebar.d.ts.map +0 -1
- package/dist/DocPlayerWithSidebar.js +0 -69
- package/dist/DocPlayerWithSidebar.js.map +0 -1
- package/dist/DocProgressBar.d.ts +0 -31
- package/dist/DocProgressBar.d.ts.map +0 -1
- package/dist/DocProgressBar.js +0 -122
- package/dist/DocProgressBar.js.map +0 -1
- package/dist/InlineAudioPlayer.d.ts +0 -15
- package/dist/InlineAudioPlayer.d.ts.map +0 -1
- package/dist/InlineAudioPlayer.js +0 -22
- package/dist/InlineAudioPlayer.js.map +0 -1
- package/dist/InlineVideoPlayer.d.ts +0 -21
- package/dist/InlineVideoPlayer.d.ts.map +0 -1
- package/dist/InlineVideoPlayer.js +0 -29
- package/dist/InlineVideoPlayer.js.map +0 -1
- package/dist/LinearDocView.d.ts +0 -73
- package/dist/LinearDocView.d.ts.map +0 -1
- package/dist/LinearDocView.js +0 -451
- package/dist/LinearDocView.js.map +0 -1
- package/dist/MarkdownRenderer.d.ts +0 -32
- package/dist/MarkdownRenderer.d.ts.map +0 -1
- package/dist/MarkdownRenderer.js +0 -259
- package/dist/MarkdownRenderer.js.map +0 -1
- package/dist/SocialCaptionOverlay.d.ts +0 -27
- package/dist/SocialCaptionOverlay.d.ts.map +0 -1
- package/dist/SocialCaptionOverlay.js +0 -185
- package/dist/SocialCaptionOverlay.js.map +0 -1
- package/dist/__tests__/BlockRenderer.test.d.ts +0 -2
- package/dist/__tests__/BlockRenderer.test.d.ts.map +0 -1
- package/dist/__tests__/BlockRenderer.test.js +0 -82
- package/dist/__tests__/BlockRenderer.test.js.map +0 -1
- package/dist/__tests__/DocControlsSlideshow.test.d.ts +0 -2
- package/dist/__tests__/DocControlsSlideshow.test.d.ts.map +0 -1
- package/dist/__tests__/DocControlsSlideshow.test.js +0 -89
- package/dist/__tests__/DocControlsSlideshow.test.js.map +0 -1
- package/dist/__tests__/JsonView.test.d.ts +0 -2
- package/dist/__tests__/JsonView.test.d.ts.map +0 -1
- package/dist/__tests__/JsonView.test.js +0 -93
- package/dist/__tests__/JsonView.test.js.map +0 -1
- package/dist/__tests__/LinearDocView.test.d.ts +0 -2
- package/dist/__tests__/LinearDocView.test.d.ts.map +0 -1
- package/dist/__tests__/LinearDocView.test.js +0 -250
- package/dist/__tests__/LinearDocView.test.js.map +0 -1
- package/dist/__tests__/MarkdownRenderer.test.d.ts +0 -2
- package/dist/__tests__/MarkdownRenderer.test.d.ts.map +0 -1
- package/dist/__tests__/MarkdownRenderer.test.js +0 -208
- package/dist/__tests__/MarkdownRenderer.test.js.map +0 -1
- package/dist/__tests__/TableLayer.test.d.ts +0 -2
- package/dist/__tests__/TableLayer.test.d.ts.map +0 -1
- package/dist/__tests__/TableLayer.test.js +0 -121
- package/dist/__tests__/TableLayer.test.js.map +0 -1
- package/dist/__tests__/exports.test.d.ts +0 -2
- package/dist/__tests__/exports.test.d.ts.map +0 -1
- package/dist/__tests__/exports.test.js +0 -48
- package/dist/__tests__/exports.test.js.map +0 -1
- package/dist/hooks/AudioProvider.d.ts +0 -71
- package/dist/hooks/AudioProvider.d.ts.map +0 -1
- package/dist/hooks/AudioProvider.js +0 -52
- package/dist/hooks/AudioProvider.js.map +0 -1
- package/dist/hooks/MediaContext.d.ts +0 -35
- package/dist/hooks/MediaContext.d.ts.map +0 -1
- package/dist/hooks/MediaContext.js +0 -72
- package/dist/hooks/MediaContext.js.map +0 -1
- package/dist/hooks/index.d.ts +0 -6
- package/dist/hooks/index.d.ts.map +0 -1
- package/dist/hooks/index.js +0 -5
- package/dist/hooks/index.js.map +0 -1
- package/dist/hooks/useAudioSync.d.ts +0 -18
- package/dist/hooks/useAudioSync.d.ts.map +0 -1
- package/dist/hooks/useAudioSync.js +0 -340
- package/dist/hooks/useAudioSync.js.map +0 -1
- package/dist/hooks/useAutoSurface.d.ts +0 -11
- package/dist/hooks/useAutoSurface.d.ts.map +0 -1
- package/dist/hooks/useAutoSurface.js +0 -24
- package/dist/hooks/useAutoSurface.js.map +0 -1
- package/dist/hooks/useDocPlayback.d.ts +0 -47
- package/dist/hooks/useDocPlayback.d.ts.map +0 -1
- package/dist/hooks/useDocPlayback.js +0 -179
- package/dist/hooks/useDocPlayback.js.map +0 -1
- package/dist/hooks/useViewportOrientation.d.ts +0 -31
- package/dist/hooks/useViewportOrientation.d.ts.map +0 -1
- package/dist/hooks/useViewportOrientation.js +0 -92
- package/dist/hooks/useViewportOrientation.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/jsonView/JsonView.d.ts +0 -26
- package/dist/jsonView/JsonView.d.ts.map +0 -1
- package/dist/jsonView/JsonView.js +0 -12
- package/dist/jsonView/JsonView.js.map +0 -1
- package/dist/jsonView/RenderNode.d.ts +0 -22
- package/dist/jsonView/RenderNode.d.ts.map +0 -1
- package/dist/jsonView/RenderNode.js +0 -30
- package/dist/jsonView/RenderNode.js.map +0 -1
- package/dist/jsonView/index.d.ts +0 -3
- package/dist/jsonView/index.d.ts.map +0 -1
- package/dist/jsonView/index.js +0 -2
- package/dist/jsonView/index.js.map +0 -1
- package/dist/jsonView/useJsonViewTokens.d.ts +0 -14
- package/dist/jsonView/useJsonViewTokens.d.ts.map +0 -1
- package/dist/jsonView/useJsonViewTokens.js +0 -34
- package/dist/jsonView/useJsonViewTokens.js.map +0 -1
- package/dist/jsonView/viewers.d.ts +0 -30
- package/dist/jsonView/viewers.d.ts.map +0 -1
- package/dist/jsonView/viewers.js +0 -226
- package/dist/jsonView/viewers.js.map +0 -1
- package/dist/layers/ImageLayer.d.ts +0 -23
- package/dist/layers/ImageLayer.d.ts.map +0 -1
- package/dist/layers/ImageLayer.js +0 -104
- package/dist/layers/ImageLayer.js.map +0 -1
- package/dist/layers/MapLayer.d.ts +0 -29
- package/dist/layers/MapLayer.d.ts.map +0 -1
- package/dist/layers/MapLayer.js +0 -97
- package/dist/layers/MapLayer.js.map +0 -1
- package/dist/layers/ShapeLayer.d.ts +0 -20
- package/dist/layers/ShapeLayer.d.ts.map +0 -1
- package/dist/layers/ShapeLayer.js +0 -39
- package/dist/layers/ShapeLayer.js.map +0 -1
- package/dist/layers/TableLayer.d.ts +0 -23
- package/dist/layers/TableLayer.d.ts.map +0 -1
- package/dist/layers/TableLayer.js +0 -58
- package/dist/layers/TableLayer.js.map +0 -1
- package/dist/layers/TextLayer.d.ts +0 -23
- package/dist/layers/TextLayer.d.ts.map +0 -1
- package/dist/layers/TextLayer.js +0 -126
- package/dist/layers/TextLayer.js.map +0 -1
- package/dist/layers/VideoLayer.d.ts +0 -40
- package/dist/layers/VideoLayer.d.ts.map +0 -1
- package/dist/layers/VideoLayer.js +0 -105
- package/dist/layers/VideoLayer.js.map +0 -1
- package/dist/layers/index.d.ts +0 -6
- package/dist/layers/index.d.ts.map +0 -1
- package/dist/layers/index.js +0 -6
- package/dist/layers/index.js.map +0 -1
- package/dist/standalone-entry.d.ts +0 -69
- package/dist/standalone-entry.d.ts.map +0 -1
- package/dist/standalone-entry.js +0 -185
- package/dist/standalone-entry.js.map +0 -1
- package/dist/types.d.ts +0 -154
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -21
- package/dist/types.js.map +0 -1
- package/dist/utils/animationUtils.d.ts +0 -8
- package/dist/utils/animationUtils.d.ts.map +0 -1
- package/dist/utils/animationUtils.js +0 -8
- package/dist/utils/animationUtils.js.map +0 -1
- package/dist/utils/layerUtils.d.ts +0 -17
- package/dist/utils/layerUtils.d.ts.map +0 -1
- package/dist/utils/layerUtils.js +0 -37
- package/dist/utils/layerUtils.js.map +0 -1
- package/dist/utils/mapTileUtils.d.ts +0 -105
- package/dist/utils/mapTileUtils.d.ts.map +0 -1
- package/dist/utils/mapTileUtils.js +0 -268
- package/dist/utils/mapTileUtils.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bendyline/squisq-react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "React component library for doc playback, block rendering, and media layers",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Bendyline",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@bendyline/squisq": "1.4.
|
|
56
|
+
"@bendyline/squisq": "1.4.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@types/react": "18.3.28",
|
package/dist/BlockRenderer.d.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* BlockRenderer Component
|
|
3
|
-
*
|
|
4
|
-
* Renders a single block as an SVG element with all its layers.
|
|
5
|
-
* Each layer is rendered back-to-front (first layer is background).
|
|
6
|
-
* Handles positioning, animations, and transitions.
|
|
7
|
-
*/
|
|
8
|
-
import type { Block } from '@bendyline/squisq/schemas';
|
|
9
|
-
/** Default viewport dimensions (1080p landscape) - for backwards compatibility */
|
|
10
|
-
export declare const VIEWPORT: {
|
|
11
|
-
width: number;
|
|
12
|
-
height: number;
|
|
13
|
-
};
|
|
14
|
-
/** Viewport configuration type */
|
|
15
|
-
export interface ViewportDimensions {
|
|
16
|
-
width: number;
|
|
17
|
-
height: number;
|
|
18
|
-
}
|
|
19
|
-
interface BlockRendererProps {
|
|
20
|
-
/** The block to render */
|
|
21
|
-
block: Block;
|
|
22
|
-
/** Current time relative to block start (seconds) */
|
|
23
|
-
blockTime: number;
|
|
24
|
-
/** Base path for resolving media URLs */
|
|
25
|
-
basePath: string;
|
|
26
|
-
/** Whether this block is entering (for transition) */
|
|
27
|
-
isEntering?: boolean;
|
|
28
|
-
/** Whether this block is exiting (for transition) */
|
|
29
|
-
isExiting?: boolean;
|
|
30
|
-
/** Viewport dimensions (defaults to 1920x1080 landscape) */
|
|
31
|
-
viewport?: ViewportDimensions;
|
|
32
|
-
/** Whether the doc is currently playing (controls video playback) */
|
|
33
|
-
isPlaying?: boolean;
|
|
34
|
-
}
|
|
35
|
-
export declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, viewport, isPlaying, }: BlockRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
-
export default BlockRenderer;
|
|
37
|
-
//# sourceMappingURL=BlockRenderer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["../src/BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAS,MAAM,2BAA2B,CAAC;AAS9D,kFAAkF;AAElF,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,kCAAkC;AAClC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC1B,0BAA0B;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,qDAAqD;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAkB,EAClB,SAAiB,EACjB,QAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,2CAgDpB;AA6CD,eAAe,aAAa,CAAC"}
|
package/dist/BlockRenderer.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ImageLayer } from './layers/ImageLayer';
|
|
3
|
-
import { TextLayer } from './layers/TextLayer';
|
|
4
|
-
import { ShapeLayer } from './layers/ShapeLayer';
|
|
5
|
-
import { MapLayer } from './layers/MapLayer';
|
|
6
|
-
import { VideoLayer } from './layers/VideoLayer';
|
|
7
|
-
import { TableLayer } from './layers/TableLayer';
|
|
8
|
-
import { getTransitionClass } from './utils/animationUtils';
|
|
9
|
-
/** Default viewport dimensions (1080p landscape) - for backwards compatibility */
|
|
10
|
-
// eslint-disable-next-line react-refresh/only-export-components
|
|
11
|
-
export const VIEWPORT = {
|
|
12
|
-
width: 1920,
|
|
13
|
-
height: 1080,
|
|
14
|
-
};
|
|
15
|
-
export function BlockRenderer({ block, blockTime, basePath, isEntering = false, isExiting = false, viewport = VIEWPORT, isPlaying, }) {
|
|
16
|
-
// Build transition class and inline style for dynamic duration
|
|
17
|
-
let transitionClass = '';
|
|
18
|
-
const transitionStyle = {};
|
|
19
|
-
if (block.transition && isEntering) {
|
|
20
|
-
transitionClass = getTransitionClass(block.transition.type, true);
|
|
21
|
-
transitionStyle['--transition-duration'] = `${block.transition.duration}s`;
|
|
22
|
-
}
|
|
23
|
-
else if (block.transition && isExiting) {
|
|
24
|
-
transitionClass = getTransitionClass(block.transition.type, false);
|
|
25
|
-
transitionStyle['--transition-duration'] = `${block.transition.duration}s`;
|
|
26
|
-
}
|
|
27
|
-
// Unique clip path ID per block to avoid conflicts when multiple blocks render simultaneously
|
|
28
|
-
const clipId = `vb-clip-${block.id}`;
|
|
29
|
-
return (_jsxs("svg", { className: `block-svg ${transitionClass}`, style: transitionStyle, viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "xMidYMid meet", overflow: "hidden", "data-block-id": block.id, children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => (_jsx(LayerRenderer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime, isPlaying: isPlaying }, layer.id))) })] }));
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Dispatch to the appropriate layer component based on type.
|
|
33
|
-
*/
|
|
34
|
-
function LayerRenderer({ layer, basePath, viewport, blockTime, isPlaying }) {
|
|
35
|
-
switch (layer.type) {
|
|
36
|
-
case 'image':
|
|
37
|
-
return (_jsx(ImageLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime }));
|
|
38
|
-
case 'text':
|
|
39
|
-
return _jsx(TextLayer, { layer: layer, viewport: viewport, blockTime: blockTime });
|
|
40
|
-
case 'shape':
|
|
41
|
-
return _jsx(ShapeLayer, { layer: layer, viewport: viewport, blockTime: blockTime });
|
|
42
|
-
case 'map':
|
|
43
|
-
return (_jsx(MapLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime }));
|
|
44
|
-
case 'video':
|
|
45
|
-
return (_jsx(VideoLayer, { layer: layer, basePath: basePath, viewport: viewport, blockTime: blockTime, isPlaying: isPlaying }));
|
|
46
|
-
case 'table':
|
|
47
|
-
return _jsx(TableLayer, { layer: layer, viewport: viewport, blockTime: blockTime });
|
|
48
|
-
default:
|
|
49
|
-
console.warn(`Unknown layer type: ${layer.type}`);
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
export default BlockRenderer;
|
|
54
|
-
//# sourceMappingURL=BlockRenderer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BlockRenderer.js","sourceRoot":"","sources":["../src/BlockRenderer.tsx"],"names":[],"mappings":"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"}
|
package/dist/CaptionOverlay.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* CaptionOverlay Component
|
|
3
|
-
*
|
|
4
|
-
* Displays closed captions synchronized with audio playback.
|
|
5
|
-
* Supports two styles:
|
|
6
|
-
*
|
|
7
|
-
* - `'standard'` (default): Traditional broadcast captions — small white text
|
|
8
|
-
* on a semi-transparent black badge at the top of the player.
|
|
9
|
-
* - `'social'`: Social media-style (Instagram/TikTok) — large centered words
|
|
10
|
-
* with the active word highlighted in the theme's primary color.
|
|
11
|
-
*/
|
|
12
|
-
import type { CaptionTrack, ViewportConfig } from '@bendyline/squisq/schemas';
|
|
13
|
-
import type { Theme } from '@bendyline/squisq/schemas';
|
|
14
|
-
import type { CaptionStyle } from './types';
|
|
15
|
-
interface CaptionOverlayProps {
|
|
16
|
-
/** Caption track with timestamped phrases */
|
|
17
|
-
captions: CaptionTrack | undefined;
|
|
18
|
-
/** Current playback time in seconds */
|
|
19
|
-
currentTime: number;
|
|
20
|
-
/** Whether captions are enabled */
|
|
21
|
-
enabled?: boolean;
|
|
22
|
-
/** Font size in pixels for standard style (default: 16) */
|
|
23
|
-
fontSize?: number;
|
|
24
|
-
/** Caption display style (default: 'standard') */
|
|
25
|
-
captionStyle?: CaptionStyle;
|
|
26
|
-
/** Theme for social-style caption colors and fonts */
|
|
27
|
-
theme?: Theme;
|
|
28
|
-
/** Viewport config for social-style font scaling */
|
|
29
|
-
viewport?: ViewportConfig;
|
|
30
|
-
}
|
|
31
|
-
export declare function CaptionOverlay({ captions, currentTime, enabled, fontSize, captionStyle, theme, viewport, }: CaptionOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
export default CaptionOverlay;
|
|
33
|
-
//# sourceMappingURL=CaptionOverlay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaptionOverlay.d.ts","sourceRoot":"","sources":["../src/CaptionOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAc,EACd,QAAa,EACb,YAAyB,EACzB,KAAK,EACL,QAAQ,GACT,EAAE,mBAAmB,2CAiErB;AAED,eAAe,cAAc,CAAC"}
|
package/dist/CaptionOverlay.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { getCaptionAtTime } from '@bendyline/squisq/schemas';
|
|
3
|
-
import { SocialCaptionOverlay } from './SocialCaptionOverlay';
|
|
4
|
-
export function CaptionOverlay({ captions, currentTime, enabled = true, fontSize = 16, captionStyle = 'standard', theme, viewport, }) {
|
|
5
|
-
// Delegate to social overlay when that style is active
|
|
6
|
-
if (captionStyle === 'social') {
|
|
7
|
-
return (_jsx(SocialCaptionOverlay, { captions: captions, currentTime: currentTime, enabled: enabled, theme: theme, viewport: viewport }));
|
|
8
|
-
}
|
|
9
|
-
// Standard caption rendering
|
|
10
|
-
const phrase = enabled && captions ? getCaptionAtTime(captions, currentTime) : null;
|
|
11
|
-
const captionText = phrase?.text ?? null;
|
|
12
|
-
return (_jsx("div", { className: "caption-overlay", style: {
|
|
13
|
-
position: 'absolute',
|
|
14
|
-
top: '6px',
|
|
15
|
-
left: '50%',
|
|
16
|
-
transform: 'translateX(-50%)',
|
|
17
|
-
zIndex: 50,
|
|
18
|
-
pointerEvents: 'none',
|
|
19
|
-
maxWidth: '100%',
|
|
20
|
-
width: '100%',
|
|
21
|
-
textAlign: 'center',
|
|
22
|
-
opacity: captionText ? 1 : 0,
|
|
23
|
-
transition: 'opacity 0.15s ease-in-out',
|
|
24
|
-
padding: '0 4px',
|
|
25
|
-
boxSizing: 'border-box',
|
|
26
|
-
}, children: captionText && (_jsx("div", { style: {
|
|
27
|
-
display: 'inline-block',
|
|
28
|
-
padding: '3px 10px',
|
|
29
|
-
background: 'rgba(0, 0, 0, 0.65)',
|
|
30
|
-
borderRadius: '4px',
|
|
31
|
-
backdropFilter: 'blur(4px)',
|
|
32
|
-
}, children: _jsx("span", { style: {
|
|
33
|
-
color: '#ffffff',
|
|
34
|
-
fontSize: `${fontSize}px`,
|
|
35
|
-
fontFamily: "'Hanken Grotesk', system-ui, sans-serif",
|
|
36
|
-
fontWeight: 500,
|
|
37
|
-
lineHeight: 1.25,
|
|
38
|
-
textShadow: '0 1px 3px rgba(0,0,0,0.5)',
|
|
39
|
-
whiteSpace: 'pre-wrap',
|
|
40
|
-
wordWrap: 'break-word',
|
|
41
|
-
}, children: captionText }) })) }));
|
|
42
|
-
}
|
|
43
|
-
export default CaptionOverlay;
|
|
44
|
-
//# sourceMappingURL=CaptionOverlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaptionOverlay.js","sourceRoot":"","sources":["../src/CaptionOverlay.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAmB9D,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,EAAE,EACb,YAAY,GAAG,UAAU,EACzB,KAAK,EACL,QAAQ,GACY;IACpB,uDAAuD;IACvD,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,CACL,KAAC,oBAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IAED,6BAA6B;IAC7B,MAAM,MAAM,GAAG,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpF,MAAM,WAAW,GAAG,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC;IAEzC,OAAO,CACL,cACE,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,kBAAkB;YAC7B,MAAM,EAAE,EAAE;YACV,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5B,UAAU,EAAE,2BAA2B;YACvC,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,YAAY;SACxB,YAEA,WAAW,IAAI,CACd,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,cAAc;gBACvB,OAAO,EAAE,UAAU;gBACnB,UAAU,EAAE,qBAAqB;gBACjC,YAAY,EAAE,KAAK;gBACnB,cAAc,EAAE,WAAW;aAC5B,YAED,eACE,KAAK,EAAE;oBACL,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,GAAG,QAAQ,IAAI;oBACzB,UAAU,EAAE,yCAAyC;oBACrD,UAAU,EAAE,GAAG;oBACf,UAAU,EAAE,IAAI;oBAChB,UAAU,EAAE,2BAA2B;oBACvC,UAAU,EAAE,UAAU;oBACtB,QAAQ,EAAE,YAAY;iBACvB,YAEA,WAAW,GACP,GACH,CACP,GACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,cAAc,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* DocControlsBottom Component
|
|
3
|
-
*
|
|
4
|
-
* Horizontal control strip that renders below the doc player video.
|
|
5
|
-
* An alternative to the overlay for landscape mode -- controls sit in a
|
|
6
|
-
* separate bar below the video instead of overlapping the content.
|
|
7
|
-
*
|
|
8
|
-
* Contains: restart, play/pause, time display, progress bar, segment
|
|
9
|
-
* indicator, CC toggle. Same controls as the overlay but in an external bar.
|
|
10
|
-
*
|
|
11
|
-
* Related Files:
|
|
12
|
-
* - DocControlsOverlay.tsx -- Overlay variant (default landscape)
|
|
13
|
-
* - DocControlsSidebar.tsx -- Sidebar variant (portrait)
|
|
14
|
-
* - DocProgressBar.tsx -- Shared progress bar component
|
|
15
|
-
* - types.ts -- PlaybackState/PlaybackActions interfaces
|
|
16
|
-
*/
|
|
17
|
-
import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
|
|
18
|
-
import type { Block } from '@bendyline/squisq/schemas';
|
|
19
|
-
interface DocControlsBottomProps {
|
|
20
|
-
state: PlaybackState;
|
|
21
|
-
actions: PlaybackActions;
|
|
22
|
-
blockMarkers: BlockMarker[];
|
|
23
|
-
expandedBlocks: Block[];
|
|
24
|
-
getBlockTitle?: (block: Block) => string;
|
|
25
|
-
}
|
|
26
|
-
export declare function DocControlsBottom({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }: DocControlsBottomProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export {};
|
|
28
|
-
//# sourceMappingURL=DocControlsBottom.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsBottom.d.ts","sourceRoot":"","sources":["../src/DocControlsBottom.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;CAC1C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,sBAAsB,2CAwExB"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* DocControlsBottom Component
|
|
4
|
-
*
|
|
5
|
-
* Horizontal control strip that renders below the doc player video.
|
|
6
|
-
* An alternative to the overlay for landscape mode -- controls sit in a
|
|
7
|
-
* separate bar below the video instead of overlapping the content.
|
|
8
|
-
*
|
|
9
|
-
* Contains: restart, play/pause, time display, progress bar, segment
|
|
10
|
-
* indicator, CC toggle. Same controls as the overlay but in an external bar.
|
|
11
|
-
*
|
|
12
|
-
* Related Files:
|
|
13
|
-
* - DocControlsOverlay.tsx -- Overlay variant (default landscape)
|
|
14
|
-
* - DocControlsSidebar.tsx -- Sidebar variant (portrait)
|
|
15
|
-
* - DocProgressBar.tsx -- Shared progress bar component
|
|
16
|
-
* - types.ts -- PlaybackState/PlaybackActions interfaces
|
|
17
|
-
*/
|
|
18
|
-
import { DocProgressBar } from './DocProgressBar';
|
|
19
|
-
import { formatTime } from './types';
|
|
20
|
-
export function DocControlsBottom({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }) {
|
|
21
|
-
return (_jsxs("div", { className: "doc-controls-bottom", children: [_jsx("button", { className: "bottom-ctrl-btn", onClick: actions.restart, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { className: "bottom-ctrl-btn bottom-play-btn", onClick: actions.toggle, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { className: "bottom-time", children: [formatTime(state.currentTime), " / ", formatTime(state.totalDuration)] }), _jsx(DocProgressBar, { state: state, actions: actions, blockMarkers: blockMarkers, expandedBlocks: expandedBlocks, getBlockTitle: getBlockTitle }), _jsxs("span", { className: "bottom-segment", children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsx("button", { className: `bottom-ctrl-btn ${state.captionMode !== 'off' ? 'bottom-ctrl-btn--active' : ''}`, onClick: () => actions.cycleCaptionMode(), title: state.captionMode === 'off'
|
|
22
|
-
? 'Captions: Off'
|
|
23
|
-
: state.captionMode === 'standard'
|
|
24
|
-
? 'Captions: Standard'
|
|
25
|
-
: 'Captions: Social', "aria-label": "Cycle caption style", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }) }))] }));
|
|
26
|
-
}
|
|
27
|
-
//# sourceMappingURL=DocControlsBottom.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsBottom.js","sourceRoot":"","sources":["../src/DocControlsBottom.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACU;IACvB,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAElC,iBACE,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,KAAK,EAAC,SAAS,gBACJ,wBAAwB,YAEnC,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,uGAAuG,GAAG,GAC9G,GACC,EAGT,iBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,CAAC,MAAM,gBACX,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAE7C,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,iCAAiC,GAAG,GACxC,CACP,CAAC,CAAC,CAAC,CACF,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,eAAe,GAAG,GACtB,CACP,GACM,EAGT,gBAAM,SAAS,EAAC,aAAa,aAC1B,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,SAAK,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,IAC7D,EAGP,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,GAC5B,EAGF,gBAAM,SAAS,EAAC,gBAAgB,aAC7B,KAAK,CAAC,iBAAiB,GAAG,CAAC,OAAG,KAAK,CAAC,WAAW,IAC3C,EAGN,KAAK,CAAC,WAAW,IAAI,CACpB,iBACE,SAAS,EAAE,mBAAmB,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5F,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,EACzC,KAAK,EACH,KAAK,CAAC,WAAW,KAAK,KAAK;oBACzB,CAAC,CAAC,eAAe;oBACjB,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU;wBAChC,CAAC,CAAC,oBAAoB;wBACtB,CAAC,CAAC,kBAAkB,gBAEf,qBAAqB,YAEhC,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,qPAAqP,GAAG,GAC5P,GACC,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* DocControlsOverlay Component
|
|
3
|
-
*
|
|
4
|
-
* The default overlay controls that render at the bottom of the doc player
|
|
5
|
-
* video with a gradient background. Contains all playback controls: restart,
|
|
6
|
-
* play/pause, time display, progress bar with block markers, segment indicator,
|
|
7
|
-
* and caption toggle.
|
|
8
|
-
*
|
|
9
|
-
* This is the original control layout extracted from DocPlayer. It's used
|
|
10
|
-
* for the 'overlay' controls layout mode (Flow mode, landscape default).
|
|
11
|
-
*
|
|
12
|
-
* Related Files:
|
|
13
|
-
* - DocPlayer.tsx -- Parent component
|
|
14
|
-
* - DocProgressBar.tsx -- Progress bar sub-component
|
|
15
|
-
* - types.ts -- Shared type definitions
|
|
16
|
-
*/
|
|
17
|
-
import type { PlaybackState, PlaybackActions, BlockMarker } from './types';
|
|
18
|
-
import type { Block } from '@bendyline/squisq/schemas';
|
|
19
|
-
interface DocControlsOverlayProps {
|
|
20
|
-
state: PlaybackState;
|
|
21
|
-
actions: PlaybackActions;
|
|
22
|
-
blockMarkers: BlockMarker[];
|
|
23
|
-
expandedBlocks: Block[];
|
|
24
|
-
getBlockTitle?: (block: Block) => string;
|
|
25
|
-
}
|
|
26
|
-
export declare function DocControlsOverlay({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }: DocControlsOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export {};
|
|
28
|
-
//# sourceMappingURL=DocControlsOverlay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsOverlay.d.ts","sourceRoot":"","sources":["../src/DocControlsOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,cAAc,EAAE,KAAK,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACd,EAAE,uBAAuB,2CAyJzB"}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* DocControlsOverlay Component
|
|
4
|
-
*
|
|
5
|
-
* The default overlay controls that render at the bottom of the doc player
|
|
6
|
-
* video with a gradient background. Contains all playback controls: restart,
|
|
7
|
-
* play/pause, time display, progress bar with block markers, segment indicator,
|
|
8
|
-
* and caption toggle.
|
|
9
|
-
*
|
|
10
|
-
* This is the original control layout extracted from DocPlayer. It's used
|
|
11
|
-
* for the 'overlay' controls layout mode (Flow mode, landscape default).
|
|
12
|
-
*
|
|
13
|
-
* Related Files:
|
|
14
|
-
* - DocPlayer.tsx -- Parent component
|
|
15
|
-
* - DocProgressBar.tsx -- Progress bar sub-component
|
|
16
|
-
* - types.ts -- Shared type definitions
|
|
17
|
-
*/
|
|
18
|
-
import { DocProgressBar } from './DocProgressBar';
|
|
19
|
-
import { formatTime } from './types';
|
|
20
|
-
export function DocControlsOverlay({ state, actions, blockMarkers, expandedBlocks, getBlockTitle, }) {
|
|
21
|
-
return (_jsxs("div", { className: "doc-player__controls", style: {
|
|
22
|
-
position: 'absolute',
|
|
23
|
-
bottom: 0,
|
|
24
|
-
left: 0,
|
|
25
|
-
right: 0,
|
|
26
|
-
padding: '12px 16px',
|
|
27
|
-
background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
|
|
28
|
-
display: 'flex',
|
|
29
|
-
alignItems: 'center',
|
|
30
|
-
gap: '8px',
|
|
31
|
-
zIndex: 100,
|
|
32
|
-
}, children: [_jsx("button", { onClick: actions.restart, style: {
|
|
33
|
-
background: 'none',
|
|
34
|
-
border: 'none',
|
|
35
|
-
color: 'rgba(255,255,255,0.7)',
|
|
36
|
-
cursor: 'pointer',
|
|
37
|
-
padding: '8px',
|
|
38
|
-
fontSize: '14px',
|
|
39
|
-
display: 'flex',
|
|
40
|
-
alignItems: 'center',
|
|
41
|
-
}, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { onClick: actions.toggle, style: {
|
|
42
|
-
background: 'rgba(255,255,255,0.2)',
|
|
43
|
-
border: 'none',
|
|
44
|
-
borderRadius: '50%',
|
|
45
|
-
color: 'white',
|
|
46
|
-
cursor: 'pointer',
|
|
47
|
-
padding: '10px',
|
|
48
|
-
fontSize: '16px',
|
|
49
|
-
display: 'flex',
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
justifyContent: 'center',
|
|
52
|
-
width: '40px',
|
|
53
|
-
height: '40px',
|
|
54
|
-
}, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { style: { color: 'white', fontSize: '12px', minWidth: '80px', fontFamily: 'monospace' }, children: [formatTime(state.currentTime), " / ", formatTime(state.totalDuration)] }), _jsx(DocProgressBar, { state: state, actions: actions, blockMarkers: blockMarkers, expandedBlocks: expandedBlocks, getBlockTitle: getBlockTitle }), _jsxs("span", { style: { color: 'rgba(255,255,255,0.5)', fontSize: '11px', whiteSpace: 'nowrap' }, children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsxs("button", { onClick: () => actions.cycleCaptionMode(), style: {
|
|
55
|
-
background: state.captionMode !== 'off' ? 'rgba(255,255,255,0.2)' : 'none',
|
|
56
|
-
border: 'none',
|
|
57
|
-
color: state.captionMode !== 'off' ? 'white' : 'rgba(255,255,255,0.5)',
|
|
58
|
-
cursor: 'pointer',
|
|
59
|
-
padding: '8px',
|
|
60
|
-
fontSize: '12px',
|
|
61
|
-
display: 'flex',
|
|
62
|
-
alignItems: 'center',
|
|
63
|
-
gap: '4px',
|
|
64
|
-
borderRadius: '4px',
|
|
65
|
-
}, title: state.captionMode === 'off'
|
|
66
|
-
? 'Captions: Off (click for Standard)'
|
|
67
|
-
: state.captionMode === 'standard'
|
|
68
|
-
? 'Captions: Standard (click for Social)'
|
|
69
|
-
: 'Captions: Social (click to turn off)', "aria-label": "Cycle caption style", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }), state.captionMode !== 'off' && (_jsx("span", { style: { fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.5px' }, children: state.captionMode === 'standard' ? 'CC' : 'SM' }))] })), actions.toggleFullscreen && (_jsx("button", { onClick: actions.toggleFullscreen, style: {
|
|
70
|
-
background: state.isFullscreen ? 'rgba(255,255,255,0.2)' : 'none',
|
|
71
|
-
border: 'none',
|
|
72
|
-
color: state.isFullscreen ? 'white' : 'rgba(255,255,255,0.5)',
|
|
73
|
-
cursor: 'pointer',
|
|
74
|
-
padding: '8px',
|
|
75
|
-
display: 'flex',
|
|
76
|
-
alignItems: 'center',
|
|
77
|
-
borderRadius: '4px',
|
|
78
|
-
}, title: state.isFullscreen ? 'Exit fullscreen (F)' : 'Fullscreen (F)', "aria-label": state.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', children: state.isFullscreen ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })) }))] }));
|
|
79
|
-
}
|
|
80
|
-
//# sourceMappingURL=DocControlsOverlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsOverlay.js","sourceRoot":"","sources":["../src/DocControlsOverlay.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,aAAa,GACW;IACxB,OAAO,CACL,eACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,OAAO,EAAE,WAAW;YACpB,UAAU,EAAE,+CAA+C;YAC3D,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,KAAK;YACV,MAAM,EAAE,GAAG;SACZ,aAGD,iBACE,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,KAAK,EAAE;oBACL,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,uBAAuB;oBAC9B,MAAM,EAAE,SAAS;oBACjB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,MAAM;oBAChB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;iBACrB,EACD,KAAK,EAAC,SAAS,gBACJ,wBAAwB,YAEnC,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,uGAAuG,GAAG,GAC9G,GACC,EAGT,iBACE,OAAO,EAAE,OAAO,CAAC,MAAM,EACvB,KAAK,EAAE;oBACL,UAAU,EAAE,uBAAuB;oBACnC,MAAM,EAAE,MAAM;oBACd,YAAY,EAAE,KAAK;oBACnB,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,SAAS;oBACjB,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,MAAM;oBAChB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf,gBACW,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAE7C,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,iCAAiC,GAAG,GACxC,CACP,CAAC,CAAC,CAAC,CACF,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,eAAe,GAAG,GACtB,CACP,GACM,EAGT,gBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aACzF,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,SAAK,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,IAC7D,EAGP,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,GAC5B,EAGF,gBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aACpF,KAAK,CAAC,iBAAiB,GAAG,CAAC,OAAG,KAAK,CAAC,WAAW,IAC3C,EAGN,KAAK,CAAC,WAAW,IAAI,CACpB,kBACE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,EACzC,KAAK,EAAE;oBACL,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM;oBAC1E,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB;oBACtE,MAAM,EAAE,SAAS;oBACjB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,MAAM;oBAChB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,KAAK;oBACV,YAAY,EAAE,KAAK;iBACpB,EACD,KAAK,EACH,KAAK,CAAC,WAAW,KAAK,KAAK;oBACzB,CAAC,CAAC,oCAAoC;oBACtC,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU;wBAChC,CAAC,CAAC,uCAAuC;wBACzC,CAAC,CAAC,sCAAsC,gBAEnC,qBAAqB,aAEhC,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,qPAAqP,GAAG,GAC5P,EACL,KAAK,CAAC,WAAW,KAAK,KAAK,IAAI,CAC9B,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,YAClF,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAC1C,CACR,IACM,CACV,EAGA,OAAO,CAAC,gBAAgB,IAAI,CAC3B,iBACE,OAAO,EAAE,OAAO,CAAC,gBAAgB,EACjC,KAAK,EAAE;oBACL,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM;oBACjE,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB;oBAC7D,MAAM,EAAE,SAAS;oBACjB,OAAO,EAAE,KAAK;oBACd,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,YAAY,EAAE,KAAK;iBACpB,EACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,gBAAgB,gBACxD,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,YAEtE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,+EAA+E,GAAG,GACtF,CACP,CAAC,CAAC,CAAC,CACF,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YACjE,eAAM,CAAC,EAAC,gFAAgF,GAAG,GACvF,CACP,GACM,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* DocControlsSidebar Component
|
|
3
|
-
*
|
|
4
|
-
* Vertical control strip that renders alongside the doc player video.
|
|
5
|
-
* Used in portrait orientation to eliminate black bars -- controls sit in a
|
|
6
|
-
* "tab" to the right of the 9:16 video instead of overlaying it.
|
|
7
|
-
*
|
|
8
|
-
* Contains: restart, play/pause, time display, segment indicator, CC toggle.
|
|
9
|
-
* Does NOT contain the scrubber/progress bar (that stays in the video via
|
|
10
|
-
* DocPlayer's showScrubber prop).
|
|
11
|
-
*
|
|
12
|
-
* The sidebar stretches to match the full height of the video and has rounded
|
|
13
|
-
* corners on the right side to create a connected "tab" appearance.
|
|
14
|
-
*
|
|
15
|
-
* Related Files:
|
|
16
|
-
* - DocPlayerWithSidebar.tsx -- Wrapper that composes player + sidebar
|
|
17
|
-
* - DocPlayer.tsx -- Core player (renders with showScrubber=true)
|
|
18
|
-
* - types.ts -- PlaybackState/PlaybackActions interfaces
|
|
19
|
-
*/
|
|
20
|
-
import type { PlaybackState, PlaybackActions } from './types';
|
|
21
|
-
interface DocControlsSidebarProps {
|
|
22
|
-
state: PlaybackState;
|
|
23
|
-
actions: PlaybackActions;
|
|
24
|
-
}
|
|
25
|
-
export declare function DocControlsSidebar({ state, actions }: DocControlsSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export {};
|
|
27
|
-
//# sourceMappingURL=DocControlsSidebar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsSidebar.d.ts","sourceRoot":"","sources":["../src/DocControlsSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG9D,UAAU,uBAAuB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,uBAAuB,2CAoF7E"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { formatTime } from './types';
|
|
3
|
-
export function DocControlsSidebar({ state, actions }) {
|
|
4
|
-
return (_jsxs("div", { className: "doc-controls-sidebar", children: [_jsx("button", { className: "sidebar-ctrl-btn", onClick: actions.restart, title: "Restart", "aria-label": "Restart from beginning", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) }) }), _jsx("button", { className: "sidebar-ctrl-btn sidebar-play-btn", onClick: actions.toggle, "aria-label": state.isPlaying ? 'Pause' : 'Play', children: state.isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: _jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "22", height: "22", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("div", { className: "sidebar-time", children: [_jsx("div", { children: formatTime(state.currentTime) }), _jsx("div", { className: "sidebar-time-total", children: formatTime(state.totalDuration) })] }), _jsxs("div", { className: "sidebar-segment", children: [state.currentBlockIndex + 1, "/", state.totalBlocks] }), state.hasCaptions && (_jsx("button", { className: `sidebar-ctrl-btn ${state.captionMode !== 'off' ? 'sidebar-ctrl-btn--active' : ''}`, onClick: () => actions.cycleCaptionMode(), title: state.captionMode === 'off'
|
|
5
|
-
? 'Captions: Off'
|
|
6
|
-
: state.captionMode === 'standard'
|
|
7
|
-
? 'Captions: Standard'
|
|
8
|
-
: 'Captions: Social', "aria-label": "Cycle caption style", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M19 4H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1a1 1 0 01-1 1h-3a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1v1z" }) }) })), actions.toggleFullscreen && (_jsx("button", { className: `sidebar-ctrl-btn ${state.isFullscreen ? 'sidebar-ctrl-btn--active' : ''}`, onClick: actions.toggleFullscreen, title: state.isFullscreen ? 'Exit fullscreen (F)' : 'Fullscreen (F)', "aria-label": state.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', children: state.isFullscreen ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: _jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })) }))] }));
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=DocControlsSidebar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsSidebar.js","sourceRoot":"","sources":["../src/DocControlsSidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* DocControlsSlideshow Component
|
|
3
|
-
*
|
|
4
|
-
* Compact slide navigation controls for the DocPlayer slideshow display mode.
|
|
5
|
-
* Renders in the lower-right corner with previous / slide counter / next buttons,
|
|
6
|
-
* similar to PowerPoint/Keynote presentation navigation.
|
|
7
|
-
*
|
|
8
|
-
* Related Files:
|
|
9
|
-
* - DocPlayer.tsx — Parent component (renders this when displayMode='slideshow')
|
|
10
|
-
* - DocControlsOverlay.tsx — Video-mode controls (overlay layout)
|
|
11
|
-
* - types.ts — Shared type definitions
|
|
12
|
-
*/
|
|
13
|
-
import type { PlaybackState, SlideNavActions } from './types';
|
|
14
|
-
interface DocControlsSlideshowProps {
|
|
15
|
-
state: PlaybackState;
|
|
16
|
-
slideNav: SlideNavActions;
|
|
17
|
-
}
|
|
18
|
-
export declare function DocControlsSlideshow({ state, slideNav }: DocControlsSlideshowProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export {};
|
|
20
|
-
//# sourceMappingURL=DocControlsSlideshow.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsSlideshow.d.ts","sourceRoot":"","sources":["../src/DocControlsSlideshow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE9D,UAAU,yBAAyB;IACjC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CA+GlF"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
export function DocControlsSlideshow({ state, slideNav }) {
|
|
3
|
-
const { currentBlockIndex, totalBlocks } = state;
|
|
4
|
-
const isFirst = currentBlockIndex <= 0;
|
|
5
|
-
const isLast = currentBlockIndex >= totalBlocks - 1;
|
|
6
|
-
return (_jsxs("div", { className: "doc-controls-slideshow", "data-testid": "slideshow-controls", style: {
|
|
7
|
-
position: 'absolute',
|
|
8
|
-
bottom: '16px',
|
|
9
|
-
right: '16px',
|
|
10
|
-
display: 'flex',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
gap: '2px',
|
|
13
|
-
background: 'rgba(0, 0, 0, 0.65)',
|
|
14
|
-
borderRadius: '8px',
|
|
15
|
-
padding: '4px 6px',
|
|
16
|
-
zIndex: 100,
|
|
17
|
-
userSelect: 'none',
|
|
18
|
-
backdropFilter: 'blur(8px)',
|
|
19
|
-
WebkitBackdropFilter: 'blur(8px)',
|
|
20
|
-
}, children: [_jsx("button", { onClick: (e) => {
|
|
21
|
-
e.stopPropagation();
|
|
22
|
-
slideNav.prevSlide();
|
|
23
|
-
}, disabled: isFirst, "data-testid": "slide-prev", "aria-label": "Previous slide", title: "Previous slide", style: {
|
|
24
|
-
background: 'none',
|
|
25
|
-
border: 'none',
|
|
26
|
-
color: isFirst ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.9)',
|
|
27
|
-
cursor: isFirst ? 'default' : 'pointer',
|
|
28
|
-
padding: '6px 8px',
|
|
29
|
-
display: 'flex',
|
|
30
|
-
alignItems: 'center',
|
|
31
|
-
justifyContent: 'center',
|
|
32
|
-
borderRadius: '4px',
|
|
33
|
-
transition: 'background 0.15s',
|
|
34
|
-
}, onMouseEnter: (e) => {
|
|
35
|
-
if (!isFirst)
|
|
36
|
-
e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
|
|
37
|
-
}, onMouseLeave: (e) => {
|
|
38
|
-
e.currentTarget.style.background = 'none';
|
|
39
|
-
}, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }) }), _jsx("span", { "data-testid": "slide-counter", style: {
|
|
40
|
-
color: 'rgba(255,255,255,0.9)',
|
|
41
|
-
fontSize: '13px',
|
|
42
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
43
|
-
fontVariantNumeric: 'tabular-nums',
|
|
44
|
-
minWidth: '48px',
|
|
45
|
-
textAlign: 'center',
|
|
46
|
-
padding: '0 4px',
|
|
47
|
-
letterSpacing: '0.02em',
|
|
48
|
-
}, children: totalBlocks > 0 ? `${currentBlockIndex + 1} / ${totalBlocks}` : '—' }), _jsx("button", { onClick: (e) => {
|
|
49
|
-
e.stopPropagation();
|
|
50
|
-
slideNav.nextSlide();
|
|
51
|
-
}, disabled: isLast, "data-testid": "slide-next", "aria-label": "Next slide", title: "Next slide", style: {
|
|
52
|
-
background: 'none',
|
|
53
|
-
border: 'none',
|
|
54
|
-
color: isLast ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.9)',
|
|
55
|
-
cursor: isLast ? 'default' : 'pointer',
|
|
56
|
-
padding: '6px 8px',
|
|
57
|
-
display: 'flex',
|
|
58
|
-
alignItems: 'center',
|
|
59
|
-
justifyContent: 'center',
|
|
60
|
-
borderRadius: '4px',
|
|
61
|
-
transition: 'background 0.15s',
|
|
62
|
-
}, onMouseEnter: (e) => {
|
|
63
|
-
if (!isLast)
|
|
64
|
-
e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
|
|
65
|
-
}, onMouseLeave: (e) => {
|
|
66
|
-
e.currentTarget.style.background = 'none';
|
|
67
|
-
}, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: _jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }) })] }));
|
|
68
|
-
}
|
|
69
|
-
//# sourceMappingURL=DocControlsSlideshow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DocControlsSlideshow.js","sourceRoot":"","sources":["../src/DocControlsSlideshow.tsx"],"names":[],"mappings":"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"}
|