@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/icons/svg-icons/SubtitleIcon.tsx

@@ -1,21 +1,21 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const SubtitleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    className='Hawkins-Icon Hawkins-Icon-Standard'
-    style={{ width: '100%', height: '100%' }}
-    {...props}>
-    <path
-      fill='currentColor'
-      d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6zm0 4h8v2H6zm10 0h2v2h-2zm-6-4h8v2h-8z'
-    />
-  </svg>
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className="Hawkins-Icon Hawkins-Icon-Standard"
+		style={{ width: "100%", height: "100%" }}
+		{...props}>
+		<path
+			fill="currentColor"
+			d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6zm0 4h8v2H6zm10 0h2v2h-2zm-6-4h8v2h-8z"
+		/>
+	</svg>
 )
 
 export default SubtitleIcon

package/src/components/icons/svg-icons/SubtitleOffIcon.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const SubtitleOffIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    className='Hawkins-Icon Hawkins-Icon-Standard'
-    style={{ width: '100%', height: '100%' }}
-    {...props}>
-    <path
-      fill='currentColor'
-      d='M20 4H6.83l2 2H20v11.17l1.76 1.76c.15-.28.24-.59.24-.93V6c0-1.1-.9-2-2-2z'
-    />
-    <path
-      fill='currentColor'
-      d='M18 10h-5.17l2 2H18zM1.04 3.87l1.2 1.2C2.09 5.35 2 5.66 2 6v12c0 1.1.9 2 2 2h13.17l2.96 2.96 1.41-1.41L2.45 2.45 1.04 3.87zM4 6.83 7.17 10H6v2h2v-1.17L11.17 14H6v2h7.17l2 2H4V6.83z'
-    />
-  </svg>
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className="Hawkins-Icon Hawkins-Icon-Standard"
+		style={{ width: "100%", height: "100%" }}
+		{...props}>
+		<path
+			fill="currentColor"
+			d="M20 4H6.83l2 2H20v11.17l1.76 1.76c.15-.28.24-.59.24-.93V6c0-1.1-.9-2-2-2z"
+		/>
+		<path
+			fill="currentColor"
+			d="M18 10h-5.17l2 2H18zM1.04 3.87l1.2 1.2C2.09 5.35 2 5.66 2 6v12c0 1.1.9 2 2 2h13.17l2.96 2.96 1.41-1.41L2.45 2.45 1.04 3.87zM4 6.83 7.17 10H6v2h2v-1.17L11.17 14H6v2h7.17l2 2H4V6.83z"
+		/>
+	</svg>
 )
 
 export default SubtitleOffIcon

package/src/components/icons/svg-icons/UnPiPIcon.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { memo, SVGProps } from 'react'
+import React from "react"
+import { SVGProps, memo } from "react"
 
 export function UnPiPIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
