@skodaflow/web-library 7.15.1 → 7.16.1

package/components/upload/upload.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useRef as n,useState as i,useMemo as l,useCallback as o}from"react";import{UploadWrapper as a}from"./components/uploadWrapper/uploadWrapper.js";function s(e,t){if(!e.type)return!1;if("*"===t.trim())return!0;return t.split(",").some((t=>{if(t.includes("/*")){const r=t.split("/")[0];return e.type.startsWith(`${r}/`)}if(e.type.trim()===t.trim())return!0;if(t.startsWith(".")){const r=t.trim().toLowerCase();return e.name.toLowerCase().endsWith(r)}return!1}))}function u(u){var{children:p,currentFilesCount:f=0,onFileChange:c,inputProps:d={},maxFiles:g=1,state:m}=u,h=e(u,["children","currentFilesCount","onFileChange","inputProps","maxFiles","state"]);const v=n(null),[y,F]=i(!1),[x,C]=i(null),D=(null==d?void 0:d.accept)||"*",b=l((()=>y?"dragdropping":x?"error":m||"default"),[y,x,m]),P=o((e=>{e.stopPropagation(),e.preventDefault()}),[]),W=o((e=>e.filter((e=>s(e,D)))),[D,g]),j=o((()=>{c&&(x&&C(null),F(!0))}),[F]),E=o((()=>{F(!1)}),[F]),T=o((()=>{var e;x&&C(null),null===(e=v.current)||void 0===e||e.click()}),[]),k=o((e=>{e.preventDefault(),e.stopPropagation(),x&&C(null);const t=[...e.dataTransfer.files];if(f+t.length>g)return F(!1),void C({type:"maxFilesExceeded"});const r=t.filter((e=>!s(e,D)));if(r.length>0)return F(!1),void C({type:"invalidFileType",files:r});const n=W([...e.dataTransfer.files]);F(!1),n.length>0&&(null==c||c(n))}),[F,x,C,D,c,f]),w=o((e=>{e.preventDefault(),e.stopPropagation(),x&&C(null);const t=[...e.target.files];if(f+t.length>g)return F(!1),void C({type:"maxFilesExceeded"});const r=t.filter((e=>!s(e,D)));if(r.length>0)return void C({type:"invalidFileType",files:r});const n=W(t);n.length>0&&(null==c||c(n),v.current&&(v.current.value=""))}),[F,x,C,D,c,f]);return t(a,Object.assign({role:"button",tabIndex:0,"aria-label":"Upload file",state:b,onClick:T,onDragOver:P,onDrop:k,onDragEnter:j,onDragLeave:E,onKeyDown:e=>{"Enter"===e.key&&T()}},h,{children:["function"==typeof p?p({error:x,dragging:y}):p,r("input",Object.assign({ref:v,onChange:w},d,{hidden:!0,type:"file",multiple:g>1}))]}))}export{u as Upload};
+import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useRef as n,useState as i,useMemo as l,useCallback as o}from"react";import{UploadWrapper as a}from"./components/uploadWrapper/uploadWrapper.js";function s(e,t){if(!e.type)return!1;if("*"===t.trim())return!0;return t.split(",").some(t=>{if(t.includes("/*")){const r=t.split("/")[0];return e.type.startsWith(`${r}/`)}if(e.type.trim()===t.trim())return!0;if(t.startsWith(".")){const r=t.trim().toLowerCase();return e.name.toLowerCase().endsWith(r)}return!1})}function u(u){var{children:p,currentFilesCount:f=0,onFileChange:c,inputProps:d={},maxFiles:g=1,state:m}=u,h=e(u,["children","currentFilesCount","onFileChange","inputProps","maxFiles","state"]);const v=n(null),[y,F]=i(!1),[x,C]=i(null),D=(null==d?void 0:d.accept)||"*",b=l(()=>y?"dragdropping":x?"error":m||"default",[y,x,m]),P=o(e=>{e.stopPropagation(),e.preventDefault()},[]),W=o(e=>e.filter(e=>s(e,D)),[D,g]),j=o(()=>{c&&(x&&C(null),F(!0))},[F]),E=o(()=>{F(!1)},[F]),T=o(()=>{var e;x&&C(null),null===(e=v.current)||void 0===e||e.click()},[]),k=o(e=>{e.preventDefault(),e.stopPropagation(),x&&C(null);const t=[...e.dataTransfer.files];if(f+t.length>g)return F(!1),void C({type:"maxFilesExceeded"});const r=t.filter(e=>!s(e,D));if(r.length>0)return F(!1),void C({type:"invalidFileType",files:r});const n=W([...e.dataTransfer.files]);F(!1),n.length>0&&(null==c||c(n))},[F,x,C,D,c,f]),w=o(e=>{e.preventDefault(),e.stopPropagation(),x&&C(null);const t=[...e.target.files];if(f+t.length>g)return F(!1),void C({type:"maxFilesExceeded"});const r=t.filter(e=>!s(e,D));if(r.length>0)return void C({type:"invalidFileType",files:r});const n=W(t);n.length>0&&(null==c||c(n),v.current&&(v.current.value=""))},[F,x,C,D,c,f]);return t(a,Object.assign({role:"button",tabIndex:0,"aria-label":"Upload file",state:b,onClick:T,onDragOver:P,onDrop:k,onDragEnter:j,onDragLeave:E,onKeyDown:e=>{"Enter"===e.key&&T()}},h,{children:["function"==typeof p?p({error:x,dragging:y}):p,r("input",Object.assign({ref:v,onChange:w},d,{hidden:!0,type:"file",multiple:g>1}))]}))}export{u as Upload};
 //# sourceMappingURL=upload.js.map

