@useloops/design-system 1.4.685 → 1.4.687
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/esm/systems/Platform/VideoControls2/VideoControls2.js +1 -1
- package/dist/esm/systems/Platform/VideoControls2/components/Timeline/Timeline.js +1 -1
- package/dist/esm/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js +1 -1
- package/dist/esm/systems/WebCore/Pill/StyledPill.js +1 -1
- package/dist/systems/Platform/VideoControls2/VideoControls2.d.ts +2 -0
- package/dist/systems/Platform/VideoControls2/VideoControls2.js +1 -1
- package/dist/systems/Platform/VideoControls2/components/Timeline/Timeline.js +1 -1
- package/dist/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js +1 -1
- package/dist/systems/WebCore/Pill/StyledPill.js +1 -1
- package/package.json +1 -1
|
@@ -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{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"../../BrandCore/textures.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/SelectItem/SelectItem.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Animations/FadeIn.js";import"../../WebCore/Text/Text.js";import"@mui/icons-material";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.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/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../WebCore/ButtonTabGroup/_partials/TabButton.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";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/KbdGroup/Kbd.js";import"../../WebCore/KbdGroup/KbdGroup.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 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/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 C=m(u)(({theme:e})=>({display:"flex",flex:1,padding:"2px",gap:e.spacing(e.custom.padding.sm),flexDirection:"column"})),f=m(l)({alignItems:"center",justifyContent:"start",flexDirection:"row",flex:1}),g=s(t(({id:t,videoElement:s,initialEndTime:m=0,initialCurrentTime:l=0,initialMuted:u,initialVolume:g,markers:j,options:T,slots:W,events:{onEnd:y,onPlay:B,onSeekEnd:k,onSeeking:v,onSeekStart:S,onTimeUpdate:h,onPause:I,onVolumeChange:E,onVolumeMute:x,onRestart:L,onFirstPlay:P,onFirstEnded:A,onReset:w}={},videoSeekTime:F,slotProps:M},R)=>{const[G,V]=o(!1),[_,D]=o(!1),[K,N]=o([]),O={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,fullscreenControls:!1,...T},[{seeking:z,endTime:U,currentTime:q,playing:H,buffering:J,loaded:Q,ended:X,volume:Y,muted:Z,startTime:$,firstPlay:ee,firstEnded:re},te]=o({startTime:p(O.normaliseTime?l:0),endTime:p(O.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=Z,s.volume=Y,O.normaliseTime&&(void 0===m||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls2.tsx");return()=>{be()}},[]),i(()=>{te(e=>({...e,startTime:p(O.normaliseTime?l:0),endTime:p(O.normaliseTime?m:s.duration),currentTime:p(l??0)})),s.currentTime=p(l??0)},[l,m]);const oe=n(()=>{te(e=>({...e,playing:!1,ended:!0,...!re&&{firstEnded:!0}})),y&&y(),!re&&A&&A()},[re]);i(()=>{if(!s||null==F)return;(async()=>{const e=!s.paused,r=F===U;te(e=>({...e,playing:!1,currentTime:p(F)})),await new Promise(e=>{const r=()=>{s.removeEventListener("seeked",r),e()};s.addEventListener("seeked",r),setTimeout(e,500)}),te(e=>({...e,currentTime:p(F)})),await new Promise(e=>setTimeout(e,50)),te(t=>({...t,playing:e,currentTime:p(r?F-.001:F+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[F,s]);const ie=n(e=>{te(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),Z!==e.target?.muted&&x&&x(!Z),Y!==e.target?.volume&&E&&E(Y)},[Z,Y]),ne=n(()=>{const e=p(s.currentTime)>=U&&U!==p(s.duration)&&!X,r=p(s.currentTime)>=U&&U===p(s.duration)&&!X&&!H;(e||r)&&(s.pause(),s.dispatchEvent(new Event("ended"))),te(e=>({...e,currentTime:p(s.currentTime)})),h&&h(p(s.currentTime))},[U,X,H]),ae=n(()=>{te(e=>({...e,playing:!1})),I&&I()},[q]),se=n(()=>{te(e=>({...e,playing:!0,ended:!1,...!O?.disableBufferingEvents&&{buffering:!1},...!ee&&{firstPlay:!0}})),!ee&&P&&P(),B&&B()},[ee,O?.disableBufferingEvents]),me=n(()=>{O?.disableBufferingEvents||te(e=>({...e,buffering:!0}))},[O?.disableBufferingEvents]),le=n(()=>{O?.disableBufferingEvents||te(e=>({...e,buffering:!1}))},[J,O?.disableBufferingEvents]),de=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>=$&&t<=U){const r=Math.max(t,$),i=Math.min(o,U);e.push({start:r-$,end:i-$,startPercent:(r-$)/(U-$)*100,widthPercent:(i-r)/(U-$)*100})}}N(e)},[z,U,q,H,J,Q,X,Y,Z,$,K,O?.disableBufferingEvents]),pe=n(async e=>{H&&be(),s.currentTime=$,e&&await ce(),L&&L()},[H,q,$,U,X]),ue=n(async()=>{H&&be(),s.currentTime=$,te(e=>({...e,startTime:p(O.normaliseTime?l:0),endTime:p(O.normaliseTime?m:s.duration),currentTime:p(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),w&&w()},[H,q,$,U,X,l,m]),ce=async()=>{await s.play()},be=()=>{s.pause()},Ce=n(e=>{s.currentTime=p(e),te(r=>({...r,currentTime:p(e),ended:!1,seeking:!0,...!O?.disableBufferingEvents&&{buffering:!1},firstPlay:!ee||r.firstPlay,bufferProgress:e})),v&&v(e),!ee&&P&&P()},[J,ee,O?.disableBufferingEvents]),fe=n(async()=>{document.hidden?H&&!s.paused?(V(!0),be()):V(!1):(G&&!H&&await ce(),V(!1))},[H,G,be,ce,s]),ge=n(e=>{e&&s.pause(),te(e=>({...e,seeking:!0})),S&&S()},[X]),je=n(async(e,r,t)=>{r&&(s.currentTime=r),e&&!X&&await s.play(),t&&H&&s.pause(),te(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),k&&k(r)},[H,X,J,z]),Te=n(()=>{document.fullscreenElement?document.exitFullscreen():s.requestFullscreen()},[s]);return d("fullscreenchange",()=>D(!!document.fullscreenElement),document),d("visibilitychange",fe,document),d("pause",ae,s),d("playing",se,s),d("timeupdate",ne,s),d("ended",oe,s),d("volumechange",ie,s),d("waiting",me,s),d("canplay",le,s),d("progress",de,s),a(R,()=>({play:ce,pause:be,restart:pe,reset:ue,seek:(e,r,t)=>je(r,e,t),videoState:{seeking:z,endTime:U,currentTime:q,playing:H,buffering:J,loaded:Q,ended:X,volume:Y,firstPlay:ee,firstEnded:re,muted:Z,startTime:$}})),e(C,{variation:"raised",borderradius:"xl",id:t,sx:M?.paperContainer?.sx,children:[e(f,{...O?.rtl&&{dir:"rtl"},children:[r(c,{seeking:z,playing:H,ended:X,buffering:J,handleAction:async()=>{X?await pe(!0):H?be():await ce()}}),r(b,{handleSeeking:Ce,handleSeekEnd:je,handleSeekStart:ge,ended:X,marker:W?.marker,markers:j,markerIndicatorMode:O.markerIndicatorMode,markerIndicatorSize:O.markerIndicatorSize,markerIndicator:O.markerIndicator,startTime:O.normaliseTime?$:0,currentTime:q,endTime:U,playing:H,bufferRanges:K,buffering:J,volume:Y,muted:Z,volumeControls:O.volumeControls,volumeControlsType:O.volumeControlsType,handleVolumeMute:()=>{s.muted=!Z},handleVolumeChange:e=>{s.volume=e,Z&&(s.muted=!1)},fullscreenControls:O.fullscreenControls,isFullScreen:_,handlefullscreenToggle:Te})]}),W?.bottom]})}));export{g as default};
|
|
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{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"../../BrandCore/textures.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/SelectItem/SelectItem.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Animations/FadeIn.js";import"../../WebCore/Text/Text.js";import"@mui/icons-material";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.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/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../WebCore/ButtonTabGroup/_partials/TabButton.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";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/KbdGroup/Kbd.js";import"../../WebCore/KbdGroup/KbdGroup.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 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/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 C=m(u)(({theme:e})=>({display:"flex",flex:1,padding:"2px",gap:e.spacing(e.custom.padding.sm),flexDirection:"column"})),f=m(l)({alignItems:"center",justifyContent:"start",flexDirection:"row",flex:1}),g=s(t(({id:t,videoElement:s,initialEndTime:m=0,initialCurrentTime:l=0,initialMuted:u,initialVolume:g,markers:j,options:T,slots:W,events:{onEnd:y,onPlay:B,onSeekEnd:k,onSeeking:v,onSeekStart:S,onTimeUpdate:h,onPause:I,onVolumeChange:E,onVolumeMute:x,onRestart:L,onFirstPlay:P,onFirstEnded:A,onReset:w}={},videoSeekTime:F,slotProps:M},R)=>{const[G,V]=o(!1),[_,D]=o(!1),[K,N]=o([]),O={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,fullscreenControls:!1,...T},[{seeking:z,endTime:U,currentTime:q,playing:H,buffering:J,loaded:Q,ended:X,volume:Y,muted:Z,startTime:$,firstPlay:ee,firstEnded:re},te]=o({startTime:p(O.normaliseTime?l:0),endTime:p(O.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=Z,s.volume=Y,O.normaliseTime&&(void 0===m||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls2.tsx");return()=>{be()}},[]),i(()=>{te(e=>({...e,startTime:p(O.normaliseTime?l:0),endTime:p(O.normaliseTime?m:s.duration),currentTime:p(l??0)})),s.currentTime=p(l??0)},[l,m]);const oe=n(()=>{te(e=>({...e,playing:!1,ended:!0,...!re&&{firstEnded:!0}})),y&&y(),!re&&A&&A()},[re]);i(()=>{if(!s||null==F)return;(async()=>{const e=!s.paused,r=F===U;te(e=>({...e,playing:!1,currentTime:p(F)})),await new Promise(e=>{const r=()=>{s.removeEventListener("seeked",r),e()};s.addEventListener("seeked",r),setTimeout(e,500)}),te(e=>({...e,currentTime:p(F)})),await new Promise(e=>setTimeout(e,50)),te(t=>({...t,playing:e,currentTime:p(r?F-.001:F+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[F,s]);const ie=n(e=>{te(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),Z!==e.target?.muted&&x&&x(!Z),Y!==e.target?.volume&&E&&E(Y)},[Z,Y]),ne=n(()=>{const e=p(s.currentTime)>=U&&U!==p(s.duration)&&!X,r=p(s.currentTime)>=U&&U===p(s.duration)&&!X&&!H;(e||r)&&(s.pause(),s.dispatchEvent(new Event("ended"))),te(e=>({...e,currentTime:p(s.currentTime)})),h&&h(p(s.currentTime))},[U,X,H]),ae=n(()=>{te(e=>({...e,playing:!1})),I&&I()},[q]),se=n(()=>{te(e=>({...e,playing:!0,ended:!1,...!O?.disableBufferingEvents&&{buffering:!1},...!ee&&{firstPlay:!0}})),!ee&&P&&P(),B&&B()},[ee,O?.disableBufferingEvents]),me=n(()=>{O?.disableBufferingEvents||te(e=>({...e,buffering:!0}))},[O?.disableBufferingEvents]),le=n(()=>{O?.disableBufferingEvents||te(e=>({...e,buffering:!1}))},[J,O?.disableBufferingEvents]),de=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>=$&&t<=U){const r=Math.max(t,$),i=Math.min(o,U);e.push({start:r-$,end:i-$,startPercent:(r-$)/(U-$)*100,widthPercent:(i-r)/(U-$)*100})}}N(e)},[z,U,q,H,J,Q,X,Y,Z,$,K,O?.disableBufferingEvents]),pe=n(async e=>{H&&be(),s.currentTime=$,e&&await ce(),L&&L()},[H,q,$,U,X]),ue=n(async()=>{H&&be(),s.currentTime=$,te(e=>({...e,startTime:p(O.normaliseTime?l:0),endTime:p(O.normaliseTime?m:s.duration),currentTime:p(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),w&&w()},[H,q,$,U,X,l,m]),ce=async()=>{await s.play()},be=()=>{s.pause()},Ce=n(e=>{s.currentTime=p(e),te(r=>({...r,currentTime:p(e),ended:!1,seeking:!0,...!O?.disableBufferingEvents&&{buffering:!1},firstPlay:!ee||r.firstPlay,bufferProgress:e})),v&&v(e),!ee&&P&&P()},[J,ee,O?.disableBufferingEvents]),fe=n(async()=>{document.hidden?H&&!s.paused?(V(!0),be()):V(!1):(G&&!H&&await ce(),V(!1))},[H,G,be,ce,s]),ge=n(e=>{e&&s.pause(),te(e=>({...e,seeking:!0})),S&&S()},[X]),je=n(async(e,r,t)=>{r&&(s.currentTime=r),e&&!X&&await s.play(),t&&H&&s.pause(),te(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),k&&k(r)},[H,X,J,z]),Te=n(()=>{document.fullscreenElement?document.exitFullscreen():s.requestFullscreen()},[s]);return d("fullscreenchange",()=>D(!!document.fullscreenElement),document),d("visibilitychange",fe,document),d("pause",ae,s),d("playing",se,s),d("timeupdate",ne,s),d("ended",oe,s),d("volumechange",ie,s),d("waiting",me,s),d("canplay",le,s),d("progress",de,s),a(R,()=>({play:ce,pause:be,restart:pe,reset:ue,seek:(e,r,t)=>je(r,e,t),videoState:{seeking:z,endTime:U,currentTime:q,playing:H,buffering:J,loaded:Q,ended:X,volume:Y,firstPlay:ee,firstEnded:re,muted:Z,startTime:$}})),e(C,{variation:"raised",borderradius:"xl",id:t,sx:M?.paperContainer?.sx,children:[e(f,{...O?.rtl&&{dir:"rtl"},children:[r(c,{seeking:z,playing:H,ended:X,buffering:J,handleAction:async()=>{X?await pe(!0):H?be():await ce()}}),r(b,{handleSeeking:Ce,handleSeekEnd:je,handleSeekStart:ge,ended:X,marker:W?.marker,markersContainerProps:M?.markersContainer,markers:j,markerIndicatorMode:O.markerIndicatorMode,markerIndicatorSize:O.markerIndicatorSize,markerIndicator:O.markerIndicator,startTime:O.normaliseTime?$:0,currentTime:q,endTime:U,playing:H,bufferRanges:K,buffering:J,volume:Y,muted:Z,volumeControls:O.volumeControls,volumeControlsType:O.volumeControlsType,handleVolumeMute:()=>{s.muted=!Z},handleVolumeChange:e=>{s.volume=e,Z&&(s.muted=!1)},fullscreenControls:O.fullscreenControls,isFullScreen:_,handlefullscreenToggle:Te})]}),W?.bottom]})}));export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{styled as o,Stack as t,Box as n,useTheme as s}from"@mui/material";import{memo as a,useState as i,useCallback as l}from"react";import{formatTimeForVideoTimeline as m}from"../../../../../utils/formatTime.js";import{Text as d}from"../../../../WebCore/Text/Text.js";import{SCRUBBER_SIZE as c}from"../../constants.js";import u from"./components/FullscreenControls/FullscreenControls.js";import p from"./components/Markers/Markers.js";import h from"./components/Scrubber/Scrubber.js";import g from"./components/VolumeControls/VolumeControls.js";const f=o(t)({display:"flex",flex:1,flexDirection:"row"}),x=o(n)({display:"flex",alignItems:"center"}),k=o(n)(({theme:e})=>({marginLeft:e.spacing(e.custom.padding.sm),marginRight:e.spacing(e.custom.padding.sm),position:"relative",display:"flex",flex:1})),T=o(n)(({theme:e,left:r,width:o})=>({background:e.custom.palette.neutral[300],height:c,position:"absolute",left:`${r}%`,pointerEvents:"none",top:"50%",transform:"translateY(-50%)",borderRadius:e.custom.radius.round,width:`${o}%`})),C=a(({startTime:o,currentTime:t,endTime:n,playing:a,markerIndicator:c,bufferRanges:C,handleSeeking:S,handleSeekEnd:b,handleSeekStart:j,markers:v,marker:w,
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{styled as o,Stack as t,Box as n,useTheme as s}from"@mui/material";import{memo as a,useState as i,useCallback as l}from"react";import{formatTimeForVideoTimeline as m}from"../../../../../utils/formatTime.js";import{Text as d}from"../../../../WebCore/Text/Text.js";import{SCRUBBER_SIZE as c}from"../../constants.js";import u from"./components/FullscreenControls/FullscreenControls.js";import p from"./components/Markers/Markers.js";import h from"./components/Scrubber/Scrubber.js";import g from"./components/VolumeControls/VolumeControls.js";const f=o(t)({display:"flex",flex:1,flexDirection:"row"}),x=o(n)({display:"flex",alignItems:"center"}),k=o(n)(({theme:e})=>({marginLeft:e.spacing(e.custom.padding.sm),marginRight:e.spacing(e.custom.padding.sm),position:"relative",display:"flex",flex:1})),T=o(n)(({theme:e,left:r,width:o})=>({background:e.custom.palette.neutral[300],height:c,position:"absolute",left:`${r}%`,pointerEvents:"none",top:"50%",transform:"translateY(-50%)",borderRadius:e.custom.radius.round,width:`${o}%`})),C=a(({startTime:o,currentTime:t,endTime:n,playing:a,markerIndicator:c,bufferRanges:C,handleSeeking:S,handleSeekEnd:b,handleSeekStart:j,markers:v,marker:w,markersContainerProps:I,markerIndicatorMode:M,markerIndicatorSize:P,volume:y,muted:V,handleVolumeMute:z,handleVolumeChange:F,volumeControlsType:E,volumeControls:R,fullscreenControls:D,isFullScreen:$,handlefullscreenToggle:L})=>{const W=s(),[Y,q]=i(a),A=l((e,r)=>{e.stopPropagation(),S?.(r)},[S]),B=l((e,r)=>{e.stopPropagation(),b?.(Y),Y&&q(!1)},[Y,b]),G=l(e=>{e.stopPropagation(),a&&q(a),j?.(a)},[a,j]),H=l(()=>{a&&q(a),j?.(a)},[a,j]),J=l(()=>{b?.(Y),Y&&q(!1)},[Y,b]);return e(f,{children:[r(x,{sx:{width:W.spacing(6)},children:r(d,{size:"xs",sx:{pl:1},children:m(t-o)})}),r(x,{sx:{flex:1},children:e(k,{children:[C.length>0&&C.map(({startPercent:e,widthPercent:o},t)=>r(T,{left:e,width:o},t)),r(h,{step:.05,value:t,max:n,min:o,onChangeCommitted:B,onMouseDown:G,onChange:A,onTouchStart:H,onTouchEnd:J}),v&&v?.length>0&&r(p,{markerIndicatorMode:M,markerIndicatorSize:P,markerIndicator:c,markers:v,marker:w,containerProps:I,startTime:o,currentTime:t,endTime:n})]})}),r(x,{children:r(d,{size:"xs",sx:{pr:1},children:m(n-o)})}),R&&r(x,{sx:{mr:W.spacing(W.custom.padding.xs)},children:r(g,{volume:y,muted:V,handleVolumeMute:z,handleVolumeChange:F,volumeControlsType:E})}),D&&r(x,{sx:{mr:W.spacing(W.custom.padding.xs)},children:r(u,{isFullScreen:$,handlefullscreenToggle:L})})]})});export{C as default};
|
package/dist/esm/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as r}from"@mui/material";import{mergeSx as a}from"merge-sx";import{memo as o,useMemo as s}from"react";import{valueToPercentage as m}from"../../../../../../../utils/valueToPercentage.js";const n=i(r)(({theme:t})=>({position:"absolute",top:"100%",marginTop:t.spacing((t.breakpoints.down("lg"),t.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),d=i(r)(({theme:t,width:e,left:i})=>({position:"absolute",background:t.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${i}%`,width:`${e}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:t.spacing(t.custom.radius.md),background:t.custom.palette.neutralAlpha[1]}})),l=i(r,{shouldForwardProp:t=>"isActive"!==t})(({theme:t,isActive:e})=>({position:"absolute",background:t.custom.palette.purple[500],height:8,width:8,borderRadius:8,...e?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"})),c=o(({startTime:i,endTime:r,currentTime:o,markers:c=[],markerIndicator:p=!0,markerIndicatorSize:u=3,markerIndicatorMode:h,marker:f,containerProps:g})=>{const b=s(()=>m(r-i,o-i),[o,i,r]),k=s(()=>"time"===h?u:(r-i)*u,[r,i,h,u]),{width:w,left:x}=s(()=>{const t=r-i,e=(o-i)/t;let a;a="time"===h?u/t*100:100*u;const s=a/2,m=100*e,n=100-100*e,d=Math.min(s,m);return{width:d+Math.min(s,n),left:b-d}},[o,i,r,b,h,u]),v=s(()=>c.map(({timeStamp:t,id:e,meta:a})=>({id:e,timeStamp:t,markerPosition:m(r-i,t),isActive:Math.abs(t-o+i)<=k/2+1e-10,meta:a})),[c,r,i,o,k]),A=f||l;return t(n,{...g,sx:a(g?.sx),children:[p&&e(d,{width:w,left:x}),v.map(({id:t,markerPosition:i,isActive:r,meta:a})=>e(A,{isActive:r,sx:{zIndex:2,left:`${i}%`},...a&&{meta:a}},t))]})});export{c as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{styled as e,Box as t}from"@mui/material";import"react";import{omitProps as i}from"../../../utils/shouldForwardProp.js";import{buttonHeightMap as s}from"../ButtonBase/Button.variant-helpers.js";import{focusedInputState as o}from"../styleblocks/focusedStyle.js";import{selectedState as a,selectedStateActive as r,selectedStateHover as l}from"../styleblocks/selectedStyle.js";import{pillDefaultState as n,pillDisabledState as d,pillDefaultStateActive as m,pillDefaultStateHover as c}from"./pill.helpers.js";const p=e(t,{shouldForwardProp:i("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","
|
|
1
|
+
import{styled as e,Box as t}from"@mui/material";import"react";import{omitProps as i}from"../../../utils/shouldForwardProp.js";import{buttonHeightMap as s}from"../ButtonBase/Button.variant-helpers.js";import{focusedInputState as o}from"../styleblocks/focusedStyle.js";import{selectedState as a,selectedStateActive as r,selectedStateHover as l}from"../styleblocks/selectedStyle.js";import{pillDefaultState as n,pillDisabledState as d,pillDefaultStateActive as m,pillDefaultStateHover as c}from"./pill.helpers.js";const p=e(t,{shouldForwardProp:i("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","secondaryLabel","slots","slotProps")})(({theme:e,active:t,disabled:i,sizing:p,onDelete:u,freezeInteractions:g,loading:f})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:s[p||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:u?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:g?"auto":"pointer",...n(e),...t&&a(e),...(i||f)&&d(e),"&:hover":{...c(e),...(i||f)&&d(e),...t&&l(e),...g&&n(e),...g&&t&&a(e)},"&:active":{...m(e),...(i||f)&&d(e),...t&&r(e),...g&&n(e),...g&&t&&a(e)},"&:focus-visible":{...o(e)}}));export{p as default};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { FunctionComponent, ReactElement } from 'react';
|
|
3
|
+
import { BoxProps } from '@mui/material';
|
|
3
4
|
import '../../WebCore/Text/types.js';
|
|
4
5
|
import { SurfaceProps } from '../../WebCore/Surface/Surface.js';
|
|
5
6
|
import { MarkerComponentProps } from './components/Timeline/components/Markers/Markers.js';
|
|
@@ -29,6 +30,7 @@ type VideoControls2Props = {
|
|
|
29
30
|
};
|
|
30
31
|
slotProps?: {
|
|
31
32
|
paperContainer?: SurfaceProps;
|
|
33
|
+
markersContainer?: BoxProps;
|
|
32
34
|
};
|
|
33
35
|
initialMuted?: boolean;
|
|
34
36
|
initialVolume?: 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("../../BrandCore/textures.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/SelectItem/SelectItem.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Animations/FadeIn.js"),require("../../WebCore/Text/Text.js"),require("@mui/icons-material"),require("../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js"),require("../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.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/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../WebCore/ButtonTabGroup/_partials/TabButton.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),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/KbdGroup/Kbd.js"),require("../../WebCore/KbdGroup/KbdGroup.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/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");var n=require("./components/ActionButton/ActionButton.js"),l=require("./components/Timeline/Timeline.js");function s(e){return e&&e.__esModule?e:{default:e}}var u=s(i);const d=t.styled(o)(({theme:e})=>({display:"flex",flex:1,padding:"2px",gap:e.spacing(e.custom.padding.sm),flexDirection:"column"})),m=t.styled(t.Stack)({alignItems:"center",justifyContent:"start",flexDirection:"row",flex:1}),c=r.forwardRef(({id:t,videoElement:i,initialEndTime:o=0,initialCurrentTime:s=0,initialMuted:c,initialVolume:b,markers:p,options:C,slots:f,events:{onEnd:q,onPlay:j,onSeekEnd:g,onSeeking:y,onSeekStart:T,onTimeUpdate:W,onPause:k,onVolumeChange:B,onVolumeMute:v,onRestart:S,onFirstPlay:F,onFirstEnded:h,onReset:I}={},videoSeekTime:E,slotProps:x},L)=>{const[P,A]=r.useState(!1),[w,M]=r.useState(!1),[R,G]=r.useState([]),V={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,fullscreenControls:!1,...C},[{seeking:_,endTime:D,currentTime:K,playing:N,buffering:O,loaded:z,ended:U,volume:H,muted:J,startTime:Q,firstPlay:X,firstEnded:Y},Z]=r.useState({startTime:a.normaliseFloat(V.normaliseTime?s:0),endTime:a.normaliseFloat(V.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(s??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=J,i.volume=H,V.normaliseTime&&(void 0===o||void 0===s))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls2.tsx");return()=>{de()}},[]),r.useEffect(()=>{Z(e=>({...e,startTime:a.normaliseFloat(V.normaliseTime?s:0),endTime:a.normaliseFloat(V.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(s??0)})),i.currentTime=a.normaliseFloat(s??0)},[s,o]);const $=r.useCallback(()=>{Z(e=>({...e,playing:!1,ended:!0,...!Y&&{firstEnded:!0}})),q&&q(),!Y&&h&&h()},[Y]);r.useEffect(()=>{if(!i||null==E)return;(async()=>{const e=!i.paused,r=E===D;Z(e=>({...e,playing:!1,currentTime:a.normaliseFloat(E)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Z(e=>({...e,currentTime:a.normaliseFloat(E)})),await new Promise(e=>setTimeout(e,50)),Z(t=>({...t,playing:e,currentTime:a.normaliseFloat(r?E-.001:E+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[E,i]);const ee=r.useCallback(e=>{Z(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),J!==e.target?.muted&&v&&v(!J),H!==e.target?.volume&&B&&B(H)},[J,H]),re=r.useCallback(()=>{const e=a.normaliseFloat(i.currentTime)>=D&&D!==a.normaliseFloat(i.duration)&&!U,r=a.normaliseFloat(i.currentTime)>=D&&D===a.normaliseFloat(i.duration)&&!U&&!N;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Z(e=>({...e,currentTime:a.normaliseFloat(i.currentTime)})),W&&W(a.normaliseFloat(i.currentTime))},[D,U,N]),te=r.useCallback(()=>{Z(e=>({...e,playing:!1})),k&&k()},[K]),ie=r.useCallback(()=>{Z(e=>({...e,playing:!0,ended:!1,...!V?.disableBufferingEvents&&{buffering:!1},...!X&&{firstPlay:!0}})),!X&&F&&F(),j&&j()},[X,V?.disableBufferingEvents]),ae=r.useCallback(()=>{V?.disableBufferingEvents||Z(e=>({...e,buffering:!0}))},[V?.disableBufferingEvents]),oe=r.useCallback(()=>{V?.disableBufferingEvents||Z(e=>({...e,buffering:!1}))},[O,V?.disableBufferingEvents]),ne=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>=Q&&t<=D){const r=Math.max(t,Q),i=Math.min(a,D);e.push({start:r-Q,end:i-Q,startPercent:(r-Q)/(D-Q)*100,widthPercent:(i-r)/(D-Q)*100})}}G(e)},[_,D,K,N,O,z,U,H,J,Q,R,V?.disableBufferingEvents]),le=r.useCallback(async e=>{N&&de(),i.currentTime=Q,e&&await ue(),S&&S()},[N,K,Q,D,U]),se=r.useCallback(async()=>{N&&de(),i.currentTime=Q,Z(e=>({...e,startTime:a.normaliseFloat(V.normaliseTime?s:0),endTime:a.normaliseFloat(V.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(s??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),I&&I()},[N,K,Q,D,U,s,o]),ue=async()=>{await i.play()},de=()=>{i.pause()},me=r.useCallback(e=>{i.currentTime=a.normaliseFloat(e),Z(r=>({...r,currentTime:a.normaliseFloat(e),ended:!1,seeking:!0,...!V?.disableBufferingEvents&&{buffering:!1},firstPlay:!X||r.firstPlay,bufferProgress:e})),y&&y(e),!X&&F&&F()},[O,X,V?.disableBufferingEvents]),ce=r.useCallback(async()=>{document.hidden?N&&!i.paused?(A(!0),de()):A(!1):(P&&!N&&await ue(),A(!1))},[N,P,de,ue,i]),be=r.useCallback(e=>{e&&i.pause(),Z(e=>({...e,seeking:!0})),T&&T()},[U]),pe=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!U&&await i.play(),t&&N&&i.pause(),Z(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),g&&g(r)},[N,U,O,_]),Ce=r.useCallback(()=>{document.fullscreenElement?document.exitFullscreen():i.requestFullscreen()},[i]);return u.default("fullscreenchange",()=>M(!!document.fullscreenElement),document),u.default("visibilitychange",ce,document),u.default("pause",te,i),u.default("playing",ie,i),u.default("timeupdate",re,i),u.default("ended",$,i),u.default("volumechange",ee,i),u.default("waiting",ae,i),u.default("canplay",oe,i),u.default("progress",ne,i),r.useImperativeHandle(L,()=>({play:ue,pause:de,restart:le,reset:se,seek:(e,r,t)=>pe(r,e,t),videoState:{seeking:_,endTime:D,currentTime:K,playing:N,buffering:O,loaded:z,ended:U,volume:H,firstPlay:X,firstEnded:Y,muted:J,startTime:Q}})),e.jsxs(d,{variation:"raised",borderradius:"xl",id:t,sx:x?.paperContainer?.sx,children:[e.jsxs(m,{...V?.rtl&&{dir:"rtl"},children:[e.jsx(n,{seeking:_,playing:N,ended:U,buffering:O,handleAction:async()=>{U?await le(!0):N?de():await ue()}}),e.jsx(l,{handleSeeking:me,handleSeekEnd:pe,handleSeekStart:be,ended:U,marker:f?.marker,markers:p,markerIndicatorMode:V.markerIndicatorMode,markerIndicatorSize:V.markerIndicatorSize,markerIndicator:V.markerIndicator,startTime:V.normaliseTime?Q:0,currentTime:K,endTime:D,playing:N,bufferRanges:R,buffering:O,volume:H,muted:J,volumeControls:V.volumeControls,volumeControlsType:V.volumeControlsType,handleVolumeMute:()=>{i.muted=!J},handleVolumeChange:e=>{i.volume=e,J&&(i.muted=!1)},fullscreenControls:V.fullscreenControls,isFullScreen:w,handlefullscreenToggle:Ce})]}),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("../../../utils/normaliseFloat.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../BrandCore/textures.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/SelectItem/SelectItem.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Animations/FadeIn.js"),require("../../WebCore/Text/Text.js"),require("@mui/icons-material"),require("../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js"),require("../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js"),require("../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.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/ButtonTabGroup/_partials/ActiveIndicator.js"),require("../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js"),require("../../WebCore/ButtonTabGroup/_partials/TabButton.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),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/KbdGroup/Kbd.js"),require("../../WebCore/KbdGroup/KbdGroup.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/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");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:"2px",gap:e.spacing(e.custom.padding.sm),flexDirection:"column"})),m=t.styled(t.Stack)({alignItems:"center",justifyContent:"start",flexDirection:"row",flex:1}),c=r.forwardRef(({id:t,videoElement:i,initialEndTime:o=0,initialCurrentTime:l=0,initialMuted:c,initialVolume:b,markers:C,options:p,slots:f,events:{onEnd:q,onPlay:j,onSeekEnd:g,onSeeking:y,onSeekStart:T,onTimeUpdate:W,onPause:k,onVolumeChange:B,onVolumeMute:v,onRestart:S,onFirstPlay:F,onFirstEnded:h,onReset:I}={},videoSeekTime:E,slotProps:x},L)=>{const[P,A]=r.useState(!1),[w,M]=r.useState(!1),[R,G]=r.useState([]),V={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,fullscreenControls:!1,...p},[{seeking:_,endTime:D,currentTime:K,playing:N,buffering:O,loaded:z,ended:U,volume:H,muted:J,startTime:Q,firstPlay:X,firstEnded:Y},Z]=r.useState({startTime:a.normaliseFloat(V.normaliseTime?l:0),endTime:a.normaliseFloat(V.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=J,i.volume=H,V.normaliseTime&&(void 0===o||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls2.tsx");return()=>{de()}},[]),r.useEffect(()=>{Z(e=>({...e,startTime:a.normaliseFloat(V.normaliseTime?l:0),endTime:a.normaliseFloat(V.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0)})),i.currentTime=a.normaliseFloat(l??0)},[l,o]);const $=r.useCallback(()=>{Z(e=>({...e,playing:!1,ended:!0,...!Y&&{firstEnded:!0}})),q&&q(),!Y&&h&&h()},[Y]);r.useEffect(()=>{if(!i||null==E)return;(async()=>{const e=!i.paused,r=E===D;Z(e=>({...e,playing:!1,currentTime:a.normaliseFloat(E)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Z(e=>({...e,currentTime:a.normaliseFloat(E)})),await new Promise(e=>setTimeout(e,50)),Z(t=>({...t,playing:e,currentTime:a.normaliseFloat(r?E-.001:E+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[E,i]);const ee=r.useCallback(e=>{Z(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),J!==e.target?.muted&&v&&v(!J),H!==e.target?.volume&&B&&B(H)},[J,H]),re=r.useCallback(()=>{const e=a.normaliseFloat(i.currentTime)>=D&&D!==a.normaliseFloat(i.duration)&&!U,r=a.normaliseFloat(i.currentTime)>=D&&D===a.normaliseFloat(i.duration)&&!U&&!N;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Z(e=>({...e,currentTime:a.normaliseFloat(i.currentTime)})),W&&W(a.normaliseFloat(i.currentTime))},[D,U,N]),te=r.useCallback(()=>{Z(e=>({...e,playing:!1})),k&&k()},[K]),ie=r.useCallback(()=>{Z(e=>({...e,playing:!0,ended:!1,...!V?.disableBufferingEvents&&{buffering:!1},...!X&&{firstPlay:!0}})),!X&&F&&F(),j&&j()},[X,V?.disableBufferingEvents]),ae=r.useCallback(()=>{V?.disableBufferingEvents||Z(e=>({...e,buffering:!0}))},[V?.disableBufferingEvents]),oe=r.useCallback(()=>{V?.disableBufferingEvents||Z(e=>({...e,buffering:!1}))},[O,V?.disableBufferingEvents]),ne=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>=Q&&t<=D){const r=Math.max(t,Q),i=Math.min(a,D);e.push({start:r-Q,end:i-Q,startPercent:(r-Q)/(D-Q)*100,widthPercent:(i-r)/(D-Q)*100})}}G(e)},[_,D,K,N,O,z,U,H,J,Q,R,V?.disableBufferingEvents]),se=r.useCallback(async e=>{N&&de(),i.currentTime=Q,e&&await ue(),S&&S()},[N,K,Q,D,U]),le=r.useCallback(async()=>{N&&de(),i.currentTime=Q,Z(e=>({...e,startTime:a.normaliseFloat(V.normaliseTime?l:0),endTime:a.normaliseFloat(V.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),I&&I()},[N,K,Q,D,U,l,o]),ue=async()=>{await i.play()},de=()=>{i.pause()},me=r.useCallback(e=>{i.currentTime=a.normaliseFloat(e),Z(r=>({...r,currentTime:a.normaliseFloat(e),ended:!1,seeking:!0,...!V?.disableBufferingEvents&&{buffering:!1},firstPlay:!X||r.firstPlay,bufferProgress:e})),y&&y(e),!X&&F&&F()},[O,X,V?.disableBufferingEvents]),ce=r.useCallback(async()=>{document.hidden?N&&!i.paused?(A(!0),de()):A(!1):(P&&!N&&await ue(),A(!1))},[N,P,de,ue,i]),be=r.useCallback(e=>{e&&i.pause(),Z(e=>({...e,seeking:!0})),T&&T()},[U]),Ce=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!U&&await i.play(),t&&N&&i.pause(),Z(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),g&&g(r)},[N,U,O,_]),pe=r.useCallback(()=>{document.fullscreenElement?document.exitFullscreen():i.requestFullscreen()},[i]);return u.default("fullscreenchange",()=>M(!!document.fullscreenElement),document),u.default("visibilitychange",ce,document),u.default("pause",te,i),u.default("playing",ie,i),u.default("timeupdate",re,i),u.default("ended",$,i),u.default("volumechange",ee,i),u.default("waiting",ae,i),u.default("canplay",oe,i),u.default("progress",ne,i),r.useImperativeHandle(L,()=>({play:ue,pause:de,restart:se,reset:le,seek:(e,r,t)=>Ce(r,e,t),videoState:{seeking:_,endTime:D,currentTime:K,playing:N,buffering:O,loaded:z,ended:U,volume:H,firstPlay:X,firstEnded:Y,muted:J,startTime:Q}})),e.jsxs(d,{variation:"raised",borderradius:"xl",id:t,sx:x?.paperContainer?.sx,children:[e.jsxs(m,{...V?.rtl&&{dir:"rtl"},children:[e.jsx(n,{seeking:_,playing:N,ended:U,buffering:O,handleAction:async()=>{U?await se(!0):N?de():await ue()}}),e.jsx(s,{handleSeeking:me,handleSeekEnd:Ce,handleSeekStart:be,ended:U,marker:f?.marker,markersContainerProps:x?.markersContainer,markers:C,markerIndicatorMode:V.markerIndicatorMode,markerIndicatorSize:V.markerIndicatorSize,markerIndicator:V.markerIndicator,startTime:V.normaliseTime?Q:0,currentTime:K,endTime:D,playing:N,bufferRanges:R,buffering:O,volume:H,muted:J,volumeControls:V.volumeControls,volumeControlsType:V.volumeControlsType,handleVolumeMute:()=>{i.muted=!J},handleVolumeChange:e=>{i.volume=e,J&&(i.muted=!1)},fullscreenControls:V.fullscreenControls,isFullScreen:w,handlefullscreenToggle:pe})]}),f?.bottom]})});var b=r.memo(c);module.exports=b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("react"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("react"),n=require("../../../../../utils/formatTime.js"),t=require("../../../../WebCore/Text/Text.js"),o=require("../../constants.js"),a=require("./components/FullscreenControls/FullscreenControls.js"),l=require("./components/Markers/Markers.js"),i=require("./components/Scrubber/Scrubber.js"),m=require("./components/VolumeControls/VolumeControls.js");const u=r.styled(r.Stack)({display:"flex",flex:1,flexDirection:"row"}),c=r.styled(r.Box)({display:"flex",alignItems:"center"}),d=r.styled(r.Box)(({theme:e})=>({marginLeft:e.spacing(e.custom.padding.sm),marginRight:e.spacing(e.custom.padding.sm),position:"relative",display:"flex",flex:1})),x=r.styled(r.Box)(({theme:e,left:r,width:s})=>({background:e.custom.palette.neutral[300],height:o.SCRUBBER_SIZE,position:"absolute",left:`${r}%`,pointerEvents:"none",top:"50%",transform:"translateY(-50%)",borderRadius:e.custom.radius.round,width:`${s}%`}));var h=s.memo(({startTime:o,currentTime:h,endTime:p,playing:g,markerIndicator:k,bufferRanges:j,handleSeeking:T,handleSeekEnd:C,handleSeekStart:f,markers:S,marker:b,markersContainerProps:q,markerIndicatorMode:v,markerIndicatorSize:y,volume:I,muted:V,handleVolumeMute:w,handleVolumeChange:M,volumeControlsType:P,volumeControls:F,fullscreenControls:B,isFullScreen:E,handlefullscreenToggle:R})=>{const z=r.useTheme(),[D,$]=s.useState(g),L=s.useCallback((e,r)=>{e.stopPropagation(),T?.(r)},[T]),U=s.useCallback((e,r)=>{e.stopPropagation(),C?.(D),D&&$(!1)},[D,C]),W=s.useCallback(e=>{e.stopPropagation(),g&&$(g),f?.(g)},[g,f]),Y=s.useCallback(()=>{g&&$(g),f?.(g)},[g,f]),Z=s.useCallback(()=>{C?.(D),D&&$(!1)},[D,C]);return e.jsxs(u,{children:[e.jsx(c,{sx:{width:z.spacing(6)},children:e.jsx(t.Text,{size:"xs",sx:{pl:1},children:n.formatTimeForVideoTimeline(h-o)})}),e.jsx(c,{sx:{flex:1},children:e.jsxs(d,{children:[j.length>0&&j.map(({startPercent:r,widthPercent:s},n)=>e.jsx(x,{left:r,width:s},n)),e.jsx(i,{step:.05,value:h,max:p,min:o,onChangeCommitted:U,onMouseDown:W,onChange:L,onTouchStart:Y,onTouchEnd:Z}),S&&S?.length>0&&e.jsx(l,{markerIndicatorMode:v,markerIndicatorSize:y,markerIndicator:k,markers:S,marker:b,containerProps:q,startTime:o,currentTime:h,endTime:p})]})}),e.jsx(c,{children:e.jsx(t.Text,{size:"xs",sx:{pr:1},children:n.formatTimeForVideoTimeline(p-o)})}),F&&e.jsx(c,{sx:{mr:z.spacing(z.custom.padding.xs)},children:e.jsx(m,{volume:I,muted:V,handleVolumeMute:w,handleVolumeChange:M,volumeControlsType:P})}),B&&e.jsx(c,{sx:{mr:z.spacing(z.custom.padding.xs)},children:e.jsx(a,{isFullScreen:E,handlefullscreenToggle:R})})]})});module.exports=h;
|
package/dist/systems/Platform/VideoControls2/components/Timeline/components/Markers/Markers.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("react"),a=require("../../../../../../../utils/valueToPercentage.js");const
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),i=require("react"),a=require("../../../../../../../utils/valueToPercentage.js");const s=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:"100%",marginTop:e.spacing((e.breakpoints.down("lg"),e.custom.margin.xs)),left:0,display:"flex",alignItems:"center",width:"100%",height:18})),o=t.styled(t.Box)(({theme:e,width:t,left:r})=>({position:"absolute",background:e.custom.palette.neutralAlpha[2],opacity:1,borderRadius:18,height:18,pointerEvents:"none",top:0,left:`${r}%`,width:`${t}%`,zIndex:0,"&:after":{content:'" "',position:"absolute",width:"100%",height:78,top:38,borderRadius:e.spacing(e.custom.radius.md),background:e.custom.palette.neutralAlpha[1]}})),n=t.styled(t.Box,{shouldForwardProp:e=>"isActive"!==e})(({theme:e,isActive:t})=>({position:"absolute",background:e.custom.palette.purple[500],height:8,width:8,borderRadius:8,...t?{transform:"translateX(-50%) scale(1)"}:{transform:"translateX(-50%) scale(0.5)"},transition:"all 0.2s, background 0.2s"}));var m=i.memo(({startTime:t,endTime:m,currentTime:l,markers:u=[],markerIndicator:d=!0,markerIndicatorSize:c=3,markerIndicatorMode:p,marker:h,containerProps:g})=>{const x=i.useMemo(()=>a.valueToPercentage(m-t,l-t),[l,t,m]),b=i.useMemo(()=>"time"===p?c:(m-t)*c,[m,t,p,c]),{width:k,left:f}=i.useMemo(()=>{const e=m-t,r=(l-t)/e;let i;i="time"===p?c/e*100:100*c;const a=i/2,s=100*r,o=100-100*r,n=Math.min(a,s);return{width:n+Math.min(a,o),left:x-n}},[l,t,m,x,p,c]),v=i.useMemo(()=>u.map(({timeStamp:e,id:r,meta:i})=>({id:r,timeStamp:e,markerPosition:a.valueToPercentage(m-t,e),isActive:Math.abs(e-l+t)<=b/2+1e-10,meta:i})),[u,m,t,l,b]),w=h||n;return e.jsxs(s,{...g,sx:r.mergeSx(g?.sx),children:[d&&e.jsx(o,{width:k,left:f}),v.map(({id:t,markerPosition:r,isActive:i,meta:a})=>e.jsx(w,{isActive:i,sx:{zIndex:2,left:`${r}%`},...a&&{meta:a}},t))]})});module.exports=m;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@mui/material");require("react");var t=require("../../../utils/shouldForwardProp.js"),i=require("../ButtonBase/Button.variant-helpers.js"),
|
|
1
|
+
"use strict";var e=require("@mui/material");require("react");var t=require("../../../utils/shouldForwardProp.js"),i=require("../ButtonBase/Button.variant-helpers.js"),a=require("../styleblocks/focusedStyle.js"),l=require("../styleblocks/selectedStyle.js"),s=require("./pill.helpers.js");const r=e.styled(e.Box,{shouldForwardProp:t.omitProps("active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions","loading","secondaryLabel","slots","slotProps")})(({theme:e,active:t,disabled:r,sizing:o,onDelete:d,freezeInteractions:n,loading:c})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:i.buttonHeightMap[o||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:d?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:n?"auto":"pointer",...s.pillDefaultState(e),...t&&l.selectedState(e),...(r||c)&&s.pillDisabledState(e),"&:hover":{...s.pillDefaultStateHover(e),...(r||c)&&s.pillDisabledState(e),...t&&l.selectedStateHover(e),...n&&s.pillDefaultState(e),...n&&t&&l.selectedState(e)},"&:active":{...s.pillDefaultStateActive(e),...(r||c)&&s.pillDisabledState(e),...t&&l.selectedStateActive(e),...n&&s.pillDefaultState(e),...n&&t&&l.selectedState(e)},"&:focus-visible":{...a.focusedInputState(e)}}));module.exports=r;
|