-      <g fill='currentColor'>
-        <path
-          fillRule='evenodd'
-          d='M10 3h4c3.771 0 5.657 0 6.828 1.172c.95.949 1.13 2.694 1.164 5.328c.012.937.018 1.405-.275 1.703c-.294.297-.768.297-1.717.297h-2.5c-2.828 0-4.243 0-5.121.879c-.879.878-.879 2.293-.879 5.121v2c0 .466 0 .699-.076.883a1 1 0 0 1-.541.54C10.699 21 10.466 21 10 21c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13v-2c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3Zm.97 9.03a.75.75 0 1 0 1.06-1.06L9.31 8.25h1.19a.75.75 0 0 0 0-1.5h-3a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0V9.31l2.72 2.72Z'
-          clipRule='evenodd'></path>
-        <path d='M13.586 13.586C13 14.172 13 15.114 13 17c0 1.886 0 2.828.586 3.414C14.172 21 15.114 21 17 21h1c1.886 0 2.828 0 3.414-.586C22 19.828 22 18.886 22 17c0-1.886 0-2.828-.586-3.414C20.828 13 19.886 13 18 13h-1c-1.886 0-2.828 0-3.414.586Z'></path>
-      </g>
-    </svg>
-  )
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+			<g fill="currentColor">
+				<path
+					fillRule="evenodd"
+					d="M10 3h4c3.771 0 5.657 0 6.828 1.172c.95.949 1.13 2.694 1.164 5.328c.012.937.018 1.405-.275 1.703c-.294.297-.768.297-1.717.297h-2.5c-2.828 0-4.243 0-5.121.879c-.879.878-.879 2.293-.879 5.121v2c0 .466 0 .699-.076.883a1 1 0 0 1-.541.54C10.699 21 10.466 21 10 21c-3.771 0-5.657 0-6.828-1.172C2 18.657 2 16.771 2 13v-2c0-3.771 0-5.657 1.172-6.828C4.343 3 6.229 3 10 3Zm.97 9.03a.75.75 0 1 0 1.06-1.06L9.31 8.25h1.19a.75.75 0 0 0 0-1.5h-3a.75.75 0 0 0-.75.75v3a.75.75 0 0 0 1.5 0V9.31l2.72 2.72Z"
+					clipRule="evenodd"></path>
+				<path d="M13.586 13.586C13 14.172 13 15.114 13 17c0 1.886 0 2.828.586 3.414C14.172 21 15.114 21 17 21h1c1.886 0 2.828 0 3.414-.586C22 19.828 22 18.886 22 17c0-1.886 0-2.828-.586-3.414C20.828 13 19.886 13 18 13h-1c-1.886 0-2.828 0-3.414.586Z"></path>
+			</g>
+		</svg>
+	)
 }
 export default UnPiPIcon

