@skodaflow/web-library 8.4.0 → 8.5.0

package/materialui/theme/theme.extensions.d.ts

@@ -319,7 +319,28 @@ declare module '@mui/material/Avatar' {
         border?: 'auto' | 'on' | 'off';
     }
 }
+declare module '@mui/material/Tab' {
+    interface TabOwnProps {
+        /**
+         * Only the selected tab is a tab stop, the others are reached with arrow keys
+         * @default false
+         */
+        rovingTabIndex?: boolean;
+    }
+}
 declare module '@mui/material/Tabs' {
+    interface TabsScrollButtonsSlotPropsOverrides {
+        /**
+         * Label of the button scrolling to the start
+         * @default Scroll left
+         */
+        scrollLeftTitle?: string;
+        /**
+         * Label of the button scrolling to the end
+         * @default Scroll right
+         */
+        scrollRightTitle?: string;
+    }
     interface TabsOwnProps {
         /**
          * Default or rounded buttons variant
@@ -455,6 +476,14 @@ declare module '@mui/material/InputLabel' {
         'data-variant'?: 'standard' | 'static';
     }
 }
+declare module '@mui/material/AccordionSummary' {
+    interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {
+        /**
+         * Properties applied to expand/collapse IconButton
+         */
+        iconButtonProps?: IconButtonProps;
+    }
+}
 declare module '@mui/material/DialogTitle' {
     interface DialogTitleOwnProps {
         /**

package/package.json

@@ -1 +1 @@
-{"name":"@skodaflow/web-library","version":"8.4.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.10 || ^9.0.0","@mui/system":"^7.3.10 || ^9.0.0","@mui/x-date-pickers":"^9.0.0","country-flag-icons":"^1.6.15","react":"^18.3.1 || ^19.2.4","react-dom":"^18.3.1 || ^19.2.4","swiper":"^12.1.3"},"dependencies":{"@skodaflow/web-tokens":"3.2.0","stylis":"4.4.0","stylis-plugin-rtl":"2.1.1","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}
+{"name":"@skodaflow/web-library","version":"8.5.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","type":"module","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.10 || ^9.0.0","@mui/system":"^7.3.10 || ^9.0.0","@mui/x-date-pickers":"^9.0.0","country-flag-icons":"^1.6.15","react":"^18.3.1 || ^19.2.4","react-dom":"^18.3.1 || ^19.2.4","swiper":"^12.1.3 || ^14.0.0"},"dependencies":{"@skodaflow/web-tokens":"3.2.0","stylis":"4.4.0","stylis-plugin-rtl":"2.1.1","tslib":"2.9.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}

package/cjs/components/video/hooks.d.ts

@@ -1,43 +0,0 @@
-import React, { RefObject } from 'react';
-interface SoundControls {
-    /** A boolean indicating if the video is muted. */
-    isMuted: boolean;
-    /** handleMuteToggle: A function to toggle the mute state. */
-    handleMuteToggle: () => void;
-    /** A number representing the current volume level (0 to 1). */
-    volume: number;
-    /** A function to change the volume level. */
-    handleVolumeChange: (newVolume: number) => void;
-}
-/**
- * A custom hook to manage sound controls (mute and volume) for a video element.
- * @param videoRef - A reference to the video element.
- */
-export declare const useVideoSoundControls: (videoRef: React.RefObject<HTMLVideoElement>) => SoundControls;
-interface PlayPause {
-    /** A boolean indicating if the video is currently playing. */
-    isPlaying: boolean;
-    /** A function to toggle between play and pause states. */
-    handlePlayPause: () => void;
-}
-/**
- * A custom hook to manage play/pause functionality for a video element.
- * @param videoRef - A reference to the video element.
- */
-export declare const useVideoPlayPause: (videoRef: React.RefObject<HTMLVideoElement>) => PlayPause;
-interface VideoTime {
-    /** The current playback time. */
-    currentTime: number;
-    /** The total duration of the video. */
-    duration: number;
-    /** A function to seek to a specific time. */
-    handleSeek: (newTime: number) => void;
-}
-/**
- * useVideoTime is a custom React hook designed to manage and synchronize the playback time state
- * of a video element with the React component state. It provides an interface to track the current
- * playback time, the total duration of the video, and a method to seek to a specific time in the video.
- * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.
- */
-export declare const useVideoTime: (videoRef: RefObject<HTMLVideoElement>) => VideoTime;
-export {};

package/cjs/components/video/hooks.js

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

package/cjs/components/video/hooks.js.map

@@ -1 +0,0 @@
-{"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().catch(() => {});\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"],"names":["videoRef","isPlaying","setIsPlaying","useState","current","paused","useEffect","video","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","useCallback","pause","play","catch","prevIsPlaying","isMuted","setIsMuted","muted","volume","setVolume","handleMuteToggle","prevMuted","handleVolumeChange","newVolume","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"8DA4DkCA,IAChC,MAAOC,EAAWC,GAAgBC,EAAAA,UAAUH,EAASI,SAASC,QAE9DC,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QAEpBG,QAA8B,IAAdN,GAClBC,GAAcK,GAAOF,QAGvB,MAAMG,EAAa,OAEfD,EAAME,WAAYF,EAAMG,QAAUR,GAAa,IAE7CS,EAAc,IAAMT,GAAa,GAEvC,GAAIK,EAQF,OAPAA,EAAMK,iBAAiB,QAASD,GAGhCT,GAAcK,EAAMF,QAEpBE,EAAMK,iBAAiB,OAAQJ,GAExB,KACLD,EAAMM,oBAAoB,OAAQL,GAClCD,EAAMM,oBAAoB,QAASF,KAGtC,CAACX,IAEJ,MAAMc,EAAkBC,EAAAA,YAAY,KAC9Bf,GAAUI,UACRH,EACFD,EAASI,QAAQY,QAEjBhB,EAASI,QAAQa,OAAOC,MAAM,QAEhChB,EAAciB,IAAmBA,KAElC,CAAClB,EAAWD,GAAUI,UAEzB,MAAO,CACLH,YACAa,kDAvFkCd,IACpC,MAAOoB,EAASC,GAAclB,EAAAA,SAASH,EAASI,SAASkB,QAClDC,EAAQC,GAAarB,EAAAA,SAAS,GAErCG,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QACpBG,SACqB,IAAZa,GACTC,EAAWd,GAAOe,OAGpBtB,EAASI,QAAQkB,MAAQF,EACzBpB,EAASI,QAAQmB,OAASA,IAE3B,CAACH,EAASG,EAAQvB,IAErB,MAAMyB,EAAmBV,EAAAA,YAAY,KACnCM,EAAYK,IAAeA,IAC1B,IAEGC,EAAqBZ,cAAaa,IACtCJ,EAAUI,IACT,IAEH,MAAO,CACLR,UACAK,mBACAF,SACAI,4CA+EyB3B,IAC3B,MAAO6B,EAAaC,GAAkB3B,EAAAA,SAAS,IACxC4B,EAAUC,GAAe7B,EAAAA,SAASH,EAASI,SAAS2B,UAErDE,EAAmBlB,EAAAA,YAAY,KAC/Bf,EAASI,SAASyB,aACpBC,EAAe9B,EAASI,QAAQyB,cAEjC,CAAC7B,IAEEkC,EAAanB,cAChBoB,IACKnC,EAASI,SAASyB,cACpB7B,EAASI,QAAQyB,YAAcM,GAEjCL,EAAeK,IAEjB,CAACnC,IAGGoC,EAAuBrB,EAAAA,YAAY,KACnCf,EAASI,SAAS2B,UACpBC,EAAYhC,EAASI,QAAQ2B,WAE9B,CAAC/B,IAeJ,OAbAM,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QACxB,GAAIG,EAIF,OAHAA,EAAMK,iBAAiB,iBAAkBwB,GACzC7B,EAAMK,iBAAiB,aAAcqB,GAE9B,KACL1B,EAAMM,oBAAoB,iBAAkBuB,GAC5C7B,EAAMM,oBAAoB,aAAcoB,KAG3C,CAACG,EAAsBH,EAAkBjC,IAErC,CACL6B,cACAE,WACAG"}

package/cjs/node_modules/swiper/shared/ssr-window.esm.js

@@ -1,2 +0,0 @@
-"use strict";function e(e){return null!==e&&"object"==typeof e&&"constructor"in e&&e.constructor===Object}function t(n={},o={}){const r=["__proto__","constructor","prototype"];Object.keys(o).filter(e=>r.indexOf(e)<0).forEach(r=>{void 0===n[r]?n[r]=o[r]:e(o[r])&&e(n[r])&&Object.keys(o[r]).length>0&&t(n[r],o[r])})}const n={body:{},addEventListener(){},removeEventListener(){},activeElement:{blur(){},nodeName:""},querySelector:()=>null,querySelectorAll:()=>[],getElementById:()=>null,createEvent:()=>({initEvent(){}}),createElement:()=>({children:[],childNodes:[],style:{},setAttribute(){},getElementsByTagName:()=>[]}),createElementNS:()=>({}),importNode:()=>null,location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""}};const o={document:n,navigator:{userAgent:""},location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""},history:{replaceState(){},pushState(){},go(){},back(){}},CustomEvent:function(){return this},addEventListener(){},removeEventListener(){},getComputedStyle:()=>({getPropertyValue:()=>""}),Image(){},Date(){},screen:{},setTimeout(){},clearTimeout(){},matchMedia:()=>({}),requestAnimationFrame:e=>"undefined"==typeof setTimeout?(e(),null):setTimeout(e,0),cancelAnimationFrame(e){"undefined"!=typeof setTimeout&&clearTimeout(e)}};exports.a=function(){const e="undefined"!=typeof window?window:{};return t(e,o),e},exports.g=function(){const e="undefined"!=typeof document?document:{};return t(e,n),e};
-//# sourceMappingURL=ssr-window.esm.js.map

