@useloops/design-system 1.4.617 → 1.4.618
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useEffect as i,useCallback as n,useImperativeHandle as a,memo as s}from"react";import{styled as m,Stack as l}from"@mui/material";import d from"@use-it/event-listener";import{
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useEffect as i,useCallback as n,useImperativeHandle as a,memo as s}from"react";import{styled as m,Stack as l}from"@mui/material";import d from"@use-it/event-listener";import{mergeSx as p}from"merge-sx";import{normaliseFloat as u}from"../../../utils/normaliseFloat.js";import"../../../utils/formValidation/misc.js";import"../../BrandCore/Icon/Icon.js";import"../../BrandCore/primitiveVariables.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Typography/Typography.js";import"../../WebCore/Badge/Badge.js";import"../../WebCore/Breadcrumb/Breadcrumb.js";import"../../WebCore/Button/Button.js";import"../../WebCore/ButtonBase/ButtonBase.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"@mui/icons-material";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import"../../WebCore/FormGenerator/FormGenerator.js";import"../../WebCore/GridOverlay/GridOverlay.js";import"html-react-parser";import"../../WebCore/IconButton/IconButton.js";import"../../WebCore/IconButtonBase/IconButtonBase.js";import"../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../WebCore/Image/Image.js";import"../../WebCore/KeyValueLabel/KeyValueLabel.js";import"../../WebCore/Label/Label.js";import"../../WebCore/Likert/LikertContainer.js";import"../../WebCore/Likert/LikertLabel.js";import"../../WebCore/Likert/LikertRadio.js";import"../../WebCore/Link/StyledLink.js";import"@lottiefiles/dotlottie-react";import"../../WebCore/LoopsAiButton/LoopsAiButton.js";import"markdown-to-jsx";import"material-ui-popup-state/hooks";import b from"../../WebCore/Surface/Surface.js";import"../../WebCore/Menu/MenuItem.js";import"../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js";import"../../WebCore/ModalLayout/_partials/ModalContentWrapper.js";import"../../WebCore/NavigationButton/NavigationButton.js";import"../../WebCore/Nudge/NudgeButton.js";import"../../WebCore/NumberField/NumberField.js";import"../../BrandCore/colorRamps.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/Pill/StyledPill.js";import"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/utils/autocomplete.styles.js";import"../../WebCore/Select/AutocompleteListbox.js";import"../../WebCore/Select/StyledAutocomplete.js";import"../../WebCore/Select/SelectItem.js";import"../../WebCore/Select/StyledSelect.js";import"../../WebCore/RankItem/RankItemContainer.js";import"../../WebCore/RankItem/RankItemLabel.js";import"../../WebCore/SortableList/SortableList.js";import"../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js";import"@tiptap/extension-placeholder";import"@tiptap/starter-kit";import"mui-tiptap";import"../../WebCore/RichTextField/StyledRichTextEditor.js";import"../../WebCore/Skeleton/Skeleton.js";import"../../WebCore/Slider/StyledSlider.js";import"../../WebCore/StarRating/StarRating.js";import"../../WebCore/Switch/StyledSwitch.js";import"../../WebCore/Textarea/Textarea.js";import"../../WebCore/TrialCard/TrialCardContainers.js";import"../../WebCore/TrialCard/TrialPill.js";import"../../WebCore/UserMenu/UserMenuButton.js";import"../../WebCore/VideoModal/VideoModal.js";import"../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../WebCore/ButtonTabGroup/_partials/TabButton.js";import c from"./components/ActionButton/ActionButton.js";import C from"./components/Timeline/Timeline.js";const f=m(b)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(e.custom.padding.md),borderColor:e.custom.palette.stroke.light,borderWidth:1,gap:e.spacing(e.custom.padding.sm),borderStyle:"solid",flexDirection:"column"})),g=m(l)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),j=s(t(({id:t,videoElement:s,initialEndTime:m=0,initialCurrentTime:l=0,initialMuted:b,initialVolume:j,markers:y,options:T,slots:W,events:{onEnd:B,onPlay:k,onSeekEnd:v,onSeeking:S,onSeekStart:h,onTimeUpdate:I,onPause:E,onVolumeChange:L,onVolumeMute:x,onRestart:P,onFirstPlay:w,onFirstEnded:M,onReset:R}={},videoSeekTime:A,slotProps:V},F)=>{const[G,D]=o(!1),[N,_]=o([]),O={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...T},[{seeking:z,endTime:U,currentTime:K,playing:q,buffering:H,loaded:J,ended:Q,volume:X,muted:Y,startTime:Z,firstPlay:$,firstEnded:ee},re]=o({startTime:u(O.normaliseTime?l:0),endTime:u(O.normaliseTime?m:s.duration),currentTime:u(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:j||1,muted:b||!1,buffering:!1});i(()=>{if(s.muted=Y,s.volume=X,O.normaliseTime&&(void 0===m||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls.tsx");return()=>{be()}},[]),i(()=>{re(e=>({...e,startTime:u(O.normaliseTime?l:0),endTime:u(O.normaliseTime?m:s.duration),currentTime:u(l??0)})),s.currentTime=u(l??0)},[l,m]);const te=n(()=>{re(e=>({...e,playing:!1,ended:!0,...!ee&&{firstEnded:!0}})),B&&B(),!ee&&M&&M()},[ee]);i(()=>{if(!s||null==A)return;(async()=>{const e=!s.paused,r=A===U;re(e=>({...e,playing:!1,currentTime:u(A)})),await new Promise(e=>{const r=()=>{s.removeEventListener("seeked",r),e()};s.addEventListener("seeked",r),setTimeout(e,500)}),re(e=>({...e,currentTime:u(A)})),await new Promise(e=>setTimeout(e,50)),re(t=>({...t,playing:e,currentTime:u(r?A-.001:A+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[A,s]);const oe=n(e=>{re(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),Y!==e.target?.muted&&x&&x(!Y),X!==e.target?.volume&&L&&L(X)},[Y,X]),ie=n(()=>{const e=u(s.currentTime)>=U&&U!==u(s.duration)&&!Q,r=u(s.currentTime)>=U&&U===u(s.duration)&&!Q&&!q;(e||r)&&(s.pause(),s.dispatchEvent(new Event("ended"))),re(e=>({...e,currentTime:u(s.currentTime)})),I&&I(u(s.currentTime))},[U,Q,q]),ne=n(()=>{re(e=>({...e,playing:!1})),E&&E()},[K]),ae=n(()=>{re(e=>({...e,playing:!0,ended:!1,...!O?.disableBufferingEvents&&{buffering:!1},...!$&&{firstPlay:!0}})),!$&&w&&w(),k&&k()},[$,O?.disableBufferingEvents]),se=n(()=>{O?.disableBufferingEvents||re(e=>({...e,buffering:!0}))},[O?.disableBufferingEvents]),me=n(()=>{O?.disableBufferingEvents||re(e=>({...e,buffering:!1}))},[H,O?.disableBufferingEvents]),le=n(()=>{if(O?.disableBufferingEvents)return;const e=[];for(let r=0;r<s.buffered.length;r++){const t=s.buffered.start(r),o=s.buffered.end(r);if(o>=Z&&t<=U){const r=Math.max(t,Z),i=Math.min(o,U);e.push({start:r-Z,end:i-Z,startPercent:(r-Z)/(U-Z)*100,widthPercent:(i-r)/(U-Z)*100})}}_(e)},[z,U,K,q,H,J,Q,X,Y,Z,N,O?.disableBufferingEvents]),de=n(async e=>{q&&be(),s.currentTime=Z,e&&await ue(),P&&P()},[q,K,Z,U,Q]),pe=n(async()=>{q&&be(),s.currentTime=Z,re(e=>({...e,startTime:u(O.normaliseTime?l:0),endTime:u(O.normaliseTime?m:s.duration),currentTime:u(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),R&&R()},[q,K,Z,U,Q,l,m]),ue=async()=>{await s.play()},be=()=>{s.pause()},ce=n(e=>{s.currentTime=u(e),re(r=>({...r,currentTime:u(e),ended:!1,seeking:!0,...!O?.disableBufferingEvents&&{buffering:!1},firstPlay:!$||r.firstPlay,bufferProgress:e})),S&&S(e),!$&&w&&w()},[H,$,O?.disableBufferingEvents]),Ce=n(async()=>{document.hidden?q&&!s.paused?(D(!0),be()):D(!1):(G&&!q&&await ue(),D(!1))},[q,G,be,ue,s]),fe=n(e=>{e&&s.pause(),re(e=>({...e,seeking:!0})),h&&h()},[Q]),ge=n(async(e,r,t)=>{r&&(s.currentTime=r),e&&!Q&&await s.play(),t&&q&&s.pause(),re(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),v&&v(r)},[q,Q,H,z]);return d("visibilitychange",Ce,document),d("pause",ne,s),d("playing",ae,s),d("timeupdate",ie,s),d("ended",te,s),d("volumechange",oe,s),d("waiting",se,s),d("canplay",me,s),d("progress",le,s),a(F,()=>({play:ue,pause:be,restart:de,reset:pe,seek:(e,r,t)=>ge(r,e,t),videoState:{seeking:z,endTime:U,currentTime:K,playing:q,buffering:H,loaded:J,ended:Q,volume:X,firstPlay:$,firstEnded:ee,muted:Y,startTime:Z}})),e(f,{variation:"raised",borderradius:"xl",id:t,sx:p({minWidth:288},V?.paperContainer?.sx),children:[e(g,{...O?.rtl&&{dir:"rtl"},children:[r(c,{seeking:z,playing:q,ended:Q,buffering:H,handleAction:async()=>{Q?await de(!0):q?be():await ue()}}),r(C,{handleSeeking:ce,handleSeekEnd:ge,handleSeekStart:fe,ended:Q,marker:W?.marker,markers:y,markerIndicatorMode:O.markerIndicatorMode,markerIndicatorSize:O.markerIndicatorSize,markerIndicator:O.markerIndicator,startTime:O.normaliseTime?Z:0,currentTime:K,endTime:U,playing:q,bufferRanges:N,buffering:H,volume:X,muted:Y,volumeControls:O.volumeControls,volumeControlsType:O.volumeControlsType,handleVolumeMute:()=>{s.muted=!Y},handleVolumeChange:e=>{s.volume=e,Y&&(s.muted=!1)}})]}),W?.bottom]})}));export{j as default};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { FunctionComponent, ReactElement } from 'react';
|
|
3
|
+
import { SurfaceProps } from '../../WebCore/Surface/Surface.js';
|
|
3
4
|
import { MarkerComponentProps } from './components/Timeline/components/Markers/Markers.js';
|
|
4
5
|
|
|
5
6
|
type Marker = {
|
|
@@ -24,6 +25,9 @@ type VideoControlsProps = {
|
|
|
24
25
|
marker?: FunctionComponent<MarkerComponentProps>;
|
|
25
26
|
bottom?: ReactElement;
|
|
26
27
|
};
|
|
28
|
+
slotProps?: {
|
|
29
|
+
paperContainer?: SurfaceProps;
|
|
30
|
+
};
|
|
27
31
|
initialMuted?: boolean;
|
|
28
32
|
initialVolume?: number;
|
|
29
33
|
initialCurrentTime?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("@use-it/event-listener"),a=require("../../../utils/normaliseFloat.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Typography/Typography.js"),require("merge-sx"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../WebCore/Button/Button.js"),require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.js"),require("../../WebCore/KeyValueLabel/KeyValueLabel.js"),require("../../WebCore/Label/Label.js"),require("../../WebCore/Likert/LikertContainer.js"),require("../../WebCore/Likert/LikertLabel.js"),require("../../WebCore/Likert/LikertRadio.js"),require("../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks");var o=require("../../WebCore/Surface/Surface.js");require("../../WebCore/Menu/MenuItem.js"),require("../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../WebCore/NavigationButton/NavigationButton.js"),require("../../WebCore/Nudge/NudgeButton.js"),require("../../WebCore/NumberField/NumberField.js"),require("../../BrandCore/colorRamps.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/RankItemContainer.js"),require("../../WebCore/RankItem/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js"),require("../../WebCore/Skeleton/Skeleton.js"),require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js"),require("../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../WebCore/ButtonTabGroup/_partials/TabButton.js");var n=require("./components/ActionButton/ActionButton.js"),s=require("./components/Timeline/Timeline.js");function l(e){return e&&e.__esModule?e:{default:e}}var u=l(i);const d=t.styled(o)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(e.custom.padding.md),borderColor:e.custom.palette.stroke.light,borderWidth:1,gap:e.spacing(e.custom.padding.sm),borderStyle:"solid",flexDirection:"column"})),m=t.styled(t.Stack)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),c=r.forwardRef(({id:t,videoElement:i,initialEndTime:o=0,initialCurrentTime:l=0,initialMuted:c,initialVolume:b,markers:p,options:C,slots:f,events:{onEnd:g,onPlay:q,onSeekEnd:j,onSeeking:y,onSeekStart:T,onTimeUpdate:k,onPause:W,onVolumeChange:v,onVolumeMute:B,onRestart:S,onFirstPlay:h,onFirstEnded:E,onReset:I}={},videoSeekTime:F},L)=>{const[x,P]=r.useState(!1),[w,M]=r.useState([]),R={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...C},[{seeking:A,endTime:V,currentTime:G,playing:D,buffering:_,loaded:N,ended:O,volume:z,muted:U,startTime:K,firstPlay:H,firstEnded:J},Q]=r.useState({startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:b||1,muted:c||!1,buffering:!1});r.useEffect(()=>{if(i.muted=U,i.volume=z,R.normaliseTime&&(void 0===o||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls.tsx");return()=>{se()}},[]),r.useEffect(()=>{Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0)})),i.currentTime=a.normaliseFloat(l??0)},[l,o]);const X=r.useCallback(()=>{Q(e=>({...e,playing:!1,ended:!0,...!J&&{firstEnded:!0}})),g&&g(),!J&&E&&E()},[J]);r.useEffect(()=>{if(!i||null==F)return;(async()=>{const e=!i.paused,r=F===V;Q(e=>({...e,playing:!1,currentTime:a.normaliseFloat(F)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Q(e=>({...e,currentTime:a.normaliseFloat(F)})),await new Promise(e=>setTimeout(e,50)),Q(t=>({...t,playing:e,currentTime:a.normaliseFloat(r?F-.001:F+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[F,i]);const Y=r.useCallback(e=>{Q(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),U!==e.target?.muted&&B&&B(!U),z!==e.target?.volume&&v&&v(z)},[U,z]),Z=r.useCallback(()=>{const e=a.normaliseFloat(i.currentTime)>=V&&V!==a.normaliseFloat(i.duration)&&!O,r=a.normaliseFloat(i.currentTime)>=V&&V===a.normaliseFloat(i.duration)&&!O&&!D;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Q(e=>({...e,currentTime:a.normaliseFloat(i.currentTime)})),k&&k(a.normaliseFloat(i.currentTime))},[V,O,D]),$=r.useCallback(()=>{Q(e=>({...e,playing:!1})),W&&W()},[G]),ee=r.useCallback(()=>{Q(e=>({...e,playing:!0,ended:!1,...!R?.disableBufferingEvents&&{buffering:!1},...!H&&{firstPlay:!0}})),!H&&h&&h(),q&&q()},[H,R?.disableBufferingEvents]),re=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!0}))},[R?.disableBufferingEvents]),te=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!1}))},[_,R?.disableBufferingEvents]),ie=r.useCallback(()=>{if(R?.disableBufferingEvents)return;const e=[];for(let r=0;r<i.buffered.length;r++){const t=i.buffered.start(r),a=i.buffered.end(r);if(a>=K&&t<=V){const r=Math.max(t,K),i=Math.min(a,V);e.push({start:r-K,end:i-K,startPercent:(r-K)/(V-K)*100,widthPercent:(i-r)/(V-K)*100})}}M(e)},[A,V,G,D,_,N,O,z,U,K,w,R?.disableBufferingEvents]),ae=r.useCallback(async e=>{D&&se(),i.currentTime=K,e&&await ne(),S&&S()},[D,G,K,V,O]),oe=r.useCallback(async()=>{D&&se(),i.currentTime=K,Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),I&&I()},[D,G,K,V,O,l,o]),ne=async()=>{await i.play()},se=()=>{i.pause()},le=r.useCallback(e=>{i.currentTime=a.normaliseFloat(e),Q(r=>({...r,currentTime:a.normaliseFloat(e),ended:!1,seeking:!0,...!R?.disableBufferingEvents&&{buffering:!1},firstPlay:!H||r.firstPlay,bufferProgress:e})),y&&y(e),!H&&h&&h()},[_,H,R?.disableBufferingEvents]),ue=r.useCallback(async()=>{document.hidden?D&&!i.paused?(P(!0),se()):P(!1):(x&&!D&&await ne(),P(!1))},[D,x,se,ne,i]),de=r.useCallback(e=>{e&&i.pause(),Q(e=>({...e,seeking:!0})),T&&T()},[O]),me=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!O&&await i.play(),t&&D&&i.pause(),Q(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),j&&j(r)},[D,O,_,A]);return u.default("visibilitychange",ue,document),u.default("pause",$,i),u.default("playing",ee,i),u.default("timeupdate",Z,i),u.default("ended",X,i),u.default("volumechange",Y,i),u.default("waiting",re,i),u.default("canplay",te,i),u.default("progress",ie,i),r.useImperativeHandle(L,()=>({play:ne,pause:se,restart:ae,reset:oe,seek:(e,r,t)=>me(r,e,t),videoState:{seeking:A,endTime:V,currentTime:G,playing:D,buffering:_,loaded:N,ended:O,volume:z,firstPlay:H,firstEnded:J,muted:U,startTime:K}})),e.jsxs(d,{variation:"raised",borderradius:"xl",id:t,children:[e.jsxs(m,{...R?.rtl&&{dir:"rtl"},children:[e.jsx(n,{seeking:A,playing:D,ended:O,buffering:_,handleAction:async()=>{O?await ae(!0):D?se():await ne()}}),e.jsx(s,{handleSeeking:le,handleSeekEnd:me,handleSeekStart:de,ended:O,marker:f?.marker,markers:p,markerIndicatorMode:R.markerIndicatorMode,markerIndicatorSize:R.markerIndicatorSize,markerIndicator:R.markerIndicator,startTime:R.normaliseTime?K:0,currentTime:G,endTime:V,playing:D,bufferRanges:w,buffering:_,volume:z,muted:U,volumeControls:R.volumeControls,volumeControlsType:R.volumeControlsType,handleVolumeMute:()=>{i.muted=!U},handleVolumeChange:e=>{i.volume=e,U&&(i.muted=!1)}})]}),f?.bottom]})});var b=r.memo(c);module.exports=b;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("@use-it/event-listener"),a=require("merge-sx"),o=require("../../../utils/normaliseFloat.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Typography/Typography.js"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../WebCore/Button/Button.js"),require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.js"),require("../../WebCore/KeyValueLabel/KeyValueLabel.js"),require("../../WebCore/Label/Label.js"),require("../../WebCore/Likert/LikertContainer.js"),require("../../WebCore/Likert/LikertLabel.js"),require("../../WebCore/Likert/LikertRadio.js"),require("../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks");var n=require("../../WebCore/Surface/Surface.js");require("../../WebCore/Menu/MenuItem.js"),require("../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../WebCore/NavigationButton/NavigationButton.js"),require("../../WebCore/Nudge/NudgeButton.js"),require("../../WebCore/NumberField/NumberField.js"),require("../../BrandCore/colorRamps.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/RankItemContainer.js"),require("../../WebCore/RankItem/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js"),require("../../WebCore/Skeleton/Skeleton.js"),require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js"),require("../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../WebCore/ButtonTabGroup/_partials/TabButton.js");var s=require("./components/ActionButton/ActionButton.js"),l=require("./components/Timeline/Timeline.js");function u(e){return e&&e.__esModule?e:{default:e}}var d=u(i);const m=t.styled(n)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(e.custom.padding.md),borderColor:e.custom.palette.stroke.light,borderWidth:1,gap:e.spacing(e.custom.padding.sm),borderStyle:"solid",flexDirection:"column"})),c=t.styled(t.Stack)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),b=r.forwardRef(({id:t,videoElement:i,initialEndTime:n=0,initialCurrentTime:u=0,initialMuted:b,initialVolume:p,markers:C,options:f,slots:g,events:{onEnd:q,onPlay:j,onSeekEnd:y,onSeeking:T,onSeekStart:W,onTimeUpdate:k,onPause:v,onVolumeChange:B,onVolumeMute:S,onRestart:h,onFirstPlay:E,onFirstEnded:I,onReset:F}={},videoSeekTime:x,slotProps:L},P)=>{const[w,M]=r.useState(!1),[R,A]=r.useState([]),V={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...f},[{seeking:G,endTime:D,currentTime:_,playing:N,buffering:O,loaded:z,ended:U,volume:K,muted:H,startTime:J,firstPlay:Q,firstEnded:X},Y]=r.useState({startTime:o.normaliseFloat(V.normaliseTime?u:0),endTime:o.normaliseFloat(V.normaliseTime?n:i.duration),currentTime:o.normaliseFloat(u??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:p||1,muted:b||!1,buffering:!1});r.useEffect(()=>{if(i.muted=H,i.volume=K,V.normaliseTime&&(void 0===n||void 0===u))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls.tsx");return()=>{ue()}},[]),r.useEffect(()=>{Y(e=>({...e,startTime:o.normaliseFloat(V.normaliseTime?u:0),endTime:o.normaliseFloat(V.normaliseTime?n:i.duration),currentTime:o.normaliseFloat(u??0)})),i.currentTime=o.normaliseFloat(u??0)},[u,n]);const Z=r.useCallback(()=>{Y(e=>({...e,playing:!1,ended:!0,...!X&&{firstEnded:!0}})),q&&q(),!X&&I&&I()},[X]);r.useEffect(()=>{if(!i||null==x)return;(async()=>{const e=!i.paused,r=x===D;Y(e=>({...e,playing:!1,currentTime:o.normaliseFloat(x)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Y(e=>({...e,currentTime:o.normaliseFloat(x)})),await new Promise(e=>setTimeout(e,50)),Y(t=>({...t,playing:e,currentTime:o.normaliseFloat(r?x-.001:x+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[x,i]);const $=r.useCallback(e=>{Y(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),H!==e.target?.muted&&S&&S(!H),K!==e.target?.volume&&B&&B(K)},[H,K]),ee=r.useCallback(()=>{const e=o.normaliseFloat(i.currentTime)>=D&&D!==o.normaliseFloat(i.duration)&&!U,r=o.normaliseFloat(i.currentTime)>=D&&D===o.normaliseFloat(i.duration)&&!U&&!N;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Y(e=>({...e,currentTime:o.normaliseFloat(i.currentTime)})),k&&k(o.normaliseFloat(i.currentTime))},[D,U,N]),re=r.useCallback(()=>{Y(e=>({...e,playing:!1})),v&&v()},[_]),te=r.useCallback(()=>{Y(e=>({...e,playing:!0,ended:!1,...!V?.disableBufferingEvents&&{buffering:!1},...!Q&&{firstPlay:!0}})),!Q&&E&&E(),j&&j()},[Q,V?.disableBufferingEvents]),ie=r.useCallback(()=>{V?.disableBufferingEvents||Y(e=>({...e,buffering:!0}))},[V?.disableBufferingEvents]),ae=r.useCallback(()=>{V?.disableBufferingEvents||Y(e=>({...e,buffering:!1}))},[O,V?.disableBufferingEvents]),oe=r.useCallback(()=>{if(V?.disableBufferingEvents)return;const e=[];for(let r=0;r<i.buffered.length;r++){const t=i.buffered.start(r),a=i.buffered.end(r);if(a>=J&&t<=D){const r=Math.max(t,J),i=Math.min(a,D);e.push({start:r-J,end:i-J,startPercent:(r-J)/(D-J)*100,widthPercent:(i-r)/(D-J)*100})}}A(e)},[G,D,_,N,O,z,U,K,H,J,R,V?.disableBufferingEvents]),ne=r.useCallback(async e=>{N&&ue(),i.currentTime=J,e&&await le(),h&&h()},[N,_,J,D,U]),se=r.useCallback(async()=>{N&&ue(),i.currentTime=J,Y(e=>({...e,startTime:o.normaliseFloat(V.normaliseTime?u:0),endTime:o.normaliseFloat(V.normaliseTime?n:i.duration),currentTime:o.normaliseFloat(u??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),F&&F()},[N,_,J,D,U,u,n]),le=async()=>{await i.play()},ue=()=>{i.pause()},de=r.useCallback(e=>{i.currentTime=o.normaliseFloat(e),Y(r=>({...r,currentTime:o.normaliseFloat(e),ended:!1,seeking:!0,...!V?.disableBufferingEvents&&{buffering:!1},firstPlay:!Q||r.firstPlay,bufferProgress:e})),T&&T(e),!Q&&E&&E()},[O,Q,V?.disableBufferingEvents]),me=r.useCallback(async()=>{document.hidden?N&&!i.paused?(M(!0),ue()):M(!1):(w&&!N&&await le(),M(!1))},[N,w,ue,le,i]),ce=r.useCallback(e=>{e&&i.pause(),Y(e=>({...e,seeking:!0})),W&&W()},[U]),be=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!U&&await i.play(),t&&N&&i.pause(),Y(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),y&&y(r)},[N,U,O,G]);return d.default("visibilitychange",me,document),d.default("pause",re,i),d.default("playing",te,i),d.default("timeupdate",ee,i),d.default("ended",Z,i),d.default("volumechange",$,i),d.default("waiting",ie,i),d.default("canplay",ae,i),d.default("progress",oe,i),r.useImperativeHandle(P,()=>({play:le,pause:ue,restart:ne,reset:se,seek:(e,r,t)=>be(r,e,t),videoState:{seeking:G,endTime:D,currentTime:_,playing:N,buffering:O,loaded:z,ended:U,volume:K,firstPlay:Q,firstEnded:X,muted:H,startTime:J}})),e.jsxs(m,{variation:"raised",borderradius:"xl",id:t,sx:a.mergeSx({minWidth:288},L?.paperContainer?.sx),children:[e.jsxs(c,{...V?.rtl&&{dir:"rtl"},children:[e.jsx(s,{seeking:G,playing:N,ended:U,buffering:O,handleAction:async()=>{U?await ne(!0):N?ue():await le()}}),e.jsx(l,{handleSeeking:de,handleSeekEnd:be,handleSeekStart:ce,ended:U,marker:g?.marker,markers:C,markerIndicatorMode:V.markerIndicatorMode,markerIndicatorSize:V.markerIndicatorSize,markerIndicator:V.markerIndicator,startTime:V.normaliseTime?J:0,currentTime:_,endTime:D,playing:N,bufferRanges:R,buffering:O,volume:K,muted:H,volumeControls:V.volumeControls,volumeControlsType:V.volumeControlsType,handleVolumeMute:()=>{i.muted=!H},handleVolumeChange:e=>{i.volume=e,H&&(i.muted=!1)}})]}),g?.bottom]})});var p=r.memo(b);module.exports=p;
|