package/components/upload/upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload.js","sources":["../../../src/components/upload/upload.tsx"],"sourcesContent":["import { ChangeEvent, DragEvent, HTMLProps, ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from './components/uploadWrapper/uploadWrapper';\n\nfunction isAcceptedFileType(file: File, acceptedTypes: string) {\n  if (!file.type) return false; // Avoid issues where file.type is empty\n\n  // If '*' is used, accept all files\n  if (acceptedTypes.trim() === '*') return true;\n\n  // Split the accepted types into an array\n  const accepted = acceptedTypes.split(',');\n\n  return accepted.some((type) => {\n    // Check for wildcards (image/*, video/*)\n    if (type.includes('/*')) {\n      const typePrefix = type.split('/')[0];\n      return file.type.startsWith(`${typePrefix}/`);\n    }\n    // Check for exact MIME types (image/jpeg, video/mp4)\n    if (file.type.trim() === type.trim()) {\n      return true;\n    }\n    // Check for file extension matches (e.g., .pdf, .csv)\n    if (type.startsWith('.')) {\n      const extension = type.trim().toLowerCase();\n      return file.name.toLowerCase().endsWith(extension);\n    }\n    return false;\n  });\n}\n\ntype UploadError = {\n  type: 'maxFilesExceeded' | 'invalidFileType';\n  files?: File[];\n} | null;\n\nexport interface UploadProps extends Omit<UploadWrapperProps, 'children'> {\n  /**\n   * Properties that will be passed to the input element.\n   */\n  inputProps?: Omit<HTMLProps<HTMLInputElement>, 'hidden' | 'type' | 'multiple'>;\n\n  /**\n   * Sets maximum files that are available.\n   * If maxFiles is bigger than 1 the input is type multiple.\n   * @default 1\n   */\n  maxFiles?: number;\n\n  /**\n   * Handler that is called when user provide files.\n   */\n  onFileChange?: (files: Array<File>) => void;\n\n  /**\n   * Children as a render function that gets error and dragging state.\n   */\n  children?: ReactNode | ((params: { error: UploadError; dragging: boolean }) => ReactNode);\n\n  /**\n   * Current number of uploaded files.\n   */\n  currentFilesCount?: number;\n}\n\nexport function Upload({\n  children,\n  currentFilesCount = 0,\n  onFileChange,\n  inputProps = {},\n  maxFiles = 1,\n  state,\n  ...restProps\n}: UploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState<boolean>(false);\n  const [error, setError] = useState<UploadError>(null);\n\n  const accept = inputProps?.accept || '*';\n\n  const currentState = useMemo(() => {\n    return dragging ? 'dragdropping' : error ? 'error' : state ? state : 'default';\n  }, [dragging, error, state]);\n\n  const preventDragOver = useCallback((event: DragEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  }, []);\n\n  const getFilteredFiles = useCallback(\n    (inputFiles: File[]) => inputFiles.filter((file) => isAcceptedFileType(file, accept)),\n    [accept, maxFiles],\n  );\n\n  const handleDragEnter = useCallback(() => {\n    if (!onFileChange) return;\n\n    error && setError(null); // reset error state if needed\n    setDragging(true);\n  }, [setDragging]);\n\n  const handleDragLeave = useCallback(() => {\n    setDragging(false);\n  }, [setDragging]);\n\n  const handleClick = useCallback(() => {\n    error && setError(null); // reset error state if needed\n    inputRef.current?.click();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.dataTransfer.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setDragging(false);\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles([...event.dataTransfer.files]);\n      setDragging(false);\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.target.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles(files);\n\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  return (\n    <UploadWrapper\n      role=\"button\"\n      tabIndex={0}\n      aria-label=\"Upload file\"\n      state={currentState}\n      onClick={handleClick}\n      onDragOver={preventDragOver}\n      onDrop={handleDrop}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') handleClick();\n      }}\n      {...restProps}\n    >\n      {typeof children === 'function' ? children({ error, dragging }) : children}\n      <input ref={inputRef} onChange={handleInputChange} {...inputProps} hidden type=\"file\" multiple={maxFiles > 1} />\n    </UploadWrapper>\n  );\n}\n"],"names":["isAcceptedFileType","file","acceptedTypes","type","trim","split","some","includes","typePrefix","startsWith","extension","toLowerCase","name","endsWith","Upload","_a","children","currentFilesCount","onFileChange","inputProps","maxFiles","state","restProps","__rest","inputRef","useRef","dragging","setDragging","useState","error","setError","accept","currentState","useMemo","preventDragOver","useCallback","event","stopPropagation","preventDefault","getFilteredFiles","inputFiles","filter","handleDragEnter","handleDragLeave","handleClick","current","click","handleDrop","files","dataTransfer","length","permittedFiles","filteredFiles","handleInputChange","target","value","_jsxs","UploadWrapper","role","tabIndex","onClick","onDragOver","onDrop","onDragEnter","onDragLeave","onKeyDown","key","_jsx","Object","assign","ref","onChange","hidden","multiple"],"mappings":"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"}
+{"version":3,"file":"upload.js","sources":["../../../src/components/upload/upload.tsx"],"sourcesContent":["import { ChangeEvent, DragEvent, HTMLProps, ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from './components/uploadWrapper/uploadWrapper';\n\nfunction isAcceptedFileType(file: File, acceptedTypes: string) {\n  if (!file.type) return false; // Avoid issues where file.type is empty\n\n  // If '*' is used, accept all files\n  if (acceptedTypes.trim() === '*') return true;\n\n  // Split the accepted types into an array\n  const accepted = acceptedTypes.split(',');\n\n  return accepted.some((type) => {\n    // Check for wildcards (image/*, video/*)\n    if (type.includes('/*')) {\n      const typePrefix = type.split('/')[0];\n      return file.type.startsWith(`${typePrefix}/`);\n    }\n    // Check for exact MIME types (image/jpeg, video/mp4)\n    if (file.type.trim() === type.trim()) {\n      return true;\n    }\n    // Check for file extension matches (e.g., .pdf, .csv)\n    if (type.startsWith('.')) {\n      const extension = type.trim().toLowerCase();\n      return file.name.toLowerCase().endsWith(extension);\n    }\n    return false;\n  });\n}\n\ntype UploadError = {\n  type: 'maxFilesExceeded' | 'invalidFileType';\n  files?: File[];\n} | null;\n\nexport interface UploadProps extends Omit<UploadWrapperProps, 'children'> {\n  /**\n   * Properties that will be passed to the input element.\n   */\n  inputProps?: Omit<HTMLProps<HTMLInputElement>, 'hidden' | 'type' | 'multiple'>;\n\n  /**\n   * Sets maximum files that are available.\n   * If maxFiles is bigger than 1 the input is type multiple.\n   * @default 1\n   */\n  maxFiles?: number;\n\n  /**\n   * Handler that is called when user provide files.\n   */\n  onFileChange?: (files: Array<File>) => void;\n\n  /**\n   * Children as a render function that gets error and dragging state.\n   */\n  children?: ReactNode | ((params: { error: UploadError; dragging: boolean }) => ReactNode);\n\n  /**\n   * Current number of uploaded files.\n   */\n  currentFilesCount?: number;\n}\n\nexport function Upload({\n  children,\n  currentFilesCount = 0,\n  onFileChange,\n  inputProps = {},\n  maxFiles = 1,\n  state,\n  ...restProps\n}: UploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState<boolean>(false);\n  const [error, setError] = useState<UploadError>(null);\n\n  const accept = inputProps?.accept || '*';\n\n  const currentState = useMemo(() => {\n    return dragging ? 'dragdropping' : error ? 'error' : state ? state : 'default';\n  }, [dragging, error, state]);\n\n  const preventDragOver = useCallback((event: DragEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  }, []);\n\n  const getFilteredFiles = useCallback(\n    (inputFiles: File[]) => inputFiles.filter((file) => isAcceptedFileType(file, accept)),\n    [accept, maxFiles],\n  );\n\n  const handleDragEnter = useCallback(() => {\n    if (!onFileChange) return;\n\n    error && setError(null); // reset error state if needed\n    setDragging(true);\n  }, [setDragging]);\n\n  const handleDragLeave = useCallback(() => {\n    setDragging(false);\n  }, [setDragging]);\n\n  const handleClick = useCallback(() => {\n    error && setError(null); // reset error state if needed\n    inputRef.current?.click();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.dataTransfer.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setDragging(false);\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles([...event.dataTransfer.files]);\n      setDragging(false);\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.target.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles(files);\n\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  return (\n    <UploadWrapper\n      role=\"button\"\n      tabIndex={0}\n      aria-label=\"Upload file\"\n      state={currentState}\n      onClick={handleClick}\n      onDragOver={preventDragOver}\n      onDrop={handleDrop}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') handleClick();\n      }}\n      {...restProps}\n    >\n      {typeof children === 'function' ? children({ error, dragging }) : children}\n      <input ref={inputRef} onChange={handleInputChange} {...inputProps} hidden type=\"file\" multiple={maxFiles > 1} />\n    </UploadWrapper>\n  );\n}\n"],"names":["isAcceptedFileType","file","acceptedTypes","type","trim","split","some","includes","typePrefix","startsWith","extension","toLowerCase","name","endsWith","Upload","_a","children","currentFilesCount","onFileChange","inputProps","maxFiles","state","restProps","__rest","inputRef","useRef","dragging","setDragging","useState","error","setError","accept","currentState","useMemo","preventDragOver","useCallback","event","stopPropagation","preventDefault","getFilteredFiles","inputFiles","filter","handleDragEnter","handleDragLeave","handleClick","current","click","handleDrop","files","dataTransfer","length","permittedFiles","filteredFiles","handleInputChange","target","value","_jsxs","UploadWrapper","role","tabIndex","onClick","onDragOver","onDrop","onDragEnter","onDragLeave","onKeyDown","key","_jsx","Object","assign","ref","onChange","hidden","multiple"],"mappings":"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"}

package/components/video/Video.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as s}from"@mui/material";import{FileMissingIcon as i}from"../icon/stroke/FileMissingIcon.js";const n=t(((t,n)=>{var{src:c,type:l="video/mp4",noVidErrorMessage:a,sourceProps:p,poster:m,sx:d,autoPlay:u=!0,muted:y=!0,controls:f=!1,loop:g=!1,children:h}=t,x=o(t,["src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children"]);return e(s,Object.assign({component:"video","data-testid":"Video",poster:m,ref:n,autoPlay:u,muted:y,controls:f,loop:g,sx:Object.assign({display:"block",maxWidth:"100%"},d)},x,{children:[null!=h?h:r(s,Object.assign({component:"source",src:c,type:l},p)),null!=a?a:r(s,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:r(i,{})})]}))}));export{n as Video};
+import{__rest as o}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t}from"react";import{Box as s}from"@mui/material";import{FileMissingIcon as i}from"../icon/stroke/FileMissingIcon.js";const n=t((t,n)=>{var{src:c,type:l="video/mp4",noVidErrorMessage:a,sourceProps:p,poster:m,sx:d,autoPlay:u=!0,muted:y=!0,controls:f=!1,loop:g=!1,children:h}=t,x=o(t,["src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children"]);return e(s,Object.assign({component:"video","data-testid":"Video",poster:m,ref:n,autoPlay:u,muted:y,controls:f,loop:g,sx:Object.assign({display:"block",maxWidth:"100%"},d)},x,{children:[null!=h?h:r(s,Object.assign({component:"source",src:c,type:l},p)),null!=a?a:r(s,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:r(i,{})})]}))});export{n as Video};
 //# sourceMappingURL=Video.js.map