package/cjs/node_modules/swiper/shared/ssr-window.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ssr-window.esm.js","sources":["../../../../../node_modules/swiper/shared/ssr-window.esm.mjs"],"sourcesContent":["/**\n * SSR Window 5.0.1\n * Better handling for window object in SSR environment\n * https://github.com/nolimits4web/ssr-window\n *\n * Copyright 2025, Vladimir Kharlampidi\n *\n * Licensed under MIT\n *\n * Released on: June 27, 2025\n */\n/* eslint-disable no-param-reassign */\nfunction isObject(obj) {\n  return obj !== null && typeof obj === 'object' && 'constructor' in obj && obj.constructor === Object;\n}\nfunction extend(target = {}, src = {}) {\n  const noExtend = ['__proto__', 'constructor', 'prototype'];\n  Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {\n    if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {\n      extend(target[key], src[key]);\n    }\n  });\n}\nconst ssrDocument = {\n  body: {},\n  addEventListener() {},\n  removeEventListener() {},\n  activeElement: {\n    blur() {},\n    nodeName: ''\n  },\n  querySelector() {\n    return null;\n  },\n  querySelectorAll() {\n    return [];\n  },\n  getElementById() {\n    return null;\n  },\n  createEvent() {\n    return {\n      initEvent() {}\n    };\n  },\n  createElement() {\n    return {\n      children: [],\n      childNodes: [],\n      style: {},\n      setAttribute() {},\n      getElementsByTagName() {\n        return [];\n      }\n    };\n  },\n  createElementNS() {\n    return {};\n  },\n  importNode() {\n    return null;\n  },\n  location: {\n    hash: '',\n    host: '',\n    hostname: '',\n    href: '',\n    origin: '',\n    pathname: '',\n    protocol: '',\n    search: ''\n  }\n};\nfunction getDocument() {\n  const doc = typeof document !== 'undefined' ? document : {};\n  extend(doc, ssrDocument);\n  return doc;\n}\nconst ssrWindow = {\n  document: ssrDocument,\n  navigator: {\n    userAgent: ''\n  },\n  location: {\n    hash: '',\n    host: '',\n    hostname: '',\n    href: '',\n    origin: '',\n    pathname: '',\n    protocol: '',\n    search: ''\n  },\n  history: {\n    replaceState() {},\n    pushState() {},\n    go() {},\n    back() {}\n  },\n  CustomEvent: function CustomEvent() {\n    return this;\n  },\n  addEventListener() {},\n  removeEventListener() {},\n  getComputedStyle() {\n    return {\n      getPropertyValue() {\n        return '';\n      }\n    };\n  },\n  Image() {},\n  Date() {},\n  screen: {},\n  setTimeout() {},\n  clearTimeout() {},\n  matchMedia() {\n    return {};\n  },\n  requestAnimationFrame(callback) {\n    if (typeof setTimeout === 'undefined') {\n      callback();\n      return null;\n    }\n    return setTimeout(callback, 0);\n  },\n  cancelAnimationFrame(id) {\n    if (typeof setTimeout === 'undefined') {\n      return;\n    }\n    clearTimeout(id);\n  }\n};\nfunction getWindow() {\n  const win = typeof window !== 'undefined' ? window : {};\n  extend(win, ssrWindow);\n  return win;\n}\n\nexport { getWindow as a, getDocument as g };\n"],"names":["isObject","obj","constructor","Object","extend","target","src","noExtend","keys","filter","key","indexOf","forEach","length","ssrDocument","body","addEventListener","removeEventListener","activeElement","blur","nodeName","querySelector","querySelectorAll","getElementById","createEvent","initEvent","createElement","children","childNodes","style","setAttribute","getElementsByTagName","createElementNS","importNode","location","hash","host","hostname","href","origin","pathname","protocol","search","ssrWindow","document","navigator","userAgent","history","replaceState","pushState","go","back","CustomEvent","this","getComputedStyle","getPropertyValue","Image","Date","screen","setTimeout","clearTimeout","matchMedia","requestAnimationFrame","callback","cancelAnimationFrame","id","win","window","doc"],"mappings":"aAYA,SAASA,EAASC,GAChB,OAAe,OAARA,GAA+B,iBAARA,GAAoB,gBAAiBA,GAAOA,EAAIC,cAAgBC,MAChG,CACA,SAASC,EAAOC,EAAS,GAAIC,EAAM,CAAA,GACjC,MAAMC,EAAW,CAAC,YAAa,cAAe,aAC9CJ,OAAOK,KAAKF,GAAKG,OAAOC,GAAOH,EAASI,QAAQD,GAAO,GAAGE,QAAQF,SACrC,IAAhBL,EAAOK,GAAsBL,EAAOK,GAAOJ,EAAII,GAAcV,EAASM,EAAII,KAASV,EAASK,EAAOK,KAASP,OAAOK,KAAKF,EAAII,IAAMG,OAAS,GACpJT,EAAOC,EAAOK,GAAMJ,EAAII,KAG9B,CACA,MAAMI,EAAc,CAClBC,KAAM,CAAA,EACN,gBAAAC,GAAoB,EACpB,mBAAAC,GAAuB,EACvBC,cAAe,CACb,IAAAC,GAAQ,EACRC,SAAU,IAEZC,cAAa,IACJ,KAETC,iBAAgB,IACP,GAETC,eAAc,IACL,KAETC,YAAW,KACF,CACL,SAAAC,GAAa,IAGjBC,cAAa,KACJ,CACLC,SAAU,GACVC,WAAY,GACZC,MAAO,CAAA,EACP,YAAAC,GAAgB,EAChBC,qBAAoB,IACX,KAIbC,gBAAe,KACN,CAAA,GAETC,WAAU,IACD,KAETC,SAAU,CACRC,KAAM,GACNC,KAAM,GACNC,SAAU,GACVC,KAAM,GACNC,OAAQ,GACRC,SAAU,GACVC,SAAU,GACVC,OAAQ,KAQZ,MAAMC,EAAY,CAChBC,SAAU9B,EACV+B,UAAW,CACTC,UAAW,IAEbZ,SAAU,CACRC,KAAM,GACNC,KAAM,GACNC,SAAU,GACVC,KAAM,GACNC,OAAQ,GACRC,SAAU,GACVC,SAAU,GACVC,OAAQ,IAEVK,QAAS,CACP,YAAAC,GAAgB,EAChB,SAAAC,GAAa,EACb,EAAAC,GAAM,EACN,IAAAC,GAAQ,GAEVC,YAAa,WACX,OAAOC,IACT,EACA,gBAAArC,GAAoB,EACpB,mBAAAC,GAAuB,EACvBqC,iBAAgB,KACP,CACLC,iBAAgB,IACP,KAIb,KAAAC,GAAS,EACT,IAAAC,GAAQ,EACRC,OAAQ,CAAA,EACR,UAAAC,GAAc,EACd,YAAAC,GAAgB,EAChBC,WAAU,KACD,CAAA,GAETC,sBAAsBC,GACM,oBAAfJ,YACTI,IACO,MAEFJ,WAAWI,EAAU,GAE9B,oBAAAC,CAAqBC,GACO,oBAAfN,YAGXC,aAAaK,EACf,aAEF,WACE,MAAMC,EAAwB,oBAAXC,OAAyBA,OAAS,CAAA,EAErD,OADA/D,EAAO8D,EAAKvB,GACLuB,CACT,YAhEA,WACE,MAAME,EAA0B,oBAAbxB,SAA2BA,SAAW,CAAA,EAEzD,OADAxC,EAAOgE,EAAKtD,GACLsD,CACT","x_google_ignoreList":[0]}

