@skodaflow/web-library 8.4.0 → 8.5.0

package/cjs/components/videoPlayer/VideoPlayerSoundButton.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentType, type RefObject } from 'react';
+import { SvgIconProps } from '@mui/material';
+import { VideoPlayerIconButtonProps } from './VideoPlayerIconButton';
+export interface VideoPlayerSoundButtonProps extends Omit<VideoPlayerIconButtonProps, 'title'> {
+    /**
+     * Ref to the controlled <video> element
+     */
+    videoRef: RefObject<HTMLVideoElement>;
+    /**
+     * Custom component for the icon shown while the video is not muted
+     */
+    SoundIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Custom component for the icon shown while the video is muted
+     */
+    MuteIconComponent?: ComponentType<SvgIconProps>;
+    /**
+     * Tooltip and aria-label while the video is not muted
+     * @default Mute video
+     */
+    muteTitle?: string;
+    /**
+     * Tooltip and aria-label while the video is muted
+     * @default Unmute video
+     */
+    unmuteTitle?: string;
+}
+/**
+ * Button that toggles mute of the video
+ */
+export declare const VideoPlayerSoundButton: React.FC<VideoPlayerSoundButtonProps>;

package/cjs/components/videoPlayer/VideoPlayerSoundButton.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),o=require("react"),t=require("../icon/stroke/AudioMidIcon.js"),i=require("../icon/stroke/AudioMuteIcon.js"),n=require("../video/useVideoSoundControls.js"),u=require("./VideoPlayerIconButton.js");const r=o.forwardRef(({videoRef:o,SoundIconComponent:r,MuteIconComponent:d,muteTitle:s="Mute video",unmuteTitle:c="Unmute video",onClick:l,...a},I)=>{const{isMuted:M,handleMuteToggle:V}=n.useVideoSoundControls(o),j=M?d??i.AudioMuteIcon:r??t.AudioMidIcon;return e.jsx(u.VideoPlayerIconButton,{ref:I,"data-testid":"VideoPlayerSound",title:M?c:s,onClick:e=>{l?.(e),V()},...a,children:e.jsx(j,{"data-testid":M?"VideoPlayerMuteIcon":"VideoPlayerSoundIcon"})})});exports.VideoPlayerSoundButton=r;
+//# sourceMappingURL=VideoPlayerSoundButton.js.map