package/src/components/icons/svg-icons/VolumeMutedIcon.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const VolumeMutedIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
-    <g fill='currentColor'>
-      <path
-        fillRule='evenodd'
-        d='M20.515 6.316a.75.75 0 0 1 .991.376c.468 1.035.994 2.768.994 5.308c0 2.192-.392 3.783-.8 4.844a7.72 7.72 0 0 1-.572 1.195a4.73 4.73 0 0 1-.289.425l-.007.01l-.003.003l-.002.002L20.25 18l.576.48a.75.75 0 0 1-1.156-.956l.003-.004l.031-.041a3.27 3.27 0 0 0 .137-.212c.12-.199.288-.516.459-.961c.342-.889.7-2.298.7-4.306c0-2.326-.48-3.849-.86-4.692a.75.75 0 0 1 .375-.992Zm-2.101 2.95a.75.75 0 0 1 .887.582c.11.53.199 1.24.199 2.152c0 1.11-.132 1.923-.273 2.474a5.172 5.172 0 0 1-.203.631a2.977 2.977 0 0 1-.102.228l-.01.018l-.003.007l-.002.003v.002s-.001.001-.657-.363l.656.364a.75.75 0 0 1-1.317-.719l.005-.01a1.85 1.85 0 0 0 .038-.087a3.66 3.66 0 0 0 .141-.447c.11-.424.227-1.111.227-2.101a9.17 9.17 0 0 0-.168-1.848a.75.75 0 0 1 .582-.886Z'
-        clipRule='evenodd'></path>
-      <path d='M21.78 3.53a.75.75 0 0 0-1.06-1.06l-4.45 4.449a11.265 11.265 0 0 0-.193-1.39c-.172-.788-.477-1.473-1.116-1.923a3.066 3.066 0 0 0-.769-.39c-.818-.28-1.631-.057-2.457.345c-.814.395-1.8 1.046-3.032 1.857l-.267.176c-.447.295-.602.394-.76.464a2.17 2.17 0 0 1-.535.16c-.171.03-.354.032-.89.032h-.162c-1.217 0-2.062-.001-2.814.347A3.962 3.962 0 0 0 1.548 8.22c-.392.729-.438 1.491-.504 2.575l-.008.13C1.014 11.294 1 11.658 1 12c0 .342.014.706.036 1.074l.008.13c.066 1.084.112 1.846.504 2.575a3.962 3.962 0 0 0 1.727 1.624c.61.283 1.283.336 2.166.345L2.72 20.47a.75.75 0 1 0 1.06 1.06l18-18ZM16.5 12a.75.75 0 0 0-1.255-.554l-.071.074l-6 6.274A.778.778 0 0 0 9.34 19c1.039.68 1.899 1.225 2.631 1.549c.743.328 1.48.489 2.222.236a3.08 3.08 0 0 0 .769-.391c.706-.497 1.005-1.28 1.167-2.18c.159-.884.213-2.056.281-3.516l.003-.058a68.23 68.23 0 0 0 .088-2.64Z'></path>
-    </g>
-  </svg>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+		<g fill="currentColor">
+			<path
+				fillRule="evenodd"
+				d="M20.515 6.316a.75.75 0 0 1 .991.376c.468 1.035.994 2.768.994 5.308c0 2.192-.392 3.783-.8 4.844a7.72 7.72 0 0 1-.572 1.195a4.73 4.73 0 0 1-.289.425l-.007.01l-.003.003l-.002.002L20.25 18l.576.48a.75.75 0 0 1-1.156-.956l.003-.004l.031-.041a3.27 3.27 0 0 0 .137-.212c.12-.199.288-.516.459-.961c.342-.889.7-2.298.7-4.306c0-2.326-.48-3.849-.86-4.692a.75.75 0 0 1 .375-.992Zm-2.101 2.95a.75.75 0 0 1 .887.582c.11.53.199 1.24.199 2.152c0 1.11-.132 1.923-.273 2.474a5.172 5.172 0 0 1-.203.631a2.977 2.977 0 0 1-.102.228l-.01.018l-.003.007l-.002.003v.002s-.001.001-.657-.363l.656.364a.75.75 0 0 1-1.317-.719l.005-.01a1.85 1.85 0 0 0 .038-.087a3.66 3.66 0 0 0 .141-.447c.11-.424.227-1.111.227-2.101a9.17 9.17 0 0 0-.168-1.848a.75.75 0 0 1 .582-.886Z"
+				clipRule="evenodd"></path>
+			<path d="M21.78 3.53a.75.75 0 0 0-1.06-1.06l-4.45 4.449a11.265 11.265 0 0 0-.193-1.39c-.172-.788-.477-1.473-1.116-1.923a3.066 3.066 0 0 0-.769-.39c-.818-.28-1.631-.057-2.457.345c-.814.395-1.8 1.046-3.032 1.857l-.267.176c-.447.295-.602.394-.76.464a2.17 2.17 0 0 1-.535.16c-.171.03-.354.032-.89.032h-.162c-1.217 0-2.062-.001-2.814.347A3.962 3.962 0 0 0 1.548 8.22c-.392.729-.438 1.491-.504 2.575l-.008.13C1.014 11.294 1 11.658 1 12c0 .342.014.706.036 1.074l.008.13c.066 1.084.112 1.846.504 2.575a3.962 3.962 0 0 0 1.727 1.624c.61.283 1.283.336 2.166.345L2.72 20.47a.75.75 0 1 0 1.06 1.06l18-18ZM16.5 12a.75.75 0 0 0-1.255-.554l-.071.074l-6 6.274A.778.778 0 0 0 9.34 19c1.039.68 1.899 1.225 2.631 1.549c.743.328 1.48.489 2.222.236a3.08 3.08 0 0 0 .769-.391c.706-.497 1.005-1.28 1.167-2.18c.159-.884.213-2.056.281-3.516l.003-.058a68.23 68.23 0 0 0 .088-2.64Z"></path>
+		</g>
+	</svg>
 )
 
 export default VolumeMutedIcon

package/src/components/icons/svg-icons/VolumeOneIcon.tsx

