@useloops/design-system/dist/esm/systems/Platform/VideoControls/VideoControls.js

The official React based Loops design system

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{normaliseFloat as p}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"merge-sx";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/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 u 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 c from"./components/ActionButton/ActionButton.js";import b from"./components/Timeline/Timeline.js";const f=m(u)(({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=m(l)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),g=s(t(({id:t,videoElement:s,initialEndTime:m=0,initialCurrentTime:l=0,initialMuted:u,initialVolume:g,markers:j,options:y,slots:T,events:{onEnd:W,onPlay:k,onSeekEnd:v,onSeeking:B,onSeekStart:S,onTimeUpdate:h,onPause:I,onVolumeChange:E,onVolumeMute:L,onRestart:P,onFirstPlay:x,onFirstEnded:w,onReset:M}={},videoSeekTime:R},A)=>{const[F,V]=o(!1),[D,G]=o([]),N={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...y},[{seeking:O,endTime:z,currentTime:U,playing:_,buffering:q,loaded:H,ended:J,volume:K,muted:Q,startTime:X,firstPlay:Y,firstEnded:Z},$]=o({startTime:p(N.normaliseTime?l:0),endTime:p(N.normaliseTime?m:s.duration),currentTime:p(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:g||1,muted:u||!1,buffering:!1});i(()=>{if(s.muted=Q,s.volume=K,N.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()=>{pe()}},[]),i(()=>{$(e=>({...e,startTime:p(N.normaliseTime?l:0),endTime:p(N.normaliseTime?m:s.duration),currentTime:p(l??0)})),s.currentTime=p(l??0)},[l,m]);const ee=n(()=>{$(e=>({...e,playing:!1,ended:!0,...!Z&&{firstEnded:!0}})),W&&W(),!Z&&w&&w()},[Z]);i(()=>{if(!s||null==R)return;(async()=>{const e=!s.paused,r=R===z;$(e=>({...e,playing:!1,currentTime:p(R)})),await new Promise(e=>{const r=()=>{s.removeEventListener("seeked",r),e()};s.addEventListener("seeked",r),setTimeout(e,500)}),$(e=>({...e,currentTime:p(R)})),await new Promise(e=>setTimeout(e,50)),$(t=>({...t,playing:e,currentTime:p(r?R-.001:R+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[R,s]);const re=n(e=>{$(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),Q!==e.target?.muted&&L&&L(!Q),K!==e.target?.volume&&E&&E(K)},[Q,K]),te=n(()=>{const e=p(s.currentTime)>=z&&z!==p(s.duration)&&!J,r=p(s.currentTime)>=z&&z===p(s.duration)&&!J&&!_;(e||r)&&(s.pause(),s.dispatchEvent(new Event("ended"))),$(e=>({...e,currentTime:p(s.currentTime)})),h&&h(p(s.currentTime))},[z,J,_]),oe=n(()=>{$(e=>({...e,playing:!1})),I&&I()},[U]),ie=n(()=>{$(e=>({...e,playing:!0,ended:!1,...!N?.disableBufferingEvents&&{buffering:!1},...!Y&&{firstPlay:!0}})),!Y&&x&&x(),k&&k()},[Y,N?.disableBufferingEvents]),ne=n(()=>{N?.disableBufferingEvents||$(e=>({...e,buffering:!0}))},[N?.disableBufferingEvents]),ae=n(()=>{N?.disableBufferingEvents||$(e=>({...e,buffering:!1}))},[q,N?.disableBufferingEvents]),se=n(()=>{if(N?.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>=X&&t<=z){const r=Math.max(t,X),i=Math.min(o,z);e.push({start:r-X,end:i-X,startPercent:(r-X)/(z-X)*100,widthPercent:(i-r)/(z-X)*100})}}G(e)},[O,z,U,_,q,H,J,K,Q,X,D,N?.disableBufferingEvents]),me=n(async e=>{_&&pe(),s.currentTime=X,e&&await de(),P&&P()},[_,U,X,z,J]),le=n(async()=>{_&&pe(),s.currentTime=X,$(e=>({...e,startTime:p(N.normaliseTime?l:0),endTime:p(N.normaliseTime?m:s.duration),currentTime:p(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),M&&M()},[_,U,X,z,J,l,m]),de=async()=>{await s.play()},pe=()=>{s.pause()},ue=n(e=>{s.currentTime=p(e),$(r=>({...r,currentTime:p(e),ended:!1,seeking:!0,...!N?.disableBufferingEvents&&{buffering:!1},firstPlay:!Y||r.firstPlay,bufferProgress:e})),B&&B(e),!Y&&x&&x()},[q,Y,N?.disableBufferingEvents]),ce=n(async()=>{document.hidden?_&&!s.paused?(V(!0),pe()):V(!1):(F&&!_&&await de(),V(!1))},[_,F,pe,de,s]),be=n(e=>{e&&s.pause(),$(e=>({...e,seeking:!0})),S&&S()},[J]),fe=n(async(e,r,t)=>{r&&(s.currentTime=r),e&&!J&&await s.play(),t&&_&&s.pause(),$(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),v&&v(r)},[_,J,q,O]);return d("visibilitychange",ce,document),d("pause",oe,s),d("playing",ie,s),d("timeupdate",te,s),d("ended",ee,s),d("volumechange",re,s),d("waiting",ne,s),d("canplay",ae,s),d("progress",se,s),a(A,()=>({play:de,pause:pe,restart:me,reset:le,seek:(e,r,t)=>fe(r,e,t),videoState:{seeking:O,endTime:z,currentTime:U,playing:_,buffering:q,loaded:H,ended:J,volume:K,firstPlay:Y,firstEnded:Z,muted:Q,startTime:X}})),e(f,{variation:"raised",borderradius:"xl",id:t,children:[e(C,{...N?.rtl&&{dir:"rtl"},children:[r(c,{seeking:O,playing:_,ended:J,buffering:q,handleAction:async()=>{J?await me(!0):_?pe():await de()}}),r(b,{handleSeeking:ue,handleSeekEnd:fe,handleSeekStart:be,ended:J,marker:T?.marker,markers:j,markerIndicatorMode:N.markerIndicatorMode,markerIndicatorSize:N.markerIndicatorSize,markerIndicator:N.markerIndicator,startTime:N.normaliseTime?X:0,currentTime:U,endTime:z,playing:_,bufferRanges:D,buffering:q,volume:K,muted:Q,volumeControls:N.volumeControls,volumeControlsType:N.volumeControlsType,handleVolumeMute:()=>{s.muted=!Q},handleVolumeChange:e=>{s.volume=e,Q&&(s.muted=!1)}})]}),T?.bottom]})}));export{g as default};