package/components/video/hooks.d.ts

@@ -1,43 +0,0 @@
-import React, { RefObject } from 'react';
-interface SoundControls {
-    /** A boolean indicating if the video is muted. */
-    isMuted: boolean;
-    /** handleMuteToggle: A function to toggle the mute state. */
-    handleMuteToggle: () => void;
-    /** A number representing the current volume level (0 to 1). */
-    volume: number;
-    /** A function to change the volume level. */
-    handleVolumeChange: (newVolume: number) => void;
-}
-/**
- * A custom hook to manage sound controls (mute and volume) for a video element.
- * @param videoRef - A reference to the video element.
- */
-export declare const useVideoSoundControls: (videoRef: React.RefObject<HTMLVideoElement>) => SoundControls;
-interface PlayPause {
-    /** A boolean indicating if the video is currently playing. */
-    isPlaying: boolean;
-    /** A function to toggle between play and pause states. */
-    handlePlayPause: () => void;
-}
-/**
- * A custom hook to manage play/pause functionality for a video element.
- * @param videoRef - A reference to the video element.
- */
-export declare const useVideoPlayPause: (videoRef: React.RefObject<HTMLVideoElement>) => PlayPause;
-interface VideoTime {
-    /** The current playback time. */
-    currentTime: number;
-    /** The total duration of the video. */
-    duration: number;
-    /** A function to seek to a specific time. */
-    handleSeek: (newTime: number) => void;
-}
-/**
- * useVideoTime is a custom React hook designed to manage and synchronize the playback time state
- * of a video element with the React component state. It provides an interface to track the current
- * playback time, the total duration of the video, and a method to seek to a specific time in the video.
- * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.
- */
-export declare const useVideoTime: (videoRef: RefObject<HTMLVideoElement>) => VideoTime;
-export {};