package/cjs/components/videoPlayer/VideoPlayerSoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerSoundButton.js","sources":["../../../../../src/components/videoPlayer/VideoPlayerSoundButton.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, type MouseEvent, type RefObject } from 'react';\nimport { SvgIconProps } from '@mui/material';\nimport { AudioMidIcon } from '@/src/components/icon/stroke/AudioMidIcon';\nimport { AudioMuteIcon } from '@/src/components/icon/stroke/AudioMuteIcon';\nimport { useVideoSoundControls } from '@/src/components/video/useVideoSoundControls';\nimport { VideoPlayerIconButton, VideoPlayerIconButtonProps } from './VideoPlayerIconButton';\n\nexport interface VideoPlayerSoundButtonProps extends Omit<VideoPlayerIconButtonProps, 'title'> {\n  /**\n   * Ref to the controlled <video> element\n   */\n  videoRef: RefObject<HTMLVideoElement>;\n  /**\n   * Custom component for the icon shown while the video is not muted\n   */\n  SoundIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Custom component for the icon shown while the video is muted\n   */\n  MuteIconComponent?: ComponentType<SvgIconProps>;\n  /**\n   * Tooltip and aria-label while the video is not muted\n   * @default Mute video\n   */\n  muteTitle?: string;\n  /**\n   * Tooltip and aria-label while the video is muted\n   * @default Unmute video\n   */\n  unmuteTitle?: string;\n}\n\n/**\n * Button that toggles mute of the video\n */\nexport const VideoPlayerSoundButton: React.FC<VideoPlayerSoundButtonProps> = forwardRef(\n  (\n    {\n      videoRef,\n      SoundIconComponent,\n      MuteIconComponent,\n      muteTitle = 'Mute video',\n      unmuteTitle = 'Unmute video',\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { isMuted, handleMuteToggle } = useVideoSoundControls(videoRef);\n    const Icon = isMuted ? (MuteIconComponent ?? AudioMuteIcon) : (SoundIconComponent ?? AudioMidIcon);\n\n    return (\n      <VideoPlayerIconButton\n        ref={ref}\n        data-testid=\"VideoPlayerSound\"\n        title={isMuted ? unmuteTitle : muteTitle}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event);\n          handleMuteToggle();\n        }}\n        {...rest}\n      >\n        <Icon data-testid={isMuted ? 'VideoPlayerMuteIcon' : 'VideoPlayerSoundIcon'} />\n      </VideoPlayerIconButton>\n    );\n  },\n);\n"],"names":["VideoPlayerSoundButton","forwardRef","videoRef","SoundIconComponent","MuteIconComponent","muteTitle","unmuteTitle","onClick","rest","ref","isMuted","handleMuteToggle","useVideoSoundControls","Icon","AudioMuteIcon","AudioMidIcon","_jsx","VideoPlayerIconButton","title","event","children"],"mappings":"mPAmCO,MAAMA,EAAgEC,EAAAA,WAC3E,EAEIC,WACAC,qBACAC,oBACAC,YAAY,aACZC,cAAc,eACdC,aACGC,GAELC,KAEA,MAAMC,QAAEA,EAAOC,iBAAEA,GAAqBC,EAAAA,sBAAsBV,GACtDW,EAAOH,EAAWN,GAAqBU,EAAAA,cAAkBX,GAAsBY,EAAAA,aAErF,OACEC,EAAAA,IAACC,EAAAA,sBAAqB,CACpBR,IAAKA,EAAG,cACI,mBACZS,MAAOR,EAAUJ,EAAcD,EAC/BE,QAAUY,IACRZ,IAAUY,GACVR,QAEEH,EAAIY,SAERJ,EAAAA,IAACH,EAAI,CAAA,cAAcH,EAAU,sBAAwB"}

package/cjs/components/videoPlayer/VideoPlayerTime.d.ts

@@ -0,0 +1,17 @@
+import React, { ElementType, type ReactNode, type RefObject } from 'react';
+import { TypographyProps } from '@mui/material';
+export interface VideoPlayerTimeProps extends TypographyProps<ElementType> {
+    /**
+     * Ref to the controlled <video> element
+     */
+    videoRef: RefObject<HTMLVideoElement>;
+    /**
+     * Formats the label from current time and duration in seconds
+     * @default `m:ss / m:ss`, or `h:mm:ss / h:mm:ss` for videos of one hour and more
+     */
+    formatTime?: (currentTime: number, duration: number) => ReactNode;
+}
+/**
+ * Current time and duration of the video
+ */
+export declare const VideoPlayerTime: React.FC<VideoPlayerTimeProps>;

package/cjs/components/videoPlayer/VideoPlayerTime.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("@mui/material"),t=require("../../utils/sxOverride/sxOverride.js"),o=require("../video/useVideoTime.js"),s=require("./formatVideoTime.js");const a=(e,i)=>`${s.formatVideoTime(e,i)} / ${s.formatVideoTime(i)}`,m=i.forwardRef(({videoRef:i,formatTime:s=a,sx:m,...n},d)=>{const{currentTime:x,duration:u}=o.useVideoTime(i);return e.jsx(r.Typography,{ref:d,"data-testid":"VideoPlayerTime",component:"span",variant:"body",sx:t.sxOverride({display:"flex",alignItems:"center",justifyContent:"flex-start",minHeight:"44px",color:"common.white",whiteSpace:"nowrap",userSelect:"none",fontWeight:{xs:"400"},fontSize:{xs:"12px",md:"16px"},lineHeight:{xs:"12px",md:"21px"},letterSpacing:{xs:"0.002em"}},m),...n,children:s(x,u??0)})});exports.VideoPlayerTime=m;
+//# sourceMappingURL=VideoPlayerTime.js.map

package/cjs/components/videoPlayer/VideoPlayerTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerTime.js","sources":["../../../../../src/components/videoPlayer/VideoPlayerTime.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, type ReactNode, type RefObject } from 'react';\nimport { Typography, TypographyProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { useVideoTime } from '@/src/components/video/useVideoTime';\nimport { formatVideoTime } from './formatVideoTime';\n\nexport interface VideoPlayerTimeProps extends TypographyProps<ElementType> {\n  /**\n   * Ref to the controlled <video> element\n   */\n  videoRef: RefObject<HTMLVideoElement>;\n  /**\n   * Formats the label from current time and duration in seconds\n   * @default `m:ss / m:ss`, or `h:mm:ss / h:mm:ss` for videos of one hour and more\n   */\n  formatTime?: (currentTime: number, duration: number) => ReactNode;\n}\n\n/**\n * Formats current time and duration with the same segments\n */\nconst defaultFormatTime = (currentTime: number, duration: number): string =>\n  `${formatVideoTime(currentTime, duration)} / ${formatVideoTime(duration)}`;\n\n/**\n * Current time and duration of the video\n */\nexport const VideoPlayerTime: React.FC<VideoPlayerTimeProps> = forwardRef<HTMLSpanElement, VideoPlayerTimeProps>(\n  ({ videoRef, formatTime = defaultFormatTime, sx, ...rest }, ref) => {\n    const { currentTime, duration } = useVideoTime(videoRef);\n\n    return (\n      <Typography\n        ref={ref}\n        data-testid=\"VideoPlayerTime\"\n        component=\"span\"\n        variant=\"body\"\n        sx={sxOverride(\n          {\n            // same height as the icon buttons, keeps the toolbar height when the label is alone\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'flex-start',\n            minHeight: '44px',\n            color: 'common.white',\n            whiteSpace: 'nowrap',\n            userSelect: 'none',\n            // custom font according to Figma\n            fontWeight: { xs: '400' },\n            fontSize: { xs: '12px', md: '16px' },\n            lineHeight: { xs: '12px', md: '21px' },\n            letterSpacing: { xs: '0.002em' },\n          },\n          sx,\n        )}\n        {...rest}\n      >\n        {formatTime(currentTime, duration ?? 0)}\n      </Typography>\n    );\n  },\n);\n"],"names":["defaultFormatTime","currentTime","duration","formatVideoTime","VideoPlayerTime","forwardRef","videoRef","formatTime","sx","rest","ref","useVideoTime","_jsx","Typography","component","variant","sxOverride","display","alignItems","justifyContent","minHeight","color","whiteSpace","userSelect","fontWeight","xs","fontSize","md","lineHeight","letterSpacing"],"mappings":"wNAqBA,MAAMA,EAAoB,CAACC,EAAqBC,IAC9C,GAAGC,EAAAA,gBAAgBF,EAAaC,QAAeC,kBAAgBD,KAKpDE,EAAkDC,EAAAA,WAC7D,EAAGC,WAAUC,aAAaP,EAAmBQ,QAAOC,GAAQC,KAC1D,MAAMT,YAAEA,EAAWC,SAAEA,GAAaS,EAAAA,aAAaL,GAE/C,OACEM,EAAAA,IAACC,EAAAA,WAAU,CACTH,IAAKA,gBACO,kBACZI,UAAU,OACVC,QAAQ,OACRP,GAAIQ,EAAAA,WACF,CAEEC,QAAS,OACTC,WAAY,SACZC,eAAgB,aAChBC,UAAW,OACXC,MAAO,eACPC,WAAY,SACZC,WAAY,OAEZC,WAAY,CAAEC,GAAI,OAClBC,SAAU,CAAED,GAAI,OAAQE,GAAI,QAC5BC,WAAY,CAAEH,GAAI,OAAQE,GAAI,QAC9BE,cAAe,CAAEJ,GAAI,YAEvBjB,MAEEC,WAEHF,EAAWN,EAAaC,GAAY"}

package/cjs/components/videoPlayer/formatVideoTime.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Formats seconds as `m:ss`, or `h:mm:ss` when the time or the provided duration reaches one hour,
+ * falling back to zero for negative/non-finite input
+ */
+export declare const formatVideoTime: (seconds: number, duration?: number) => string;

package/cjs/components/videoPlayer/formatVideoTime.js

@@ -0,0 +1,2 @@
+"use strict";const t=3600;exports.formatVideoTime=(o,r)=>{const a=Number.isFinite(o)&&o>0?Math.floor(o):0,e=(""+a%60).padStart(2,"0");if(Math.max(a,r||0)>=t){const o=`${Math.floor(a%t/60)}`.padStart(2,"0");return`${Math.floor(a/t)}:${o}:${e}`}return`${Math.floor(a/60)}:${e}`};
+//# sourceMappingURL=formatVideoTime.js.map

package/cjs/components/videoPlayer/formatVideoTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatVideoTime.js","sources":["../../../../../src/components/videoPlayer/formatVideoTime.ts"],"sourcesContent":["/** Seconds in one hour */\nconst HOUR_SECONDS = 3600;\n\n/**\n * Formats seconds as `m:ss`, or `h:mm:ss` when the time or the provided duration reaches one hour,\n * falling back to zero for negative/non-finite input\n */\nexport const formatVideoTime = (seconds: number, duration?: number): string => {\n  const totalSeconds = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const remainingSeconds = `${totalSeconds % 60}`.padStart(2, '0');\n\n  if (Math.max(totalSeconds, duration || 0) >= HOUR_SECONDS) {\n    const minutes = `${Math.floor((totalSeconds % HOUR_SECONDS) / 60)}`.padStart(2, '0');\n    return `${Math.floor(totalSeconds / HOUR_SECONDS)}:${minutes}:${remainingSeconds}`;\n  }\n  return `${Math.floor(totalSeconds / 60)}:${remainingSeconds}`;\n};\n"],"names":["HOUR_SECONDS","seconds","duration","totalSeconds","Number","isFinite","Math","floor","remainingSeconds","padStart","max","minutes"],"mappings":"aACA,MAAMA,EAAe,6BAMU,CAACC,EAAiBC,KAC/C,MAAMC,EAAeC,OAAOC,SAASJ,IAAYA,EAAU,EAAIK,KAAKC,MAAMN,GAAW,EAC/EO,GAAmB,GAAGL,EAAe,IAAKM,SAAS,EAAG,KAE5D,GAAIH,KAAKI,IAAIP,EAAcD,GAAY,IAAMF,EAAc,CACzD,MAAMW,EAAU,GAAGL,KAAKC,MAAOJ,EAAeH,EAAgB,MAAMS,SAAS,EAAG,KAChF,MAAO,GAAGH,KAAKC,MAAMJ,EAAeH,MAAiBW,KAAWH,GAClE,CACA,MAAO,GAAGF,KAAKC,MAAMJ,EAAe,OAAOK"}

package/cjs/components/videoPlayer/index.d.ts

@@ -0,0 +1,10 @@
+export * from './VideoPlayer';
+export * from './VideoPlayerIconButton';
+export * from './VideoPlayerPlayPauseButton';
+export * from './VideoPlayerSkipButton';
+export * from './VideoPlayerSoundButton';
+export * from './VideoPlayerFullscreenButton';
+export * from './VideoPlayerSlider';
+export * from './VideoPlayerTime';
+export * from './formatVideoTime';
+export * from './useVideoPlayerVisibility';

package/cjs/components/videoPlayer/useVideoPlayerVisibility.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+export interface VideoPlayerVisibilityOptions {
+    /**
+     * Inactivity in ms after which the controls hide while the video is playing
+     */
+    hideDelay: number;
+    /**
+     * Keeps the controls always visible
+     */
+    disabled?: boolean;
+}
+interface VideoPlayerVisibility {
+    /** Whether the controls should be shown */
+    visible: boolean;
+    /** Shows the controls and restarts the hide delay, call on pointer and keyboard activity */
+    handleActivity: () => void;
+    /** Hides the controls right away, call when the pointer leaves the player */
+    handleLeave: () => void;
+}
+/**
+ * Hides the controls while the video is playing and the user is inactive or leaves the player
+ */
+export declare const useVideoPlayerVisibility: (videoRef: RefObject<HTMLVideoElement>, { hideDelay, disabled }: VideoPlayerVisibilityOptions) => VideoPlayerVisibility;
+export {};

package/cjs/components/videoPlayer/useVideoPlayerVisibility.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),i=require("../video/useVideoPlayPause.js");exports.useVideoPlayerVisibility=(u,{hideDelay:r,disabled:t})=>{const{isPlaying:a}=i.useVideoPlayPause(u),[s,l]=e.useState(!0),c=e.useRef(void 0),o=e.useCallback(()=>{l(!0),clearTimeout(c.current),c.current=setTimeout(()=>l(!1),r)},[r]),d=e.useCallback(()=>{clearTimeout(c.current),l(!1)},[]);return e.useEffect(()=>{a&&o()},[a,o]),e.useEffect(()=>()=>clearTimeout(c.current),[]),{visible:!!t||!a||s,handleActivity:o,handleLeave:d}};
+//# sourceMappingURL=useVideoPlayerVisibility.js.map

package/cjs/components/videoPlayer/useVideoPlayerVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoPlayerVisibility.js","sources":["../../../../../src/components/videoPlayer/useVideoPlayerVisibility.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';\nimport { useVideoPlayPause } from '@/src/components/video/useVideoPlayPause';\n\nexport interface VideoPlayerVisibilityOptions {\n  /**\n   * Inactivity in ms after which the controls hide while the video is playing\n   */\n  hideDelay: number;\n  /**\n   * Keeps the controls always visible\n   */\n  disabled?: boolean;\n}\n\ninterface VideoPlayerVisibility {\n  /** Whether the controls should be shown */\n  visible: boolean;\n  /** Shows the controls and restarts the hide delay, call on pointer and keyboard activity */\n  handleActivity: () => void;\n  /** Hides the controls right away, call when the pointer leaves the player */\n  handleLeave: () => void;\n}\n\n/**\n * Hides the controls while the video is playing and the user is inactive or leaves the player\n */\nexport const useVideoPlayerVisibility = (\n  videoRef: RefObject<HTMLVideoElement>,\n  { hideDelay, disabled }: VideoPlayerVisibilityOptions,\n): VideoPlayerVisibility => {\n  const { isPlaying } = useVideoPlayPause(videoRef);\n  const [isActive, setIsActive] = useState(true);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const handleActivity = useCallback(() => {\n    setIsActive(true);\n    clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => setIsActive(false), hideDelay);\n  }, [hideDelay]);\n\n  const handleLeave = useCallback(() => {\n    clearTimeout(timeoutRef.current);\n    setIsActive(false);\n  }, []);\n\n  // restart the delay when playback starts, so autoplaying video hides the controls without any activity\n  useEffect(() => {\n    if (isPlaying) {\n      handleActivity();\n    }\n  }, [isPlaying, handleActivity]);\n\n  useEffect(() => () => clearTimeout(timeoutRef.current), []);\n\n  return {\n    visible: !!disabled || !isPlaying || isActive,\n    handleActivity,\n    handleLeave,\n  };\n};\n"],"names":["videoRef","hideDelay","disabled","isPlaying","useVideoPlayPause","isActive","setIsActive","useState","timeoutRef","useRef","undefined","handleActivity","useCallback","clearTimeout","current","setTimeout","handleLeave","useEffect","visible"],"mappings":"gHA0BwC,CACtCA,GACEC,YAAWC,eAEb,MAAMC,UAAEA,GAAcC,EAAAA,kBAAkBJ,IACjCK,EAAUC,GAAeC,EAAAA,UAAS,GACnCC,EAAaC,EAAAA,YAAsCC,GAEnDC,EAAiBC,EAAAA,YAAY,KACjCN,GAAY,GACZO,aAAaL,EAAWM,SACxBN,EAAWM,QAAUC,WAAW,IAAMT,GAAY,GAAQL,IACzD,CAACA,IAEEe,EAAcJ,EAAAA,YAAY,KAC9BC,aAAaL,EAAWM,SACxBR,GAAY,IACX,IAWH,OARAW,EAAAA,UAAU,KACJd,GACFQ,KAED,CAACR,EAAWQ,IAEfM,EAAAA,UAAU,IAAM,IAAMJ,aAAaL,EAAWM,SAAU,IAEjD,CACLI,UAAWhB,IAAaC,GAAaE,EACrCM,iBACAK"}