@retoo/scena 0.0.1 → 0.0.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/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![npm version](https://img.shields.io/npm/v/@retoo/scena)](https://www.npmjs.com/package/@retoo/scena)
4
4
  [![bundle size](https://img.shields.io/badge/gzipped-~30KB-blue)](https://use-retoo.github.io/scena/distribution/bundle-size)
5
- [![license](https://img.shields.io/npm/l/@retoo/scena)](./LICENSE.md)
5
+ [![license](https://img.shields.io/badge/license-PolyForm%20Shield%201.0.0-blue)](./LICENSE.md)
6
6
 
7
7
  Embeddable video widget for any website. Framework-agnostic, SSR-safe, ~26KB gzipped.
8
8
 
package/dist/index.d.ts CHANGED
@@ -2,8 +2,6 @@ export { default as Scena } from './app/entrypoint/ui/Scena.svelte';
2
2
 
3
3
  /** Event names emitted by the scena widget event bus. */
4
4
  declare enum ScenaEvent {
5
- /** Fired when the scena component is mounted in the DOM. */
6
- ON_SCENA_MOUNT = "scena:on-mount",
7
5
  /** Fired when the scena instance is destroyed. */
8
6
  ON_SCENA_DESTROY = "scena:on-destroy",
9
7
  /** Fired when the video element is ready for playback. */
@@ -131,6 +129,10 @@ declare enum OverrideLayer {
131
129
  PREVIEW = "preview"
132
130
  }
133
131
 
132
+ /** Shape of any component instance that exposes its DOM elements via `getElements()`. */
133
+ type ComponentRef<T> = {
134
+ getElements(): T;
135
+ };
134
136
  /** Inline styles — a raw CSS string or a partial `CSSStyleDeclaration` object. */
135
137
  type ComponentStyles = string | Partial<CSSStyleDeclaration>;
136
138
  /**
@@ -186,11 +188,13 @@ interface ScenaContainerProps {
186
188
  interface ScenaContainerSnippets {
187
189
  children: ComponentSnippet;
188
190
  }
191
+ /** DOM elements exposed by the outer container component. */
192
+ interface ScenaContainerElements {
193
+ root: HTMLDivElement | null;
194
+ }
189
195
  /** Component ref for the outer container. */
190
196
  interface ScenaContainerRef {
191
- getElements: () => {
192
- root: HTMLDivElement;
193
- };
197
+ getElements: () => ScenaContainerElements;
194
198
  }
195
199
 
196
200
  /** Possible values for `aria-pressed` on scena buttons. */
@@ -255,7 +259,7 @@ interface ScenaButtonSnippets {
255
259
  }
256
260
  /** DOM element references for the base button. */
257
261
  interface ScenaButtonElements {
258
- root: HTMLButtonElement;
262
+ root: HTMLButtonElement | null;
259
263
  }
260
264
 
261
265
  interface ScenaIconCustomClasses {
@@ -275,7 +279,7 @@ interface ScenaIconSnippets {
275
279
  children: ComponentSnippet;
276
280
  }
277
281
  interface ScenaIconElements {
278
- root: SVGSVGElement;
282
+ root: SVGSVGElement | null;
279
283
  }
280
284
 
281
285
  /** Custom CSS class overrides for the close button and its sub-components. */
@@ -300,13 +304,15 @@ interface ScenaCloseButtonProps {
300
304
  customStyles: Partial<ScenaCloseButtonComponentStyles>;
301
305
  onClick: (event: Event) => void;
302
306
  }
307
+ /** DOM elements exposed by the close button component. */
308
+ interface ScenaCloseButtonElements {
309
+ root: HTMLDivElement | null;
310
+ cross: ScenaIconElements | null;
311
+ button: ScenaButtonElements | null;
312
+ }
303
313
  /** Component ref for the close button. */
304
314
  interface ScenaCloseButtonRef {
305
- getElements: () => {
306
- root: HTMLDivElement;
307
- button: ScenaButtonElements | undefined;
308
- cross: ScenaIconElements | undefined;
309
- };
315
+ getElements: () => ScenaCloseButtonElements;
310
316
  }
311
317
 
312
318
  declare enum ScenaCtaButtonPlacement {
@@ -341,12 +347,14 @@ interface ScenaCtaButtonProps {
341
347
  customStyles: Partial<ScenaCtaButtonComponentStyles>;
342
348
  onClick: (event: Event) => void;
343
349
  }
350
+ /** DOM elements exposed by the CTA button component. */
351
+ interface ScenaCtaButtonElements {
352
+ root: HTMLDivElement | null;
353
+ button: ScenaButtonElements | null;
354
+ }
344
355
  /** Component ref for the CTA button. */
345
356
  interface ScenaCtaButtonRef {
346
- getElements: () => {
347
- root: HTMLDivElement;
348
- button: ScenaButtonElements | undefined;
349
- };
357
+ getElements: () => ScenaCtaButtonElements;
350
358
  }
351
359
 
352
360
  /** Preload strategy for the `<video>` element. */
@@ -497,15 +505,16 @@ interface UseVideoControllerOptions {
497
505
  }
498
506
  /** Return value of `useVideoController` — combines reactive data, methods, and callbacks. */
499
507
  type UseVideoControllerReturns = ScenaVideoData & ScenaVideoMethods & ScenaVideoCallbacks;
508
+ /** DOM elements exposed by the video widget. */
509
+ interface ScenaVideoElements {
510
+ root: HTMLDivElement | null;
511
+ video: HTMLVideoElement;
512
+ }
500
513
  /** Component ref for the video widget. */
501
514
  interface ScenaVideoRef {
502
515
  /** Video playback controller. */
503
516
  controller: UseVideoControllerReturns;
504
- /** Returns references to the root wrapper and video DOM elements. */
505
- getElements: () => {
506
- root: HTMLDivElement;
507
- video: HTMLVideoElement;
508
- };
517
+ getElements: () => ScenaVideoElements;
509
518
  }
510
519
 
511
520
  declare function useVideoController({ getVideoElement, eventEmitter }: UseVideoControllerOptions): UseVideoControllerReturns;
@@ -534,11 +543,13 @@ interface ScenaVideoContainerProps {
534
543
  interface ScenaVideoContainerSnippets {
535
544
  children: ComponentSnippet;
536
545
  }
546
+ /** DOM elements exposed by the video container component. */
547
+ interface ScenaVideoContainerElements {
548
+ root: HTMLDivElement | null;
549
+ }
537
550
  /** Component ref for the video container. */
538
551
  interface ScenaVideoContainerRef {
539
- getElements: () => {
540
- root: HTMLDivElement;
541
- };
552
+ getElements: () => ScenaVideoContainerElements;
542
553
  }
543
554
 
544
555
  /** Custom CSS class overrides for the video play/pause controls. */
@@ -566,15 +577,17 @@ interface ScenaVideoControlsProps {
566
577
  customClasses: Partial<ScenaVideoControlsComponentClasses>;
567
578
  customStyles: Partial<ScenaVideoControlsComponentStyles>;
568
579
  }
580
+ /** DOM elements exposed by the video controls component. */
581
+ interface ScenaVideoControlsElements {
582
+ root: HTMLDivElement | null;
583
+ pauseButton: ScenaButtonElements | null;
584
+ pauseIcon: ScenaIconElements | null;
585
+ playButton: ScenaButtonElements | null;
586
+ playIcon: ScenaIconElements | null;
587
+ }
569
588
  /** Component ref for the video play/pause controls. */
570
589
  interface ScenaVideoControlsRef {
571
- getElements: () => {
572
- root: HTMLDivElement | null;
573
- pauseButton: ScenaButtonElements | undefined;
574
- pauseIcon: ScenaIconElements | undefined;
575
- playButton: ScenaButtonElements | undefined;
576
- playIcon: ScenaIconElements | undefined;
577
- };
590
+ getElements: () => ScenaVideoControlsElements;
578
591
  }
579
592
 
580
593
  /** Custom CSS class overrides for the loader spinner. */
@@ -594,7 +607,7 @@ interface ScenaLoaderProps {
594
607
  }
595
608
  /** DOM element references for the loader spinner. */
596
609
  interface ScenaLoaderElements {
597
- root: SVGSVGElement;
610
+ root: SVGSVGElement | null;
598
611
  }
599
612
 
600
613
  /** Custom CSS class overrides for the video loader widget. */
@@ -614,12 +627,14 @@ interface ScenaVideoLoaderProps {
614
627
  customClasses: Partial<ScenaVideoLoaderComponentClasses>;
615
628
  customStyles: Partial<ScenaVideoLoaderComponentStyles>;
616
629
  }
630
+ /** DOM elements exposed by the video loader component. */
631
+ interface ScenaVideoLoaderElements {
632
+ root: HTMLDivElement | null;
633
+ loader: ScenaLoaderElements | null;
634
+ }
617
635
  /** Component ref for the video loader. */
618
636
  interface ScenaVideoLoaderRef {
619
- getElements: () => {
620
- root: HTMLDivElement;
621
- loader: ScenaLoaderElements | undefined;
622
- };
637
+ getElements: () => ScenaVideoLoaderElements;
623
638
  }
624
639
 
625
640
  declare enum ScenaVideoProgressVariant {
@@ -758,14 +773,14 @@ interface UseProgressCircleReturnEvents {
758
773
  }
759
774
  /** DOM element references for the linear progress bar. */
760
775
  interface ScenaProgressLineElements {
761
- root: HTMLDivElement;
776
+ root: HTMLDivElement | null;
762
777
  track: HTMLDivElement;
763
778
  buffer: HTMLDivElement | null;
764
779
  progress: HTMLDivElement;
765
780
  }
766
781
  /** DOM element references for the circular progress indicator. */
767
782
  interface ScenaProgressCircleElements {
768
- root: SVGSVGElement;
783
+ root: SVGSVGElement | null;
769
784
  track: SVGCircleElement | null;
770
785
  buffer: SVGCircleElement | null;
771
786
  progress: SVGCircleElement | null;
@@ -823,9 +838,13 @@ interface ScenaVideoProgressProps {
823
838
  customClasses: Partial<ScenaVideoProgressComponentClasses>;
824
839
  customStyles: Partial<ScenaVideoProgressComponentStyles>;
825
840
  }
841
+ /** DOM elements exposed by the video progress component. */
842
+ interface ScenaVideoProgressElements {
843
+ root: ScenaProgressLineElements | ScenaProgressCircleElements | null;
844
+ }
826
845
  /** Component ref for the video progress bar. */
827
846
  interface ScenaVideoProgressRef {
828
- getElements: () => ScenaProgressLineElements | ScenaProgressCircleElements | null;
847
+ getElements: () => ScenaVideoProgressElements;
829
848
  }
830
849
 
831
850
  /** Custom CSS class overrides for the volume mute/unmute controls. */
@@ -854,15 +873,17 @@ interface ScenaVideoVolumeProps {
854
873
  customClasses: Partial<ScenaVideoVolumeComponentClasses>;
855
874
  customStyles: Partial<ScenaVideoVolumeComponentStyles>;
856
875
  }
876
+ /** DOM elements exposed by the volume control component. */
877
+ interface ScenaVideoVolumeElements {
878
+ root: HTMLDivElement | null;
879
+ unmuteButton: ScenaButtonElements | null;
880
+ unmuteIcon: ScenaIconElements | null;
881
+ muteButton: ScenaButtonElements | null;
882
+ muteIcon: ScenaIconElements | null;
883
+ }
857
884
  /** Component ref for the volume control widget. */
858
885
  interface ScenaVideoVolumeRef {
859
- getElements: () => {
860
- root: HTMLDivElement | null;
861
- unmuteButton: ScenaButtonElements | undefined;
862
- unmuteIcon: ScenaIconElements | undefined;
863
- muteButton: ScenaButtonElements | undefined;
864
- muteIcon: ScenaIconElements | undefined;
865
- };
886
+ getElements: () => ScenaVideoVolumeElements;
866
887
  }
867
888
 
868
889
  /** Return value of {@link useScenaOverrides}. */
@@ -1232,4 +1253,4 @@ declare const getScenaContext: () => ScenaContext;
1232
1253
  declare const setScenaContext: (context: ScenaContext) => ScenaContext;
1233
1254
 
1234
1255
  export { ComponentAriaHaspopup, ComponentAriaPressed, ComponentPlacement, ComponentPosition, ComponentShape, ComponentSize, OverrideLayer, ScenaButtonAriaHaspopup, ScenaButtonAriaPressed, ScenaButtonShape, ScenaButtonType, ScenaButtonVariant, ScenaCtaButtonPlacement, ScenaElement, ScenaEvent, ScenaVideoCrossOrigin, ScenaVideoPreload, ScenaVideoProgressVariant, ScenaVideoState, defineScenaElement, getScenaContext, getScenaElement, getScenaVideoContext, scenaProgressCircleThicknessMap, scenaProgressLineThicknessMap, setScenaContext, setScenaVideoContext, useEventEmitter, useProgressCircle, useProgressLine, useScena, useScenaConfig, useScenaOverrides, useScenaPreview, useScenaResponsive, useScenaVisibility, useVideoController };
1235
- export type { ComponentAriaProps, ComponentClasses, ComponentSnippet, ComponentSnippetReturn, ComponentStyles, ScenaApi, ScenaButtonComponentClasses, ScenaButtonComponentStyles, ScenaButtonElements, ScenaButtonEvents, ScenaButtonProps, ScenaButtonSnippets, ScenaCloseButtonComponentClasses, ScenaCloseButtonComponentStyles, ScenaCloseButtonProps, ScenaCloseButtonRef, ScenaComponents, ScenaConfig, ScenaConfigFeatures, ScenaConfigOverrides, ScenaContainerCustomClasses, ScenaContainerCustomStyles, ScenaContainerProps, ScenaContainerRef, ScenaContainerSnippets, ScenaContext, ScenaCtaButtonAdaptive, ScenaCtaButtonComponentClasses, ScenaCtaButtonComponentStyles, ScenaCtaButtonProps, ScenaCtaButtonRef, ScenaElementTag, ScenaEventEmitter, ScenaEventHandler, ScenaEventMap, ScenaFeatures, ScenaIconCustomClasses, ScenaIconCustomStyles, ScenaIconElements, ScenaIconProps, ScenaIconSnippets, ScenaInstance, ScenaLoaderCustomClasses, ScenaLoaderCustomStyles, ScenaLoaderElements, ScenaLoaderProps, ScenaOverrides, ScenaPreviewApi, ScenaPreviewConfig, ScenaProgressCircleComponentClasses, ScenaProgressCircleComponentStyles, ScenaProgressCircleElements, ScenaProgressCircleEvents, ScenaProgressCircleProps, ScenaProgressComponentThickness, ScenaProgressLineComponentClasses, ScenaProgressLineComponentStyles, ScenaProgressLineElements, ScenaProgressLineEvents, ScenaProgressLineProps, ScenaProgressThickness, ScenaProps, ScenaRef, ScenaResponsiveApi, ScenaResponsiveConfig, ScenaTarget, ScenaVideoCallbacks, ScenaVideoComponentClasses, ScenaVideoComponentStyles, ScenaVideoContainerCustomClasses, ScenaVideoContainerCustomStyles, ScenaVideoContainerProps, ScenaVideoContainerRef, ScenaVideoContainerSnippets, ScenaVideoContext, ScenaVideoControlsComponentAria, ScenaVideoControlsComponentClasses, ScenaVideoControlsComponentStyles, ScenaVideoControlsProps, ScenaVideoControlsRef, ScenaVideoData, ScenaVideoEventOptions, ScenaVideoEventOptionsWithError, ScenaVideoEventOptionsWithEvent, ScenaVideoLoaderComponentClasses, ScenaVideoLoaderComponentStyles, ScenaVideoLoaderProps, ScenaVideoLoaderRef, ScenaVideoMethods, ScenaVideoProgressComponentClasses, ScenaVideoProgressComponentStyles, ScenaVideoProgressComponentThickness, ScenaVideoProgressProps, ScenaVideoProgressRef, ScenaVideoProgressThickness, ScenaVideoProgressThicknessMap, ScenaVideoProps, ScenaVideoRef, ScenaVideoSnippets, ScenaVideoVolumeComponentAria, ScenaVideoVolumeComponentClasses, ScenaVideoVolumeComponentStyles, ScenaVideoVolumeProps, ScenaVideoVolumeRef, ScenaVisibilityApi, ScenaVisibilityConfig, UseProgressCircleEvents, UseProgressCircleProps, UseProgressCircleReturn, UseProgressCircleReturnEvents, UseProgressLineEvents, UseProgressLineProps, UseProgressLineReturn, UseProgressLineReturnEvents, UseScenaConfigReturns, UseScenaOverridesReturns, UseScenaPreviewOptions, UseScenaPreviewReturns, UseScenaResponsiveReturns, UseScenaReturns, UseScenaVisibilityReturns, UseVideoControllerOptions, UseVideoControllerReturns };
1256
+ export type { ComponentAriaProps, ComponentClasses, ComponentRef, ComponentSnippet, ComponentSnippetReturn, ComponentStyles, ScenaApi, ScenaButtonComponentClasses, ScenaButtonComponentStyles, ScenaButtonElements, ScenaButtonEvents, ScenaButtonProps, ScenaButtonSnippets, ScenaCloseButtonComponentClasses, ScenaCloseButtonComponentStyles, ScenaCloseButtonElements, ScenaCloseButtonProps, ScenaCloseButtonRef, ScenaComponents, ScenaConfig, ScenaConfigFeatures, ScenaConfigOverrides, ScenaContainerCustomClasses, ScenaContainerCustomStyles, ScenaContainerElements, ScenaContainerProps, ScenaContainerRef, ScenaContainerSnippets, ScenaContext, ScenaCtaButtonAdaptive, ScenaCtaButtonComponentClasses, ScenaCtaButtonComponentStyles, ScenaCtaButtonElements, ScenaCtaButtonProps, ScenaCtaButtonRef, ScenaElementTag, ScenaEventEmitter, ScenaEventHandler, ScenaEventMap, ScenaFeatures, ScenaIconCustomClasses, ScenaIconCustomStyles, ScenaIconElements, ScenaIconProps, ScenaIconSnippets, ScenaInstance, ScenaLoaderCustomClasses, ScenaLoaderCustomStyles, ScenaLoaderElements, ScenaLoaderProps, ScenaOverrides, ScenaPreviewApi, ScenaPreviewConfig, ScenaProgressCircleComponentClasses, ScenaProgressCircleComponentStyles, ScenaProgressCircleElements, ScenaProgressCircleEvents, ScenaProgressCircleProps, ScenaProgressComponentThickness, ScenaProgressLineComponentClasses, ScenaProgressLineComponentStyles, ScenaProgressLineElements, ScenaProgressLineEvents, ScenaProgressLineProps, ScenaProgressThickness, ScenaProps, ScenaRef, ScenaResponsiveApi, ScenaResponsiveConfig, ScenaTarget, ScenaVideoCallbacks, ScenaVideoComponentClasses, ScenaVideoComponentStyles, ScenaVideoContainerCustomClasses, ScenaVideoContainerCustomStyles, ScenaVideoContainerElements, ScenaVideoContainerProps, ScenaVideoContainerRef, ScenaVideoContainerSnippets, ScenaVideoContext, ScenaVideoControlsComponentAria, ScenaVideoControlsComponentClasses, ScenaVideoControlsComponentStyles, ScenaVideoControlsElements, ScenaVideoControlsProps, ScenaVideoControlsRef, ScenaVideoData, ScenaVideoElements, ScenaVideoEventOptions, ScenaVideoEventOptionsWithError, ScenaVideoEventOptionsWithEvent, ScenaVideoLoaderComponentClasses, ScenaVideoLoaderComponentStyles, ScenaVideoLoaderElements, ScenaVideoLoaderProps, ScenaVideoLoaderRef, ScenaVideoMethods, ScenaVideoProgressComponentClasses, ScenaVideoProgressComponentStyles, ScenaVideoProgressComponentThickness, ScenaVideoProgressElements, ScenaVideoProgressProps, ScenaVideoProgressRef, ScenaVideoProgressThickness, ScenaVideoProgressThicknessMap, ScenaVideoProps, ScenaVideoRef, ScenaVideoSnippets, ScenaVideoVolumeComponentAria, ScenaVideoVolumeComponentClasses, ScenaVideoVolumeComponentStyles, ScenaVideoVolumeElements, ScenaVideoVolumeProps, ScenaVideoVolumeRef, ScenaVisibilityApi, ScenaVisibilityConfig, UseProgressCircleEvents, UseProgressCircleProps, UseProgressCircleReturn, UseProgressCircleReturnEvents, UseProgressLineEvents, UseProgressLineProps, UseProgressLineReturn, UseProgressLineReturnEvents, UseScenaConfigReturns, UseScenaOverridesReturns, UseScenaPreviewOptions, UseScenaPreviewReturns, UseScenaResponsiveReturns, UseScenaReturns, UseScenaVisibilityReturns, UseVideoControllerOptions, UseVideoControllerReturns };