@bendyline/squisq-react 1.3.2 → 1.4.0
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 +63 -7
- package/dist/index.js +1171 -666
- package/dist/index.js.map +1 -1
- package/dist/squisq-player.css +1 -1
- package/dist/squisq-player.css.map +1 -1
- package/dist/squisq-player.global.js +17 -13
- package/dist/squisq-player.global.js.map +1 -1
- package/dist/standalone-source.js +1 -1
- package/package.json +3 -2
- package/src/BlockRenderer.tsx +15 -7
- package/src/DocPlayer.tsx +65 -12
- package/src/DocProgressBar.tsx +21 -3
- package/src/LinearDocView.tsx +11 -197
- package/src/MarkdownRenderer.tsx +165 -41
- package/src/MediaClipLayer.tsx +135 -0
- package/src/__tests__/DocPlayer.test.tsx +51 -0
- package/src/__tests__/DocProgressBar.test.tsx +76 -0
- package/src/__tests__/MarkdownRenderer.test.tsx +95 -1
- package/src/__tests__/PathLayer.test.tsx +73 -0
- package/src/__tests__/fillStyle.test.tsx +112 -0
- package/src/__tests__/transitionStyles.test.ts +125 -0
- package/src/__tests__/useDocPlayback.transition.test.ts +70 -0
- package/src/hooks/useAudioSync.ts +14 -1
- package/src/hooks/useDocPlayback.ts +81 -100
- package/src/hooks/useMediaSchedule.ts +39 -0
- package/src/index.ts +7 -0
- package/src/layers/ImageLayer.tsx +11 -1
- package/src/layers/PathLayer.tsx +146 -0
- package/src/layers/ShapeLayer.tsx +27 -5
- package/src/layers/TextLayer.tsx +395 -22
- package/src/layers/VideoLayer.tsx +16 -9
- package/src/layers/index.ts +1 -0
- package/src/styles/doc-animations.css +1857 -2
- package/src/utils/fillStyle.tsx +148 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { Block, Doc, Theme, SurfaceScheme, CaptionTrack, ViewportConfig as ViewportConfig$1, ImageLayer as ImageLayer$1, TextLayer as TextLayer$1, ShapeLayer as ShapeLayer$1, VideoLayer as VideoLayer$1, TableLayer as TableLayer$1, MapLayer as MapLayer$1, AudioTrack, MediaProvider } from '@bendyline/squisq/schemas';
|
|
2
|
+
import { Block, Doc, Theme, SurfaceScheme, Transition, CaptionTrack, ViewportConfig as ViewportConfig$1, ImageLayer as ImageLayer$1, TextLayer as TextLayer$1, ShapeLayer as ShapeLayer$1, PathLayer as PathLayer$1, VideoLayer as VideoLayer$1, TableLayer as TableLayer$1, MapLayer as MapLayer$1, ScheduledClip, AudioTrack, MediaProvider } from '@bendyline/squisq/schemas';
|
|
3
3
|
import { ViewportConfig, ViewportOrientation } from '@bendyline/squisq/doc';
|
|
4
4
|
export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
|
|
5
|
-
import { MarkdownBlockNode } from '@bendyline/squisq/markdown';
|
|
5
|
+
import { MarkdownBlockNode, HtmlPolicy } from '@bendyline/squisq/markdown';
|
|
6
6
|
import * as react from 'react';
|
|
7
7
|
import { RefObject } from 'react';
|
|
8
8
|
import { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
|
|
@@ -297,12 +297,14 @@ interface BlockRendererProps {
|
|
|
297
297
|
isEntering?: boolean;
|
|
298
298
|
/** Whether this block is exiting (for transition) */
|
|
299
299
|
isExiting?: boolean;
|
|
300
|
+
/** Transition to apply. Defaults to block.transition. */
|
|
301
|
+
transition?: Transition;
|
|
300
302
|
/** Viewport dimensions (defaults to 1920x1080 landscape) */
|
|
301
303
|
viewport?: ViewportDimensions;
|
|
302
304
|
/** Whether the doc is currently playing (controls video playback) */
|
|
303
305
|
isPlaying?: boolean;
|
|
304
306
|
}
|
|
305
|
-
declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, viewport, isPlaying, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
|
|
307
|
+
declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, transition, viewport, isPlaying, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
|
|
306
308
|
|
|
307
309
|
interface CaptionOverlayProps {
|
|
308
310
|
/** Caption track with timestamped phrases */
|
|
@@ -395,6 +397,11 @@ interface MarkdownRendererProps {
|
|
|
395
397
|
nodes: MarkdownBlockNode[];
|
|
396
398
|
/** Optional CSS class for the wrapper element */
|
|
397
399
|
className?: string;
|
|
400
|
+
/**
|
|
401
|
+
* Raw HTML policy. Defaults to `sanitize`, which removes unsafe tags,
|
|
402
|
+
* event handlers, and executable URL schemes before rendering.
|
|
403
|
+
*/
|
|
404
|
+
htmlPolicy?: HtmlPolicy;
|
|
398
405
|
}
|
|
399
406
|
/**
|
|
400
407
|
* Renders MarkdownBlockNode[] AST as React HTML elements.
|
|
@@ -404,7 +411,7 @@ interface MarkdownRendererProps {
|
|
|
404
411
|
* <MarkdownRenderer nodes={block.contents} />
|
|
405
412
|
* ```
|
|
406
413
|
*/
|
|
407
|
-
declare function MarkdownRenderer({ nodes, className }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
|
|
414
|
+
declare function MarkdownRenderer({ nodes, className, htmlPolicy, }: MarkdownRendererProps): react_jsx_runtime.JSX.Element | null;
|
|
408
415
|
|
|
409
416
|
interface LinearDocViewProps {
|
|
410
417
|
/** The Doc to render */
|
|
@@ -516,7 +523,11 @@ interface TextLayerProps {
|
|
|
516
523
|
/** Current time relative to block start */
|
|
517
524
|
blockTime: number;
|
|
518
525
|
}
|
|
519
|
-
|
|
526
|
+
/**
|
|
527
|
+
* Dispatch between the plain SVG-text renderer and the rich HTML renderer
|
|
528
|
+
* based on whether the layer carries `content.html`.
|
|
529
|
+
*/
|
|
530
|
+
declare function TextLayer(props: TextLayerProps): react_jsx_runtime.JSX.Element;
|
|
520
531
|
|
|
521
532
|
interface ShapeLayerProps {
|
|
522
533
|
layer: ShapeLayer$1;
|
|
@@ -530,6 +541,18 @@ interface ShapeLayerProps {
|
|
|
530
541
|
}
|
|
531
542
|
declare function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps): react_jsx_runtime.JSX.Element;
|
|
532
543
|
|
|
544
|
+
interface PathLayerProps {
|
|
545
|
+
layer: PathLayer$1;
|
|
546
|
+
/** Viewport dimensions — used to resolve `%` positions for named shapes. */
|
|
547
|
+
viewport: {
|
|
548
|
+
width: number;
|
|
549
|
+
height: number;
|
|
550
|
+
};
|
|
551
|
+
/** Current time relative to block start. */
|
|
552
|
+
blockTime: number;
|
|
553
|
+
}
|
|
554
|
+
declare function PathLayer({ layer, viewport, blockTime }: PathLayerProps): react_jsx_runtime.JSX.Element;
|
|
555
|
+
|
|
533
556
|
interface VideoLayerProps {
|
|
534
557
|
layer: VideoLayer$1;
|
|
535
558
|
/** Base path for resolving relative video URLs */
|
|
@@ -544,7 +567,7 @@ interface VideoLayerProps {
|
|
|
544
567
|
/** Whether the doc is currently playing */
|
|
545
568
|
isPlaying?: boolean;
|
|
546
569
|
}
|
|
547
|
-
declare function VideoLayer({ layer, basePath, viewport, blockTime
|
|
570
|
+
declare function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying }: VideoLayerProps): react_jsx_runtime.JSX.Element;
|
|
548
571
|
|
|
549
572
|
interface TableLayerProps {
|
|
550
573
|
layer: TableLayer$1;
|
|
@@ -572,6 +595,15 @@ interface MapLayerProps {
|
|
|
572
595
|
}
|
|
573
596
|
declare function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProps): react_jsx_runtime.JSX.Element;
|
|
574
597
|
|
|
598
|
+
interface MediaClipLayerProps {
|
|
599
|
+
schedule: ScheduledClip[];
|
|
600
|
+
currentTime: number;
|
|
601
|
+
isPlaying: boolean;
|
|
602
|
+
basePath: string;
|
|
603
|
+
renderMode?: boolean;
|
|
604
|
+
}
|
|
605
|
+
declare function MediaClipLayer({ schedule, currentTime, isPlaying, basePath, renderMode, }: MediaClipLayerProps): react_jsx_runtime.JSX.Element | null;
|
|
606
|
+
|
|
575
607
|
/**
|
|
576
608
|
* useAudioSync Hook
|
|
577
609
|
*
|
|
@@ -587,6 +619,30 @@ declare function MapLayer({ layer, basePath, viewport, blockTime }: MapLayerProp
|
|
|
587
619
|
|
|
588
620
|
declare function useAudioSync(audioRef: RefObject<HTMLAudioElement>, audioTrack: AudioTrack | undefined, basePath?: string): AudioProvider;
|
|
589
621
|
|
|
622
|
+
/**
|
|
623
|
+
* useMediaSchedule
|
|
624
|
+
*
|
|
625
|
+
* Pure follower of the playback clock for the media-clip model. Given the
|
|
626
|
+
* resolved {@link ScheduledClip}s and the current time, it returns the clips
|
|
627
|
+
* the player should mount and which of them are active right now.
|
|
628
|
+
* {@link MediaClipLayer} consumes this to drive one hidden `<audio>` /
|
|
629
|
+
* full-bleed `<video>` element per clip. (Annotation-authored clips all render
|
|
630
|
+
* at the player level; template-produced `VideoLayer`s are a separate path and
|
|
631
|
+
* are not part of the schedule.)
|
|
632
|
+
*
|
|
633
|
+
* It owns no clock: `currentTime`/`isPlaying` come from the existing
|
|
634
|
+
* `useAudioSync` provider via `DocPlayer`. With an empty schedule it returns
|
|
635
|
+
* empty lists, so documents without the new media model are unaffected.
|
|
636
|
+
*/
|
|
637
|
+
|
|
638
|
+
interface MediaScheduleController {
|
|
639
|
+
/** Clips the player mounts (every scheduled clip). */
|
|
640
|
+
renderClips: ScheduledClip[];
|
|
641
|
+
/** Ids of clips whose [absoluteStart, absoluteEnd) contains currentTime. */
|
|
642
|
+
activeIds: Set<string>;
|
|
643
|
+
}
|
|
644
|
+
declare function useMediaSchedule(schedule: ScheduledClip[], currentTime: number): MediaScheduleController;
|
|
645
|
+
|
|
590
646
|
/**
|
|
591
647
|
* useDocPlayback Hook
|
|
592
648
|
*
|
|
@@ -707,4 +763,4 @@ interface JsonViewProps {
|
|
|
707
763
|
}
|
|
708
764
|
declare function JsonView(props: JsonViewProps): react_jsx_runtime.JSX.Element;
|
|
709
765
|
|
|
710
|
-
export { type AudioActions, type AudioProvider, type AudioState, type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerWithSidebar, DocProgressBar, type ImageDisplayMode, ImageLayer, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, JsonView, type JsonViewProps, LinearDocView, type LinearDocViewProps, MapLayer, MarkdownRenderer, MediaContext, type PlaybackActions$1 as PlaybackActions, type PlaybackState$1 as PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, ShapeLayer, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, type SquisqWindow, TableLayer, TextLayer, VIEWPORT, VideoLayer, formatTime, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaUrl, useViewportOrientation };
|
|
766
|
+
export { type AudioActions, type AudioProvider, type AudioState, type BlockMarker, BlockRenderer, type CaptionMode, CaptionOverlay, type CaptionStyle, type ControlsLayout, type DisplayMode, DocControlsBottom, DocControlsOverlay, DocControlsSidebar, DocControlsSlideshow, DocPlayer, DocPlayerWithSidebar, DocProgressBar, type ImageDisplayMode, ImageLayer, InlineAudioPlayer, type InlineAudioPlayerProps, InlineVideoPlayer, type InlineVideoPlayerProps, JsonView, type JsonViewProps, LinearDocView, type LinearDocViewProps, MapLayer, MarkdownRenderer, MediaClipLayer, type MediaClipLayerProps, MediaContext, type MediaScheduleController, PathLayer, type PlaybackActions$1 as PlaybackActions, type PlaybackState$1 as PlaybackState, type RenderAudioSegmentInfo, type RenderBlockInfo, type RenderCaptionInfo, type RenderChapterInfo, ShapeLayer, type SlideNavActions, SocialCaptionOverlay, type SquisqRenderAPI, type SquisqWindow, TableLayer, TextLayer, VIEWPORT, VideoLayer, formatTime, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaSchedule, useMediaUrl, useViewportOrientation };
|