package/components/video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /** The message (or component) to display if the video cannot be loaded, @default <Icon name=\"file-missing\" /> centered inside the Box  */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Image to be shown while the video is downloading or until the user hits the play button. */\n  poster?: string;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n *  The Video component is a customizable video player built with React and Material-UI.\n *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.\n *  If children are provided, they are rendered inside the video element as source elements.\n *  If no children are provided, a default source element is used based on the src prop.\n *  @param videoRef - A reference to the video element.\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      noVidErrorMessage,\n      sourceProps,\n      poster,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        poster={poster}\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={{\n          display: 'block',\n          maxWidth: '100%',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","_a","ref","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","__rest","_jsxs","Box","Object","assign","component","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"4NAgCO,MAAMA,EAA8BC,GACzC,CACEC,EAcAC,KAdA,IAAAC,IACEA,EAAGC,KACHA,EAAO,YAAWC,kBAClBA,EAAiBC,YACjBA,EAAWC,OACXA,EAAMC,GACNA,EAAEC,SACFA,GAAW,EAAIC,MACfA,GAAQ,EAAIC,SACZA,GAAW,EAAKC,KAChBA,GAAO,EAAKC,SACZA,GAAQZ,EACLa,EAAIC,EAAAd,EAZT,gHAgBA,OACEe,EAACC,EAAGC,OAAAC,OAAA,CACFC,UAAU,QAAO,cACL,QACZb,OAAQA,EACRL,IAAKA,EACLO,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAEU,OAAAC,OAAA,CACAE,QAAS,QACTC,SAAU,QACPd,IAEDM,EAAI,CAAAD,SAAA,CAEPA,QAAAA,EAAYU,EAACN,iBAAIG,UAAU,SAASjB,IAAKA,EAAKC,KAAMA,GAAUE,IAC9DD,QAAAA,EACCkB,EAACN,EAAG,CAACT,GAAI,CAAEa,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQd,SACzGU,EAACK,EAAe,CAAA,QAGhB"}
+{"version":3,"file":"Video.js","sources":["../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /** The message (or component) to display if the video cannot be loaded, @default <Icon name=\"file-missing\" /> centered inside the Box  */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Image to be shown while the video is downloading or until the user hits the play button. */\n  poster?: string;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n *  The Video component is a customizable video player built with React and Material-UI.\n *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.\n *  If children are provided, they are rendered inside the video element as source elements.\n *  If no children are provided, a default source element is used based on the src prop.\n *  @param videoRef - A reference to the video element.\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      noVidErrorMessage,\n      sourceProps,\n      poster,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        poster={poster}\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={{\n          display: 'block',\n          maxWidth: '100%',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","_a","ref","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","__rest","_jsxs","Box","Object","assign","component","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"4NAgCO,MAAMA,EAA8BC,EACzC,CACEC,EAcAC,KAdA,IAAAC,IACEA,EAAGC,KACHA,EAAO,YAAWC,kBAClBA,EAAiBC,YACjBA,EAAWC,OACXA,EAAMC,GACNA,EAAEC,SACFA,GAAW,EAAIC,MACfA,GAAQ,EAAIC,SACZA,GAAW,EAAKC,KAChBA,GAAO,EAAKC,SACZA,GAAQZ,EACLa,EAAIC,EAAAd,EAZT,gHAgBA,OACEe,EAACC,EAAGC,OAAAC,OAAA,CACFC,UAAU,QAAO,cACL,QACZb,OAAQA,EACRL,IAAKA,EACLO,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAEU,OAAAC,OAAA,CACAE,QAAS,QACTC,SAAU,QACPd,IAEDM,EAAI,CAAAD,SAAA,CAEPA,QAAAA,EAAYU,EAACN,iBAAIG,UAAU,SAASjB,IAAKA,EAAKC,KAAMA,GAAUE,IAC9DD,QAAAA,EACCkB,EAACN,EAAG,CAACT,GAAI,CAAEa,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQd,SACzGU,EAACK,EAAe,CAAA"}

package/components/video/hooks.js

@@ -1,2 +1,2 @@
-import{useState as e,useEffect as r,useCallback as n}from"react";const t=t=>{var u;const[d,o]=e(null===(u=t.current)||void 0===u?void 0:u.muted),[i,a]=e(1);r((()=>{const e=null==t?void 0:t.current;e&&(void 0===d&&o(null==e?void 0:e.muted),t.current.muted=d,t.current.volume=i)}),[d,i,t]);const l=n((()=>{o((e=>!e))}),[]),v=n((e=>{a(e)}),[]);return{isMuted:d,handleMuteToggle:l,volume:i,handleVolumeChange:v}},u=t=>{var u;const[d,o]=e(!(null===(u=t.current)||void 0===u?void 0:u.paused));r((()=>{const e=null==t?void 0:t.current;e&&void 0===d&&o(!(null==e?void 0:e.paused));const r=()=>{(!e.autoplay||!e.ended)&&o(!0)},n=()=>o(!1);if(e)return e.addEventListener("pause",n),o(!e.paused),e.addEventListener("play",r),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",n)}}),[t]);const i=n((()=>{(null==t?void 0:t.current)&&(d?t.current.pause():t.current.play(),o((e=>!e)))}),[d,null==t?void 0:t.current]);return{isPlaying:d,handlePlayPause:i}},d=t=>{var u;const[d,o]=e(0),[i,a]=e(null===(u=t.current)||void 0===u?void 0:u.duration),l=n((()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.currentTime)&&o(t.current.currentTime)}),[t]),v=n((e=>{var r;(null===(r=t.current)||void 0===r?void 0:r.currentTime)&&(t.current.currentTime=e),o(e)}),[t]),c=n((()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.duration)&&a(t.current.duration)}),[t]);return r((()=>{const e=null==t?void 0:t.current;if(e)return e.addEventListener("loadedmetadata",c),e.addEventListener("timeupdate",l),()=>{e.removeEventListener("loadedmetadata",c),e.removeEventListener("timeupdate",l)}}),[c,l,t]),{currentTime:d,duration:i,handleSeek:v}};export{u as useVideoPlayPause,t as useVideoSoundControls,d as useVideoTime};
+import{useState as e,useEffect as r,useCallback as n}from"react";const t=t=>{var u;const[d,o]=e(null===(u=t.current)||void 0===u?void 0:u.muted),[i,a]=e(1);r(()=>{const e=null==t?void 0:t.current;e&&(void 0===d&&o(null==e?void 0:e.muted),t.current.muted=d,t.current.volume=i)},[d,i,t]);const l=n(()=>{o(e=>!e)},[]),v=n(e=>{a(e)},[]);return{isMuted:d,handleMuteToggle:l,volume:i,handleVolumeChange:v}},u=t=>{var u;const[d,o]=e(!(null===(u=t.current)||void 0===u?void 0:u.paused));r(()=>{const e=null==t?void 0:t.current;e&&void 0===d&&o(!(null==e?void 0:e.paused));const r=()=>{(!e.autoplay||!e.ended)&&o(!0)},n=()=>o(!1);if(e)return e.addEventListener("pause",n),o(!e.paused),e.addEventListener("play",r),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",n)}},[t]);const i=n(()=>{(null==t?void 0:t.current)&&(d?t.current.pause():t.current.play(),o(e=>!e))},[d,null==t?void 0:t.current]);return{isPlaying:d,handlePlayPause:i}},d=t=>{var u;const[d,o]=e(0),[i,a]=e(null===(u=t.current)||void 0===u?void 0:u.duration),l=n(()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.currentTime)&&o(t.current.currentTime)},[t]),v=n(e=>{var r;(null===(r=t.current)||void 0===r?void 0:r.currentTime)&&(t.current.currentTime=e),o(e)},[t]),c=n(()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.duration)&&a(t.current.duration)},[t]);return r(()=>{const e=null==t?void 0:t.current;if(e)return e.addEventListener("loadedmetadata",c),e.addEventListener("timeupdate",l),()=>{e.removeEventListener("loadedmetadata",c),e.removeEventListener("timeupdate",l)}},[c,l,t]),{currentTime:d,duration:i,handleSeek:v}};export{u as useVideoPlayPause,t as useVideoSoundControls,d as useVideoTime};
 //# sourceMappingURL=hooks.js.map

package/components/video/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/video/hooks.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState, RefObject } from 'react';\n\ninterface SoundControls {\n  /** A boolean indicating if the video is muted. */\n  isMuted: boolean;\n  /** handleMuteToggle: A function to toggle the mute state. */\n  handleMuteToggle: () => void;\n  /** A number representing the current volume level (0 to 1). */\n  volume: number;\n  /** A function to change the volume level. */\n  handleVolumeChange: (newVolume: number) => void;\n}\n\n/**\n * A custom hook to manage sound controls (mute and volume) for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoSoundControls = (videoRef: React.RefObject<HTMLVideoElement>): SoundControls => {\n  const [isMuted, setIsMuted] = useState(videoRef.current?.muted);\n  const [volume, setVolume] = useState(1);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      if (typeof isMuted === 'undefined') {\n        setIsMuted(video?.muted);\n      }\n\n      videoRef.current.muted = isMuted;\n      videoRef.current.volume = volume;\n    }\n  }, [isMuted, volume, videoRef]);\n\n  const handleMuteToggle = useCallback(() => {\n    setIsMuted((prevMuted) => !prevMuted);\n  }, []);\n\n  const handleVolumeChange = useCallback((newVolume: number) => {\n    setVolume(newVolume);\n  }, []);\n\n  return {\n    isMuted,\n    handleMuteToggle,\n    volume,\n    handleVolumeChange,\n  };\n};\n\ninterface PlayPause {\n  /** A boolean indicating if the video is currently playing. */\n  isPlaying: boolean;\n  /** A function to toggle between play and pause states. */\n  handlePlayPause: () => void;\n}\n\n/**\n * A custom hook to manage play/pause functionality for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoPlayPause = (videoRef: React.RefObject<HTMLVideoElement>): PlayPause => {\n  const [isPlaying, setIsPlaying] = useState(!videoRef.current?.paused);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n\n    if (video && typeof isPlaying === 'undefined') {\n      setIsPlaying(!video?.paused);\n    }\n\n    const handlePlay = () => {\n      // prevent playing state when autoplay triggers play event on re-entering viewport after video ended\n      !(video.autoplay && video.ended) && setIsPlaying(true);\n    };\n    const handlePause = () => setIsPlaying(false);\n\n    if (video) {\n      video.addEventListener('pause', handlePause);\n\n      // Set initial state (not enough without event listeners due to autoPlay and paused race conditions)\n      setIsPlaying(!video.paused);\n\n      video.addEventListener('play', handlePlay);\n\n      return () => {\n        video.removeEventListener('play', handlePlay);\n        video.removeEventListener('pause', handlePause);\n      };\n    }\n  }, [videoRef]);\n\n  const handlePlayPause = useCallback(() => {\n    if (videoRef?.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying((prevIsPlaying) => !prevIsPlaying);\n    }\n  }, [isPlaying, videoRef?.current]);\n\n  return {\n    isPlaying,\n    handlePlayPause,\n  };\n};\n\ninterface VideoTime {\n  /** The current playback time. */\n  currentTime: number;\n  /** The total duration of the video. */\n  duration: number;\n  /** A function to seek to a specific time. */\n  handleSeek: (newTime: number) => void;\n}\n\n/**\n * useVideoTime is a custom React hook designed to manage and synchronize the playback time state\n * of a video element with the React component state. It provides an interface to track the current\n * playback time, the total duration of the video, and a method to seek to a specific time in the video.\n * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.\n */\n\nexport const useVideoTime = (videoRef: RefObject<HTMLVideoElement>): VideoTime => {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(videoRef.current?.duration);\n\n  const handleTimeUpdate = useCallback(() => {\n    if (videoRef.current?.currentTime) {\n      setCurrentTime(videoRef.current.currentTime);\n    }\n  }, [videoRef]);\n\n  const handleSeek = useCallback(\n    (newTime: number) => {\n      if (videoRef.current?.currentTime) {\n        videoRef.current.currentTime = newTime;\n      }\n      setCurrentTime(newTime);\n    },\n    [videoRef],\n  );\n\n  const handleLoadedMetadata = useCallback(() => {\n    if (videoRef.current?.duration) {\n      setDuration(videoRef.current.duration);\n    }\n  }, [videoRef]);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      video.addEventListener('loadedmetadata', handleLoadedMetadata);\n      video.addEventListener('timeupdate', handleTimeUpdate);\n\n      return () => {\n        video.removeEventListener('loadedmetadata', handleLoadedMetadata);\n        video.removeEventListener('timeupdate', handleTimeUpdate);\n      };\n    }\n  }, [handleLoadedMetadata, handleTimeUpdate, videoRef]);\n\n  return {\n    currentTime,\n    duration,\n    handleSeek,\n  };\n};\n\n// TODO: MDX prepared, release it when we have production ready timeline\n// ### useVideoTime\n\n// Use the `useVideoTime` hook to manage the functionality of a custom video timeline, referencing the video element (videoRef in the example below).\n// The `handleSeek` function updates the current playback time of the video.\n// The `currentTime` state represents the current playback time, while the `duration` state indicates the total length of the video.\n\n// > The slider component in the example does not represent a custom control for production quality\n// > and it is included solely for demonstration purposes.\n\n// `currentTime`, `duration`, `handleSeek`\n// ```tsx\n// import { useVideoTime } from '@skodaflow/web-library';\n\n// const videoRef = useRef<HTMLVideoElement>(null);\n// const { currentTime, duration, handleSeek } = useVideoTime(videoRef);\n\n// <Box sx={{ display: 'grid', width: 'max-content' }}>\n//   <Video ref={videoRef} src={mp4ExampleVideo} style={{ gridArea: '1 / 1' }} />\n\n//   <Slider\n//     value={dragging ? tempValue : currentTime}\n//     max={duration}\n//     onChange={handleChange}\n//     onChangeCommitted={handleChangeCommitted}\n//     onMouseDown={handleDragStart}\n//     sx={{\n//       gridArea: '1 / 1',\n//       justifySelf: 'center',\n//       alignSelf: 'end',\n//       width: '95%',\n//     }}\n//   />\n// </Box>\n// ```\n\n// <Canvas of={VideoStories.WithTimeline} />\n"],"names":["useVideoSoundControls","videoRef","isMuted","setIsMuted","useState","_a","current","muted","volume","setVolume","useEffect","video","handleMuteToggle","useCallback","prevMuted","handleVolumeChange","newVolume","useVideoPlayPause","isPlaying","setIsPlaying","paused","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","pause","play","prevIsPlaying","useVideoTime","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"iEAiBO,MAAMA,EAAyBC,UACpC,MAAOC,EAASC,GAAcC,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEE,QAClDC,EAAQC,GAAaL,EAAS,GAErCM,GAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACpBK,SACqB,IAAZT,GACTC,EAAWQ,eAAAA,EAAOJ,OAGpBN,EAASK,QAAQC,MAAQL,EACzBD,EAASK,QAAQE,OAASA,EAC5B,GACC,CAACN,EAASM,EAAQP,IAErB,MAAMW,EAAmBC,GAAY,KACnCV,GAAYW,IAAeA,GAAU,GACpC,IAEGC,EAAqBF,GAAaG,IACtCP,EAAUO,EAAU,GACnB,IAEH,MAAO,CACLd,UACAU,mBACAJ,SACAO,qBACD,EAcUE,EAAqBhB,UAChC,MAAOiB,EAAWC,GAAgBf,YAAUC,EAAAJ,EAASK,8BAASc,SAE9DV,GAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QAEpBK,QAA8B,IAAdO,GAClBC,IAAcR,aAAK,EAALA,EAAOS,SAGvB,MAAMC,EAAa,OAEfV,EAAMW,WAAYX,EAAMY,QAAUJ,GAAa,EAAK,EAElDK,EAAc,IAAML,GAAa,GAEvC,GAAIR,EAQF,OAPAA,EAAMc,iBAAiB,QAASD,GAGhCL,GAAcR,EAAMS,QAEpBT,EAAMc,iBAAiB,OAAQJ,GAExB,KACLV,EAAMe,oBAAoB,OAAQL,GAClCV,EAAMe,oBAAoB,QAASF,EAAY,CAEnD,GACC,CAACvB,IAEJ,MAAM0B,EAAkBd,GAAY,MAC9BZ,aAAQ,EAARA,EAAUK,WACRY,EACFjB,EAASK,QAAQsB,QAEjB3B,EAASK,QAAQuB,OAEnBV,GAAcW,IAAmBA,IACnC,GACC,CAACZ,EAAWjB,aAAQ,EAARA,EAAUK,UAEzB,MAAO,CACLY,YACAS,kBACD,EAmBUI,EAAgB9B,UAC3B,MAAO+B,EAAaC,GAAkB7B,EAAS,IACxC8B,EAAUC,GAAe/B,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,UAErDE,EAAmBvB,GAAY,YACf,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,cACpBC,EAAehC,EAASK,QAAQ0B,YAClC,GACC,CAAC/B,IAEEoC,EAAaxB,GAChByB,WACqB,UAAhBrC,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,eACpB/B,EAASK,QAAQ0B,YAAcM,GAEjCL,EAAeK,EAAQ,GAEzB,CAACrC,IAGGsC,EAAuB1B,GAAY,YACnB,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,WACpBC,EAAYlC,EAASK,QAAQ4B,SAC/B,GACC,CAACjC,IAeJ,OAbAS,GAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACxB,GAAIK,EAIF,OAHAA,EAAMc,iBAAiB,iBAAkBc,GACzC5B,EAAMc,iBAAiB,aAAcW,GAE9B,KACLzB,EAAMe,oBAAoB,iBAAkBa,GAC5C5B,EAAMe,oBAAoB,aAAcU,EAAiB,CAE7D,GACC,CAACG,EAAsBH,EAAkBnC,IAErC,CACL+B,cACAE,WACAG,aACD"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/video/hooks.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState, RefObject } from 'react';\n\ninterface SoundControls {\n  /** A boolean indicating if the video is muted. */\n  isMuted: boolean;\n  /** handleMuteToggle: A function to toggle the mute state. */\n  handleMuteToggle: () => void;\n  /** A number representing the current volume level (0 to 1). */\n  volume: number;\n  /** A function to change the volume level. */\n  handleVolumeChange: (newVolume: number) => void;\n}\n\n/**\n * A custom hook to manage sound controls (mute and volume) for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoSoundControls = (videoRef: React.RefObject<HTMLVideoElement>): SoundControls => {\n  const [isMuted, setIsMuted] = useState(videoRef.current?.muted);\n  const [volume, setVolume] = useState(1);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      if (typeof isMuted === 'undefined') {\n        setIsMuted(video?.muted);\n      }\n\n      videoRef.current.muted = isMuted;\n      videoRef.current.volume = volume;\n    }\n  }, [isMuted, volume, videoRef]);\n\n  const handleMuteToggle = useCallback(() => {\n    setIsMuted((prevMuted) => !prevMuted);\n  }, []);\n\n  const handleVolumeChange = useCallback((newVolume: number) => {\n    setVolume(newVolume);\n  }, []);\n\n  return {\n    isMuted,\n    handleMuteToggle,\n    volume,\n    handleVolumeChange,\n  };\n};\n\ninterface PlayPause {\n  /** A boolean indicating if the video is currently playing. */\n  isPlaying: boolean;\n  /** A function to toggle between play and pause states. */\n  handlePlayPause: () => void;\n}\n\n/**\n * A custom hook to manage play/pause functionality for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoPlayPause = (videoRef: React.RefObject<HTMLVideoElement>): PlayPause => {\n  const [isPlaying, setIsPlaying] = useState(!videoRef.current?.paused);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n\n    if (video && typeof isPlaying === 'undefined') {\n      setIsPlaying(!video?.paused);\n    }\n\n    const handlePlay = () => {\n      // prevent playing state when autoplay triggers play event on re-entering viewport after video ended\n      !(video.autoplay && video.ended) && setIsPlaying(true);\n    };\n    const handlePause = () => setIsPlaying(false);\n\n    if (video) {\n      video.addEventListener('pause', handlePause);\n\n      // Set initial state (not enough without event listeners due to autoPlay and paused race conditions)\n      setIsPlaying(!video.paused);\n\n      video.addEventListener('play', handlePlay);\n\n      return () => {\n        video.removeEventListener('play', handlePlay);\n        video.removeEventListener('pause', handlePause);\n      };\n    }\n  }, [videoRef]);\n\n  const handlePlayPause = useCallback(() => {\n    if (videoRef?.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying((prevIsPlaying) => !prevIsPlaying);\n    }\n  }, [isPlaying, videoRef?.current]);\n\n  return {\n    isPlaying,\n    handlePlayPause,\n  };\n};\n\ninterface VideoTime {\n  /** The current playback time. */\n  currentTime: number;\n  /** The total duration of the video. */\n  duration: number;\n  /** A function to seek to a specific time. */\n  handleSeek: (newTime: number) => void;\n}\n\n/**\n * useVideoTime is a custom React hook designed to manage and synchronize the playback time state\n * of a video element with the React component state. It provides an interface to track the current\n * playback time, the total duration of the video, and a method to seek to a specific time in the video.\n * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.\n */\n\nexport const useVideoTime = (videoRef: RefObject<HTMLVideoElement>): VideoTime => {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(videoRef.current?.duration);\n\n  const handleTimeUpdate = useCallback(() => {\n    if (videoRef.current?.currentTime) {\n      setCurrentTime(videoRef.current.currentTime);\n    }\n  }, [videoRef]);\n\n  const handleSeek = useCallback(\n    (newTime: number) => {\n      if (videoRef.current?.currentTime) {\n        videoRef.current.currentTime = newTime;\n      }\n      setCurrentTime(newTime);\n    },\n    [videoRef],\n  );\n\n  const handleLoadedMetadata = useCallback(() => {\n    if (videoRef.current?.duration) {\n      setDuration(videoRef.current.duration);\n    }\n  }, [videoRef]);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      video.addEventListener('loadedmetadata', handleLoadedMetadata);\n      video.addEventListener('timeupdate', handleTimeUpdate);\n\n      return () => {\n        video.removeEventListener('loadedmetadata', handleLoadedMetadata);\n        video.removeEventListener('timeupdate', handleTimeUpdate);\n      };\n    }\n  }, [handleLoadedMetadata, handleTimeUpdate, videoRef]);\n\n  return {\n    currentTime,\n    duration,\n    handleSeek,\n  };\n};\n\n// TODO: MDX prepared, release it when we have production ready timeline\n// ### useVideoTime\n\n// Use the `useVideoTime` hook to manage the functionality of a custom video timeline, referencing the video element (videoRef in the example below).\n// The `handleSeek` function updates the current playback time of the video.\n// The `currentTime` state represents the current playback time, while the `duration` state indicates the total length of the video.\n\n// > The slider component in the example does not represent a custom control for production quality\n// > and it is included solely for demonstration purposes.\n\n// `currentTime`, `duration`, `handleSeek`\n// ```tsx\n// import { useVideoTime } from '@skodaflow/web-library';\n\n// const videoRef = useRef<HTMLVideoElement>(null);\n// const { currentTime, duration, handleSeek } = useVideoTime(videoRef);\n\n// <Box sx={{ display: 'grid', width: 'max-content' }}>\n//   <Video ref={videoRef} src={mp4ExampleVideo} style={{ gridArea: '1 / 1' }} />\n\n//   <Slider\n//     value={dragging ? tempValue : currentTime}\n//     max={duration}\n//     onChange={handleChange}\n//     onChangeCommitted={handleChangeCommitted}\n//     onMouseDown={handleDragStart}\n//     sx={{\n//       gridArea: '1 / 1',\n//       justifySelf: 'center',\n//       alignSelf: 'end',\n//       width: '95%',\n//     }}\n//   />\n// </Box>\n// ```\n\n// <Canvas of={VideoStories.WithTimeline} />\n"],"names":["useVideoSoundControls","videoRef","isMuted","setIsMuted","useState","_a","current","muted","volume","setVolume","useEffect","video","handleMuteToggle","useCallback","prevMuted","handleVolumeChange","newVolume","useVideoPlayPause","isPlaying","setIsPlaying","paused","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","pause","play","prevIsPlaying","useVideoTime","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"iEAiBO,MAAMA,EAAyBC,UACpC,MAAOC,EAASC,GAAcC,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEE,QAClDC,EAAQC,GAAaL,EAAS,GAErCM,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACpBK,SACqB,IAAZT,GACTC,EAAWQ,eAAAA,EAAOJ,OAGpBN,EAASK,QAAQC,MAAQL,EACzBD,EAASK,QAAQE,OAASA,IAE3B,CAACN,EAASM,EAAQP,IAErB,MAAMW,EAAmBC,EAAY,KACnCV,EAAYW,IAAeA,IAC1B,IAEGC,EAAqBF,EAAaG,IACtCP,EAAUO,IACT,IAEH,MAAO,CACLd,UACAU,mBACAJ,SACAO,uBAeSE,EAAqBhB,UAChC,MAAOiB,EAAWC,GAAgBf,YAAUC,EAAAJ,EAASK,8BAASc,SAE9DV,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QAEpBK,QAA8B,IAAdO,GAClBC,IAAcR,aAAK,EAALA,EAAOS,SAGvB,MAAMC,EAAa,OAEfV,EAAMW,WAAYX,EAAMY,QAAUJ,GAAa,IAE7CK,EAAc,IAAML,GAAa,GAEvC,GAAIR,EAQF,OAPAA,EAAMc,iBAAiB,QAASD,GAGhCL,GAAcR,EAAMS,QAEpBT,EAAMc,iBAAiB,OAAQJ,GAExB,KACLV,EAAMe,oBAAoB,OAAQL,GAClCV,EAAMe,oBAAoB,QAASF,KAGtC,CAACvB,IAEJ,MAAM0B,EAAkBd,EAAY,MAC9BZ,aAAQ,EAARA,EAAUK,WACRY,EACFjB,EAASK,QAAQsB,QAEjB3B,EAASK,QAAQuB,OAEnBV,EAAcW,IAAmBA,KAElC,CAACZ,EAAWjB,aAAQ,EAARA,EAAUK,UAEzB,MAAO,CACLY,YACAS,oBAoBSI,EAAgB9B,UAC3B,MAAO+B,EAAaC,GAAkB7B,EAAS,IACxC8B,EAAUC,GAAe/B,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,UAErDE,EAAmBvB,EAAY,YACf,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,cACpBC,EAAehC,EAASK,QAAQ0B,cAEjC,CAAC/B,IAEEoC,EAAaxB,EAChByB,WACqB,UAAhBrC,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,eACpB/B,EAASK,QAAQ0B,YAAcM,GAEjCL,EAAeK,IAEjB,CAACrC,IAGGsC,EAAuB1B,EAAY,YACnB,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,WACpBC,EAAYlC,EAASK,QAAQ4B,WAE9B,CAACjC,IAeJ,OAbAS,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACxB,GAAIK,EAIF,OAHAA,EAAMc,iBAAiB,iBAAkBc,GACzC5B,EAAMc,iBAAiB,aAAcW,GAE9B,KACLzB,EAAMe,oBAAoB,iBAAkBa,GAC5C5B,EAAMe,oBAAoB,aAAcU,KAG3C,CAACG,EAAsBH,EAAkBnC,IAErC,CACL+B,cACAE,WACAG"}