package/components/video/hooks.js

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

package/components/video/hooks.js.map

@@ -1 +0,0 @@
-{"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().catch(() => {});\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"],"names":["useVideoSoundControls","videoRef","isMuted","setIsMuted","useState","current","muted","volume","setVolume","useEffect","video","handleMuteToggle","useCallback","prevMuted","handleVolumeChange","newVolume","useVideoPlayPause","isPlaying","setIsPlaying","paused","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","pause","play","catch","prevIsPlaying","useVideoTime","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"iEAiBO,MAAMA,EAAyBC,IACpC,MAAOC,EAASC,GAAcC,EAASH,EAASI,SAASC,QAClDC,EAAQC,GAAaJ,EAAS,GAErCK,EAAU,KACR,MAAMC,EAAQT,GAAUI,QACpBK,SACqB,IAAZR,GACTC,EAAWO,GAAOJ,OAGpBL,EAASI,QAAQC,MAAQJ,EACzBD,EAASI,QAAQE,OAASA,IAE3B,CAACL,EAASK,EAAQN,IAErB,MAAMU,EAAmBC,EAAY,KACnCT,EAAYU,IAAeA,IAC1B,IAEGC,EAAqBF,EAAaG,IACtCP,EAAUO,IACT,IAEH,MAAO,CACLb,UACAS,mBACAJ,SACAO,uBAeSE,EAAqBf,IAChC,MAAOgB,EAAWC,GAAgBd,GAAUH,EAASI,SAASc,QAE9DV,EAAU,KACR,MAAMC,EAAQT,GAAUI,QAEpBK,QAA8B,IAAdO,GAClBC,GAAcR,GAAOS,QAGvB,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,CAACtB,IAEJ,MAAMyB,EAAkBd,EAAY,KAC9BX,GAAUI,UACRY,EACFhB,EAASI,QAAQsB,QAEjB1B,EAASI,QAAQuB,OAAOC,MAAM,QAEhCX,EAAcY,IAAmBA,KAElC,CAACb,EAAWhB,GAAUI,UAEzB,MAAO,CACLY,YACAS,oBAoBSK,EAAgB9B,IAC3B,MAAO+B,EAAaC,GAAkB7B,EAAS,IACxC8B,EAAUC,GAAe/B,EAASH,EAASI,SAAS6B,UAErDE,EAAmBxB,EAAY,KAC/BX,EAASI,SAAS2B,aACpBC,EAAehC,EAASI,QAAQ2B,cAEjC,CAAC/B,IAEEoC,EAAazB,EAChB0B,IACKrC,EAASI,SAAS2B,cACpB/B,EAASI,QAAQ2B,YAAcM,GAEjCL,EAAeK,IAEjB,CAACrC,IAGGsC,EAAuB3B,EAAY,KACnCX,EAASI,SAAS6B,UACpBC,EAAYlC,EAASI,QAAQ6B,WAE9B,CAACjC,IAeJ,OAbAQ,EAAU,KACR,MAAMC,EAAQT,GAAUI,QACxB,GAAIK,EAIF,OAHAA,EAAMc,iBAAiB,iBAAkBe,GACzC7B,EAAMc,iBAAiB,aAAcY,GAE9B,KACL1B,EAAMe,oBAAoB,iBAAkBc,GAC5C7B,EAAMe,oBAAoB,aAAcW,KAG3C,CAACG,EAAsBH,EAAkBnC,IAErC,CACL+B,cACAE,WACAG"}