@@ -1,22 +1,22 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const VolumeOneIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
-    <g fill='currentColor'>
-      <path d='M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z'></path>
-      <path
-        fillRule='evenodd'
-        d='M19.49 5.552a.66.66 0 0 1 .97.094l-.53.471l.53-.47h.002v.002l.004.004l.007.009a2.572 2.572 0 0 1 .078.112a4.6 4.6 0 0 1 .187.305c.149.265.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.605 4.605 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.972.094a.77.77 0 0 1-.091-1.03l.003-.005l.028-.04a3.2 3.2 0 0 0 .126-.208c.11-.195.264-.506.422-.943c.314-.871.643-2.252.643-4.222c0-1.969-.329-3.35-.643-4.222a6.268 6.268 0 0 0-.422-.942a3.208 3.208 0 0 0-.126-.207l-.028-.041l-.003-.004'
-        clipRule='evenodd'
-        opacity='.4'></path>
-      <path
-        fillRule='evenodd'
-        d='M17.757 8.416c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.036 3.036 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01a3.774 3.774 0 0 0 .165-.523c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.061a3.772 3.772 0 0 0-.165-.523l-.004-.01c-.179-.354-.058-.796.272-.991Z'
-        clipRule='evenodd'
-        opacity='.7'></path>
-    </g>
-  </svg>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+		<g fill="currentColor">
+			<path d="M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z"></path>
+			<path
+				fillRule="evenodd"
+				d="M19.49 5.552a.66.66 0 0 1 .97.094l-.53.471l.53-.47h.002v.002l.004.004l.007.009a2.572 2.572 0 0 1 .078.112a4.6 4.6 0 0 1 .187.305c.149.265.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.605 4.605 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.972.094a.77.77 0 0 1-.091-1.03l.003-.005l.028-.04a3.2 3.2 0 0 0 .126-.208c.11-.195.264-.506.422-.943c.314-.871.643-2.252.643-4.222c0-1.969-.329-3.35-.643-4.222a6.268 6.268 0 0 0-.422-.942a3.208 3.208 0 0 0-.126-.207l-.028-.041l-.003-.004"
+				clipRule="evenodd"
+				opacity=".4"></path>
+			<path
+				fillRule="evenodd"
+				d="M17.757 8.416c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.036 3.036 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01a3.774 3.774 0 0 0 .165-.523c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.061a3.772 3.772 0 0 0-.165-.523l-.004-.01c-.179-.354-.058-.796.272-.991Z"
+				clipRule="evenodd"
+				opacity=".7"></path>
+		</g>
+	</svg>
 )
 
 export default VolumeOneIcon

package/src/components/icons/svg-icons/VolumeThreeIcon.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const VolumeThreeIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
-    <g fill='currentColor'>
-      <path d='M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z'></path>
-      <path
-        fillRule='evenodd'
-        d='M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471l.53-.47l.002.002l.003.004l.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305c.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094a.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222c0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942a3.152 3.152 0 0 0-.157-.253m-1.641 1.833c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01l.035-.085c.032-.086.08-.23.13-.438c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01a.76.76 0 0 1 .272-.991Z'
-        clipRule='evenodd'></path>
-    </g>
-  </svg>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+		<g fill="currentColor">
+			<path d="M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z"></path>
+			<path
+				fillRule="evenodd"
+				d="M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471l.53-.47l.002.002l.003.004l.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305c.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094a.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222c0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942a3.152 3.152 0 0 0-.157-.253m-1.641 1.833c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01l.035-.085c.032-.086.08-.23.13-.438c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01a.76.76 0 0 1 .272-.991Z"
+				clipRule="evenodd"></path>
+		</g>
+	</svg>
 )
 
 export default VolumeThreeIcon

package/src/components/icons/svg-icons/VolumeTwoIcon.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react'
-import { SVGProps, memo } from 'react'
+import * as React from "react"
+import { SVGProps, memo } from "react"
 
 const VolumeTwoIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
