@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const PlaybackSpeedIcon = (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
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M17.643 7.438c-3.122-3.25-8.164-3.25-11.286 0-3.143 3.273-3.143 8.596 0 11.87l-1.442 1.385c-3.887-4.048-3.887-10.593 0-14.64 3.908-4.07 10.262-4.07 14.17 0 3.887 4.047 3.887 10.592 0 14.64l-1.442-1.386c3.143-3.273 3.143-8.596 0-11.87ZM14 14a2 2 0 1 1-1.482-1.932l3.275-3.275 1.414 1.414-3.275 3.275c.044.165.068.339.068.518Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default PlaybackSpeedIcon

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const QualityIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    className='iconify iconify--ic'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fill='currentColor'
+      d='M19 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V6h14v12zM7.5 13h2v2H11V9H9.5v2.5h-2V9H6v6h1.5zm6.5 2h.75v1.5h1.5V15H17c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm.5-4.5h2v3h-2v-3z'
+    />
+  </svg>
+)
+
+export default QualityIcon

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

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SettingsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width='24' height='24' viewBox='0 0 24 24' {...props}>
+    <path
+      fill='currentColor'
+      d='M2 12c0-.865.11-1.703.316-2.504A3 3 0 0 0 4.99 4.867a9.99 9.99 0 0 1 4.335-2.505a3 3 0 0 0 5.348 0a9.99 9.99 0 0 1 4.335 2.505a3 3 0 0 0 2.675 4.63a10.036 10.036 0 0 1 0 5.007a3 3 0 0 0-2.675 4.629a9.99 9.99 0 0 1-4.335 2.505a3 3 0 0 0-5.348 0a9.99 9.99 0 0 1-4.335-2.505a3 3 0 0 0-2.675-4.63A10.056 10.056 0 0 1 2 12zm4.804 3c.63 1.091.81 2.346.564 3.524c.408.29.842.541 1.297.75A4.993 4.993 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274c.455-.209.889-.46 1.297-.75A4.993 4.993 0 0 1 17.196 15a4.993 4.993 0 0 1 2.77-2.25a8.126 8.126 0 0 0 0-1.5A4.993 4.993 0 0 1 17.195 9a4.993 4.993 0 0 1-.564-3.524a7.989 7.989 0 0 0-1.297-.75A4.993 4.993 0 0 1 12 6a4.993 4.993 0 0 1-3.335-1.274a7.99 7.99 0 0 0-1.297.75A4.993 4.993 0 0 1 6.804 9a4.993 4.993 0 0 1-2.77 2.25a8.126 8.126 0 0 0 0 1.5A4.993 4.993 0 0 1 6.805 15zM12 15a3 3 0 1 1 0-6a3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2z'></path>
+  </svg>
+)
+
+export default SettingsIcon

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const SliderIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    className='iconify iconify--uil'
+    width={32}
+    height={32}
+    viewBox='0 0 24 24'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fill='currentColor'
+      d='M21 11h-3.184a2.982 2.982 0 0 0-5.632 0H3a1 1 0 0 0 0 2h9.184a2.982 2.982 0 0 0 5.632 0H21a1 1 0 0 0 0-2Zm-6 2a1 1 0 1 1 1-1 1.001 1.001 0 0 1-1 1Z'
+    />
+  </svg>
+)
+
+export default SliderIcon

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

@@ -0,0 +1,21 @@
+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>
+)
+
+export default SubtitleIcon

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

@@ -0,0 +1,25 @@
+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>
+)
+
+export default SubtitleOffIcon

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { memo, SVGProps } 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>
+  )
+}
+export default UnPiPIcon

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

@@ -0,0 +1,16 @@
+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>
+)
+
+export default VolumeMutedIcon

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

@@ -0,0 +1,22 @@
+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>
+)
+
+export default VolumeOneIcon

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

@@ -0,0 +1,16 @@
+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>
+)
+
+export default VolumeThreeIcon

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

@@ -0,0 +1,16 @@
+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>
+)
+
+export default VolumeTwoIcon

package/src/components/legacy.tsx

@@ -0,0 +1,93 @@
+/**
+ * Legacy Components (Deprecated)
+ * These components are wrapped with deprecation warnings
+ */
+
+"use client"
+
+import React from "react"
+import { showDeprecationWarning } from "../lib/deprecation"
+
+// Import current components
+import { MediaPlayer } from "./media-player"
+import { VideoPlayer } from "./video-player"
+import { AudioPlayer } from "./audio-player"
+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"
+
+// Legacy component wrappers with deprecation warnings
+export const ModernMediaPlayer = React.forwardRef<any, any>((props, ref) => {
+	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} />
+})
+
+SimpleVideoPlayer.displayName = "DeprecatedSimpleVideoPlayer"
+
+// Legacy UI components with deprecation warnings
+export const LegacyPlayButton = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"PlayButton",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <PlayButton {...props} ref={ref} />
+})
+
+LegacyPlayButton.displayName = "DeprecatedPlayButton"
+
+export const LegacySeekBar = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"SeekBar",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <SeekBar {...props} ref={ref} />
+})
+
+LegacySeekBar.displayName = "DeprecatedSeekBar"
+
+export const LegacyTimeDisplay = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"TimeDisplay",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <TimeDisplay {...props} ref={ref} />
+})
+
+LegacyTimeDisplay.displayName = "DeprecatedTimeDisplay"
+
+export const LegacyVolumeControl = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"VolumeControl",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <VolumeControl {...props} ref={ref} />
+})
+
+LegacyVolumeControl.displayName = "DeprecatedVolumeControl"
+
+export const LegacyFullscreenButton = React.forwardRef<any, any>((props, ref) => {
+	showDeprecationWarning(
+		"FullscreenButton",
+		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
+	)
+	return <FullscreenButton {...props} ref={ref} />
+})
+
+LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"

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

@@ -0,0 +1,100 @@
+import { Suspense } from 'react'
+import { useMediaMetadata, formatTime, type MediaMetadata } from '../hooks/use-media-metadata'
+
+interface MediaMetadataDisplayProps {
+  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>
+  )
+}
+
+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>
+  )
+}
+
+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>
+  )
+}
+
+// Enhanced version with error boundary
+interface MediaInfoProps {
+  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>
+  )
+}
+
+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>
+  )
+}

package/src/components/media-player-audio.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import React from "react"
+import { useMediaContext } from "../context/media-context"
+
+export interface MediaPlayerAudioProps extends React.AudioHTMLAttributes<HTMLAudioElement> {
+	asChild?: boolean
+}
+
+export function MediaPlayerAudio({
+	asChild = false,
+	className,
+	children,
+	...props
+}: MediaPlayerAudioProps) {
+	const context = useMediaContext()
+
+	if (asChild) {
+		// When asChild is true, clone the child element and add our props
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, {
+			...props,
+			ref: context.mediaRef,
+			"data-slot": "media-player-audio"
+		} as any)
+	}
+
+	return (
+		<audio
+			ref={context.mediaRef as React.RefObject<HTMLAudioElement>}
+			data-slot="media-player-audio"
+			className={className}
+			{...props}>
+			{children}
+		</audio>
+	)
+}
+
+MediaPlayerAudio.displayName = "MediaPlayerAudio"