-    <g fill='currentColor'>
-      <path d='M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z'></path>
-      <path
-        fillRule='evenodd'
-        d='M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471l.53-.47l.002.002l.003.004l.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305c.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094a.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222c0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942a3.152 3.152 0 0 0-.157-.253m-1.641 1.833c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01l.035-.085c.032-.086.08-.23.13-.438c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01a.76.76 0 0 1 .272-.991Z'
-        clipRule='evenodd'></path>
-    </g>
-  </svg>
+	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+		<g fill="currentColor">
+			<path d="M2.003 11.716c.037-1.843.056-2.764.668-3.552a3.18 3.18 0 0 1 .413-.431c.752-.636 1.746-.636 3.733-.636c.71 0 1.065 0 1.403-.092c.07-.02.14-.042.209-.067c.33-.121.627-.33 1.22-.746c2.338-1.645 3.508-2.467 4.489-2.11c.188.069.37.168.533.29c.848.635.913 2.115 1.042 5.073a70.58 70.58 0 0 1 .08 2.555c0 .521-.032 1.46-.08 2.555c-.13 2.958-.194 4.438-1.042 5.073a2.109 2.109 0 0 1-.533.29c-.982.357-2.15-.465-4.49-2.11c-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 0 0-.208-.067c-.338-.092-.693-.092-1.403-.092c-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 0 1-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 0 1 0-.569Z"></path>
+			<path
+				fillRule="evenodd"
+				d="M19.49 5.552a.66.66 0 0 1 .97.094l-.529.471l.53-.47l.002.002l.003.004l.007.009a2.572 2.572 0 0 1 .079.112c.047.071.111.173.186.305c.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75c-.187.52-.377.907-.526 1.172a4.655 4.655 0 0 1-.265.417l-.007.009l-.003.003l-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 0 1-.971.094a.77.77 0 0 1-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 0 0 .422-.943c.314-.871.644-2.253.644-4.222c0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 0 0-.422-.942a3.152 3.152 0 0 0-.157-.253m-1.641 1.833c.333-.197.753-.07.938.286l-.603.357l.603-.357l.001.002l.002.003l.003.007l.01.018l.024.053c.018.042.042.099.07.17c.053.145.12.35.185.62c.13.54.252 1.337.252 2.425c0 1.089-.122 1.886-.252 2.426c-.065.27-.132.475-.186.619a3.04 3.04 0 0 1-.094.223l-.009.018l-.003.007l-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286c-.33-.196-.45-.638-.272-.991l.004-.01l.035-.085c.032-.086.08-.23.13-.438c.1-.416.208-1.09.208-2.06c0-.971-.108-1.645-.208-2.06a3.757 3.757 0 0 0-.165-.524l-.004-.01a.76.76 0 0 1 .272-.991Z"
+				clipRule="evenodd"></path>
+		</g>
+	</svg>
 )
 
 export default VolumeTwoIcon

package/src/components/legacy.tsx

@@ -8,35 +8,29 @@
 import React from "react"
 import { showDeprecationWarning } from "../lib/deprecation"
 
+import { AudioPlayer } from "./audio-player"
 // Import current components
 import { MediaPlayer } from "./media-player"
-import { VideoPlayer } from "./video-player"
-import { AudioPlayer } from "./audio-player"
+import { ModernMediaPlayer as ReactPlayerWrapper } from "./react-player-wrapper"
+import { SimpleVideoPlayer as SimpleVideoPlayerBase } from "./simple-video-player"
+import { FullscreenButton } from "./ui/fullscreen-button"
 import { PlayButton } from "./ui/play-button"
 import { SeekBar } from "./ui/seek-bar"
 import { TimeDisplay } from "./ui/time-display"
 import { VolumeControl } from "./ui/volume-control"
-import { FullscreenButton } from "./ui/fullscreen-button"
-import { ModernMediaPlayer as ReactPlayerWrapper } from "./react-player-wrapper"
-import { SimpleVideoPlayer as SimpleVideoPlayerBase } from "./simple-video-player"
+import { VideoPlayer } from "./video-player"
 
 // Legacy component wrappers with deprecation warnings
 export const ModernMediaPlayer = React.forwardRef<any, any>((props, ref) => {
-	showDeprecationWarning(
-		"ModernMediaPlayer",
-		"MediaPlayer (the primary media player component)"
-	)
+	showDeprecationWarning("ModernMediaPlayer", "MediaPlayer (the primary media player component)")
 	return <ReactPlayerWrapper {...props} ref={ref} />
 })
 
 ModernMediaPlayer.displayName = "DeprecatedModernMediaPlayer"
 
 export const SimpleVideoPlayer = React.forwardRef<any, any>((props, ref) => {
-	showDeprecationWarning(
-		"SimpleVideoPlayer",
-		"VideoPlayer (the primary video player component)"
-	)
-	return <SimpleVideoPlayerBase {...props} ref={ref} />
+	showDeprecationWarning("SimpleVideoPlayer", "VideoPlayer (the primary video player component)")
+	return <SimpleVideoPlayerBase {...(props as any)} />
 })
 
 SimpleVideoPlayer.displayName = "DeprecatedSimpleVideoPlayer"
@@ -47,7 +41,7 @@ export const LegacyPlayButton = React.forwardRef<any, any>((props, ref) => {
 		"PlayButton",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <PlayButton {...props} ref={ref} />
+	return <PlayButton {...(props as any)} />
 })
 
 LegacyPlayButton.displayName = "DeprecatedPlayButton"
@@ -57,7 +51,7 @@ export const LegacySeekBar = React.forwardRef<any, any>((props, ref) => {
 		"SeekBar",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <SeekBar {...props} ref={ref} />
+	return <SeekBar {...(props as any)} />
 })
 
 LegacySeekBar.displayName = "DeprecatedSeekBar"
@@ -67,7 +61,7 @@ export const LegacyTimeDisplay = React.forwardRef<any, any>((props, ref) => {
 		"TimeDisplay",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <TimeDisplay {...props} ref={ref} />
+	return <TimeDisplay {...(props as any)} />
 })
 
 LegacyTimeDisplay.displayName = "DeprecatedTimeDisplay"
@@ -77,7 +71,7 @@ export const LegacyVolumeControl = React.forwardRef<any, any>((props, ref) => {
 		"VolumeControl",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <VolumeControl {...props} ref={ref} />
+	return <VolumeControl {...(props as any)} />
 })
 
 LegacyVolumeControl.displayName = "DeprecatedVolumeControl"
@@ -87,7 +81,7 @@ export const LegacyFullscreenButton = React.forwardRef<any, any>((props, ref) =>
 		"FullscreenButton",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <FullscreenButton {...props} ref={ref} />
+	return <FullscreenButton {...(props as any)} />
 })
 
-LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"
+LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"

package/src/components/media-metadata-display.tsx

@@ -1,100 +1,99 @@
-import { Suspense } from 'react'
-import { useMediaMetadata, formatTime, type MediaMetadata } from '../hooks/use-media-metadata'
+import { Suspense } from "react"
+import { type MediaMetadata, formatTime, useMediaMetadata } from "../hooks/use-media-metadata"
 
 interface MediaMetadataDisplayProps {
-  src: string
+	src: string
 }
 
 function MetadataSkeleton() {
-  return (
-    <div className="animate-pulse space-y-2">
-      <div className="h-4 w-3/4 rounded bg-gray-700"></div>
-      <div className="h-3 w-1/2 rounded bg-gray-700"></div>
-      <div className="h-3 w-2/3 rounded bg-gray-700"></div>
-    </div>
-  )
+	return (
+		<div className="animate-pulse space-y-2">
+			<div className="h-4 w-3/4 rounded bg-gray-700"></div>
+			<div className="h-3 w-1/2 rounded bg-gray-700"></div>
+			<div className="h-3 w-2/3 rounded bg-gray-700"></div>
+		</div>
+	)
 }
 
 function MediaMetadataContent({ src }: MediaMetadataDisplayProps) {
-  // Use the use() hook for async data - this will suspend until data loads
-  const metadata = useMediaMetadata(src)
-  
-  return (
-    <div className="media-metadata space-y-2 text-white">
-      <div>
-        <span className="text-gray-400 text-sm">Duration: </span>
-        <span>{formatTime(metadata.duration)}</span>
-      </div>
-      
-      <div>
-        <span className="text-gray-400 text-sm">Format: </span>
-        <span>{metadata.format}</span>
-      </div>
-      
-      {metadata.width && metadata.height && (
-        <div>
-          <span className="text-gray-400 text-sm">Resolution: </span>
-          <span>{metadata.width} x {metadata.height}</span>
-        </div>
-      )}
-      
-      {metadata.title && (
-        <div>
-          <span className="text-gray-400 text-sm">Title: </span>
-          <span>{metadata.title}</span>
-        </div>
-      )}
-      
-      {metadata.artist && (
-        <div>
-          <span className="text-gray-400 text-sm">Artist: </span>
-          <span>{metadata.artist}</span>
-        </div>
-      )}
-    </div>
-  )
+	// Use the use() hook for async data - this will suspend until data loads
+	const metadata = useMediaMetadata(src)
+
+	return (
+		<div className="media-metadata space-y-2 text-white">
+			<div>
+				<span className="text-gray-400 text-sm">Duration: </span>
+				<span>{formatTime(metadata.duration)}</span>
+			</div>
+
+			<div>
+				<span className="text-gray-400 text-sm">Format: </span>
+				<span>{metadata.format}</span>
+			</div>
+
+			{metadata.width && metadata.height && (
+				<div>
+					<span className="text-gray-400 text-sm">Resolution: </span>
+					<span>
+						{metadata.width} x {metadata.height}
+					</span>
+				</div>
+			)}
+
+			{metadata.title && (
+				<div>
+					<span className="text-gray-400 text-sm">Title: </span>
+					<span>{metadata.title}</span>
+				</div>
+			)}
+
+			{metadata.artist && (
+				<div>
+					<span className="text-gray-400 text-sm">Artist: </span>
+					<span>{metadata.artist}</span>
+				</div>
+			)}
+		</div>
+	)
 }
 
 export function MediaMetadataDisplay({ src }: MediaMetadataDisplayProps) {
-  return (
-    <div className="rounded-lg bg-gray-800 p-4">
-      <h4 className="mb-3 font-medium text-white">Media Information</h4>
-      <Suspense fallback={<MetadataSkeleton />}>
-        <MediaMetadataContent src={src} />
-      </Suspense>
-    </div>
-  )
+	return (
+		<div className="rounded-lg bg-gray-800 p-4">
+			<h4 className="mb-3 font-medium text-white">Media Information</h4>
+			<Suspense fallback={<MetadataSkeleton />}>
+				<MediaMetadataContent src={src} />
+			</Suspense>
+		</div>
+	)
 }
 
 // Enhanced version with error boundary
 interface MediaInfoProps {
-  src: string
-  title?: string
+	src: string
+	title?: string
 }
 
 function MediaErrorFallback({ error, retry }: { error: Error; retry: () => void }) {
-  return (
-    <div className="rounded-lg border border-red-700 bg-red-900/20 p-4">
-      <h4 className="mb-2 font-medium text-red-400">Failed to load metadata</h4>
-      <p className="mb-3 text-red-300 text-sm">{error.message}</p>
-      <button 
-        onClick={retry}
-        className="rounded bg-red-700 px-3 py-1 text-sm text-white transition-colors hover:bg-red-600"
-      >
-        Retry
-      </button>
-    </div>
-  )
+	return (
+		<div className="rounded-lg border border-red-700 bg-red-900/20 p-4">
+			<h4 className="mb-2 font-medium text-red-400">Failed to load metadata</h4>
+			<p className="mb-3 text-red-300 text-sm">{error.message}</p>
+			<button
+				onClick={retry}
+				className="rounded bg-red-700 px-3 py-1 text-sm text-white transition-colors hover:bg-red-600">
+				Retry
+			</button>
+		</div>
+	)
 }
 
 export function MediaInfo({ src, title }: MediaInfoProps) {
-  return (
-    <div className="space-y-4">
-      {title && (
-        <h3 className="font-semibold text-white text-xl">{title}</h3>
-      )}
-      
-      <MediaMetadataDisplay src={src} />
-    </div>
-  )
-}
+	return (
+		<div className="space-y-4">
+			{title && <h3 className="font-semibold text-white text-xl">{title}</h3>}
+
+			<MediaMetadataDisplay src={src} />
+		</div>
+	)
+}