@therealtinhtute/baroiplayer 1.0.0

package/src/components/icon-demo.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react'
+import { 
+  IconProvider, 
+  PlayIcon, 
+  PauseIcon, 
+  VolumeIcon, 
+  VolumeOffIcon, 
+  SettingsIcon, 
+  FullscreenIcon,
+  LoadingIcon,
+  PlayPauseIcon 
+} from '../icons'
+
+export function IconSystemDemo() {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [volume, setVolume] = useState(0.8)
+  const [theme, setTheme] = useState({
+    size: 24,
+    strokeWidth: 2,
+    color: 'currentColor'
+  })
+
+  const customPlayIcon = ({ className, ...props }: any) => (
+    <svg 
+      className={className}
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" fill="#ff6b6b" />
+      <polygon points="10 8 16 12 10 16 10 8" fill="white" />
+    </svg>
+  )
+
+  return (
+    <div className="min-h-screen bg-gray-950 p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-8 text-center font-bold text-3xl text-white">
+          Icon System Demo
+        </h1>
+        
+        {/* Theme Controls */}
+        <div className="mb-8 rounded-lg bg-gray-800 p-6">
+          <h2 className="mb-4 font-semibold text-white text-xl">Theme Configuration</h2>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">
+                Size: {theme.size}
+              </label>
+              <input
+                type="range"
+                min="16"
+                max="48"
+                value={theme.size}
+                onChange={(e) => setTheme(prev => ({ ...prev, size: Number(e.target.value) }))}
+                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">
+                Stroke Width: {theme.strokeWidth}
+              </label>
+              <input
+                type="range"
+                min="1"
+                max="4"
+                step="0.5"
+                value={theme.strokeWidth}
+                onChange={(e) => setTheme(prev => ({ ...prev, strokeWidth: Number(e.target.value) }))}
+                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">Color</label>
+              <select
+                value={theme.color}
+                onChange={(e) => setTheme(prev => ({ ...prev, color: e.target.value }))}
+                className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white"
+              >
+                <option value="currentColor">Current Color</option>
+                <option value="#ffffff">White</option>
+                <option value="#06b6d4">Cyan</option>
+                <option value="#f59e0b">Amber</option>
+                <option value="#ef4444">Red</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+          {/* Default Icons */}
+          <div className="rounded-lg bg-gray-800 p-6">
+            <h2 className="mb-4 font-semibold text-white text-xl">Default Icons</h2>
+            <IconProvider theme={theme}>
+              <div className="grid grid-cols-4 gap-4 text-white">
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayIcon />
+                  <span className="text-xs">Play</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PauseIcon />
+                  <span className="text-xs">Pause</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeIcon />
+                  <span className="text-xs">Volume</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeOffIcon />
+                  <span className="text-xs">Mute</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <SettingsIcon />
+                  <span className="text-xs">Settings</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <FullscreenIcon />
+                  <span className="text-xs">Fullscreen</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <LoadingIcon />
+                  <span className="text-xs">Loading</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayPauseIcon isPlaying={isPlaying} />
+                  <span className="text-xs">Play/Pause</span>
+                </div>
+              </div>
+            </IconProvider>
+          </div>
+
+          {/* Custom Icons */}
+          <div className="rounded-lg bg-gray-800 p-6">
+            <h2 className="mb-4 font-semibold text-white text-xl">Custom Icons</h2>
+            <IconProvider 
+              theme={theme}
+              icons={{
+                play: customPlayIcon
+              }}
+            >
+              <div className="grid grid-cols-4 gap-4 text-white">
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayIcon />
+                  <span className="text-xs">Custom Play</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PauseIcon />
+                  <span className="text-xs">Default Pause</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeIcon />
+                  <span className="text-xs">Default Volume</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <SettingsIcon />
+                  <span className="text-xs">Default Settings</span>
+                </div>
+              </div>
+            </IconProvider>
+          </div>
+        </div>
+
+        {/* Interactive Demo */}
+        <div className="mt-8 rounded-lg bg-gray-800 p-6">
+          <h2 className="mb-4 font-semibold text-white text-xl">Interactive Media Player Demo</h2>
+          <IconProvider theme={{ ...theme, size: 32 }}>
+            <div className="flex items-center justify-center space-x-6 text-white">
+              <button
+                onClick={() => setIsPlaying(!isPlaying)}
+                className="rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700"
+                aria-label={isPlaying ? 'Pause' : 'Play'}
+              >
+                <PlayPauseIcon isPlaying={isPlaying} />
+              </button>
+              
+              <button
+                onClick={() => setVolume(volume > 0 ? 0 : 0.8)}
+                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+                aria-label={volume > 0 ? 'Mute' : 'Unmute'}
+              >
+                {volume > 0 ? <VolumeIcon /> : <VolumeOffIcon />}
+              </button>
+              
+              <button
+                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+                aria-label="Settings"
+              >
+                <SettingsIcon />
+              </button>
+              
+              <button
+                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+                aria-label="Fullscreen"
+              >
+                <FullscreenIcon />
+              </button>
+            </div>
+          </IconProvider>
+          
+          <div className="mt-4 text-center text-gray-400 text-sm">
+            Status: {isPlaying ? 'Playing' : 'Paused'} | Volume: {volume > 0 ? 'On' : 'Muted'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/icons/index.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import React from "react"
+import BackwardIcon from "./svg-icons/BackwardIcon"
+import CameraIcon from "./svg-icons/CameraIcon"
+import ForwardIcon from "./svg-icons/ForwardIcon"
+import FullscreenEnterIcon from "./svg-icons/FullscreenEnterIcon"
+import FullscreenExitIcon from "./svg-icons/FullscreenExitIcon"
+import LoadingIcon from "./svg-icons/LoadingIcon"
+import PauseIcon from "./svg-icons/PauseIcon"
+import PlayIcon from "./svg-icons/PlayIcon"
+import PlaybackSpeedIcon from "./svg-icons/PlaybackSpeedIcon"
+import SettingsIcon from "./svg-icons/SettingsIcon"
+import SubtitleIconSVG from "./svg-icons/SubtitleIcon"
+import VolumeMutedIcon from "./svg-icons/VolumeMutedIcon"
+import VolumeOneIcon from "./svg-icons/VolumeOneIcon"
+import VolumeThreeIcon from "./svg-icons/VolumeThreeIcon"
+import VolumeTwoIcon from "./svg-icons/VolumeTwoIcon"
+
+export interface IconProps {
+	size?: number
+	className?: string
+	color?: string
+}
+
+// Minimal Play Icon
+export const MinimalPlayIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <PlayIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Pause Icon
+export const MinimalPauseIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <PauseIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Volume Icon
+export const MinimalVolumeIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <VolumeTwoIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Volume Muted Icon
+export const MinimalVolumeMutedIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <VolumeMutedIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Fullscreen Icon
+export const MinimalFullscreenIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <FullscreenEnterIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Exit Fullscreen Icon
+export const MinimalExitFullscreenIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <FullscreenExitIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Settings Icon
+export const MinimalSettingsIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <SettingsIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Loading Spinner
+export const MinimalSpinner: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => (
+	<LoadingIcon
+		width={size}
+		height={size}
+		className={`animate-spin ${className}`}
+		style={{ color }}
+	/>
+)
+
+// Minimal Forward Icon (using backward design)
+export const MinimalForwardIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <BackwardIcon width={size} height={size} className={className} style={{ color }} />
+
+// Minimal Backward Icon
+export const MinimalBackwardIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <ForwardIcon width={size} height={size} className={className} style={{ color }} />
+
+// Forward 10 seconds icon
+export const MinimalForward10Icon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <ForwardIcon width={size} height={size} className={className} style={{ color }} />
+
+// Backward 10 seconds icon
+export const MinimalBackward10Icon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <BackwardIcon width={size} height={size} className={className} style={{ color }} />
+
+// Subtitle/Caption icon
+export const MinimalSubtitleIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <SubtitleIconSVG width={size} height={size} className={className} style={{ color }} />
+
+// Screenshot/Camera icon
+export const MinimalScreenshotIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <CameraIcon width={size} height={size} className={className} style={{ color }} />
+
+// Speed icon
+export const MinimalSpeedIcon: React.FC<IconProps> = ({
+	size = 24,
+	className = "",
+	color = "currentColor"
+}) => <PlaybackSpeedIcon width={size} height={size} className={className} style={{ color }} />
+
+// Icon Set Type
+export interface IconSet {
+	play?: React.FC<IconProps>
+	pause?: React.FC<IconProps>
+	volume?: React.FC<IconProps>
+	volumeMuted?: React.FC<IconProps>
+	fullscreen?: React.FC<IconProps>
+	exitFullscreen?: React.FC<IconProps>
+	settings?: React.FC<IconProps>
+	forward?: React.FC<IconProps>
+	backward?: React.FC<IconProps>
+	spinner?: React.FC<IconProps>
+	subtitle?: React.FC<IconProps>
+}
+
+// Default Icon Set
+export const defaultMinimalIcons: IconSet = {
+	play: MinimalPlayIcon,
+	pause: MinimalPauseIcon,
+	volume: MinimalVolumeIcon,
+	volumeMuted: MinimalVolumeMutedIcon,
+	fullscreen: MinimalFullscreenIcon,
+	exitFullscreen: MinimalExitFullscreenIcon,
+	settings: MinimalSettingsIcon,
+	forward: MinimalForwardIcon,
+	backward: MinimalBackwardIcon,
+	spinner: MinimalSpinner,
+	subtitle: MinimalSubtitleIcon
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { SVGProps } from 'react'
+
+const ArrowLeftIcon = (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='M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z' />
+  </svg>
+)
+
+export default ArrowLeftIcon

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

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const ArrowRightIcon = (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='M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z' />
+  </svg>
+)
+
+export default ArrowRightIcon

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

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const AudioIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    className='iconify iconify--ic'
+    width='1em'
+    height='1em'
+    viewBox='0 0 24 24'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fill='currentColor'
+      d='M12 5v8.55c-.94-.54-2.1-.75-3.33-.32-1.34.48-2.37 1.67-2.61 3.07a4.007 4.007 0 0 0 4.59 4.65c1.96-.31 3.35-2.11 3.35-4.1V7h2c1.1 0 2-.9 2-2s-.9-2-2-2h-2c-1.1 0-2 .9-2 2z'
+    />
+  </svg>
+)
+
+const Memo = AudioIcon
+export default Memo

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

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const BackwardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
+    <path
+      fill='currentColor'
+      d='M3 2.25a1 1 0 0 0-1 1V9a1 1 0 0 0 1 1h5.25a1 1 0 0 0 0-2H4.863c.985-1.179 2.208-2.113 3.682-2.57a9.435 9.435 0 0 1 6.106.16c1.981.738 3.81 2.232 4.722 3.894a1 1 0 1 0 1.754-.961c-1.175-2.143-3.415-3.927-5.778-4.807a11.435 11.435 0 0 0-7.395-.196C6.378 4.008 5.068 4.9 4 5.979V3.25a1 1 0 0 0-1-1ZM9.75 12a1 1 0 0 0-1.762-.647l-.222.265c-.515.623-1.078 1.303-2.28 2.024a1 1 0 1 0 1.029 1.716c.483-.29.889-.582 1.235-.865V20a1 1 0 0 0 2 0v-8Zm6.5-1c-1.386 0-2.4.635-3.008 1.661c-.564.95-.742 2.161-.742 3.339s.178 2.39.742 3.339C13.85 20.365 14.864 21 16.25 21s2.4-.635 3.008-1.661c.564-.95.742-2.161.742-3.339s-.178-2.39-.742-3.339C18.65 11.635 17.636 11 16.25 11Zm-1.75 5c0-1.031.166-1.82.461-2.318c.251-.422.613-.682 1.289-.682c.676 0 1.038.26 1.288.682c.296.498.462 1.287.462 2.318c0 1.031-.166 1.82-.462 2.318c-.25.422-.612.682-1.288.682s-1.038-.26-1.289-.682c-.295-.498-.461-1.287-.461-2.318Z'></path>
+  </svg>
+)
+
+export default BackwardIcon

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

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const CameraIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={32}
+    height={32}
+    viewBox='0 0 24 24'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fill='currentColor'
+      d='M12 18q2.075 0 3.538-1.462Q17 15.075 17 13q0-2.075-1.462-3.538Q14.075 8 12 8 9.925 8 8.463 9.462 7 10.925 7 13q0 2.075 1.463 3.538Q9.925 18 12 18Zm0-2q-1.25 0-2.125-.875T9 13q0-1.25.875-2.125T12 10q1.25 0 2.125.875T15 13q0 1.25-.875 2.125T12 16Zm6-6q.425 0 .712-.288Q19 9.425 19 9t-.288-.713Q18.425 8 18 8t-.712.287Q17 8.575 17 9t.288.712Q17.575 10 18 10ZM4 21q-.825 0-1.412-.587Q2 19.825 2 19V7q0-.825.588-1.412Q3.175 5 4 5h3.15L8.7 3.325q.15-.15.337-.238Q9.225 3 9.425 3h5.15q.2 0 .388.087.187.088.337.238L16.85 5H20q.825 0 1.413.588Q22 6.175 22 7v12q0 .825-.587 1.413Q20.825 21 20 21Zm16-2V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Zm-8-6Z'
+    />
+  </svg>
+)
+
+const Memo = CameraIcon
+export default Memo

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

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    className='iconify iconify--mdi'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path fill='currentColor' d='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z' />
+  </svg>
+)
+
+const Memo = CheckIcon
+export default Memo

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { memo, SVGProps } from 'react'
+
+function EnablePiPIcon(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 d='M13 17c0-1.886 0-2.828.586-3.414C14.172 13 15.114 13 17 13h1c1.886 0 2.828 0 3.414.586C22 14.172 22 15.114 22 17c0 1.886 0 2.828-.586 3.414C20.828 21 19.886 21 18 21h-1c-1.886 0-2.828 0-3.414-.586C13 19.828 13 18.886 13 17Z'></path>
+        <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 3ZM8.03 6.97a.75.75 0 0 0-1.06 1.06l2.72 2.72H8.5a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-1.5 0v1.19L8.03 6.97Z'
+          clipRule='evenodd'></path>
+      </g>
+    </svg>
+  )
+}
+export default EnablePiPIcon

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

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const ForwardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' {...props}>
+    <path
+      fill='currentColor'
+      d='M21 2.25a1 1 0 0 1 1 1V9a1 1 0 0 1-1 1h-5.25a1 1 0 0 1 0-2h3.387c-.985-1.179-2.208-2.113-3.682-2.57a9.435 9.435 0 0 0-6.106.16c-1.981.738-3.81 2.232-4.722 3.894a1 1 0 0 1-1.754-.961C4.048 6.38 6.288 4.596 8.652 3.716a11.435 11.435 0 0 1 7.394-.196c1.576.488 2.886 1.38 3.954 2.459V3.25a1 1 0 0 1 1-1ZM9.095 11.061A1 1 0 0 1 9.75 12v8a1 1 0 0 1-2 0v-5.507c-.346.283-.752.575-1.235.864a1 1 0 1 1-1.03-1.715c1.203-.721 1.766-1.4 2.281-2.024c.074-.09.148-.178.222-.265a1 1 0 0 1 1.107-.292Zm4.147 1.6C13.85 11.635 14.864 11 16.25 11s2.4.635 3.008 1.661c.564.95.742 2.161.742 3.339s-.178 2.39-.742 3.339C18.65 20.365 17.636 21 16.25 21s-2.4-.636-3.008-1.661c-.564-.95-.742-2.161-.742-3.339s.178-2.39.742-3.339Zm1.72 1.021c-.296.498-.462 1.287-.462 2.318c0 1.031.166 1.82.461 2.318c.251.422.613.682 1.289.682c.676 0 1.038-.26 1.288-.682c.296-.498.462-1.287.462-2.318c0-1.031-.166-1.82-.462-2.318c-.25-.422-.612-.682-1.288-.682s-1.038.26-1.289.682Z'></path>
+  </svg>
+)
+
+export default ForwardIcon

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const FullscreenEnterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    data-uia='control-fullscreen-enter'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M0 5a2 2 0 0 1 2-2h7v2H2v4H0V5Zm22 0h-7V3h7a2 2 0 0 1 2 2v4h-2V5ZM2 15v4h7v2H2a2 2 0 0 1-2-2v-4h2Zm20 4v-4h2v4a2 2 0 0 1-2 2h-7v-2h7Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default FullscreenEnterIcon

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const FullscreenExitIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    data-uia='control-fullscreen-exit'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M24 8h-5V3h-2v7h7V8ZM0 16h5v5h2v-7H0v2Zm7-6H0V8h5V3h2v7Zm12 11v-5h5v-2h-7v7h2Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default FullscreenExitIcon

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

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const LoadingIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    className='svg-icon-nfplayerPlay'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fill='currentColor'
+      d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z'
+      opacity='.5'
+    />
+    <path fill='currentColor' d='M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z'>
+      <animateTransform
+        attributeName='transform'
+        dur='1s'
+        from='0 12 12'
+        repeatCount='indefinite'
+        to='360 12 12'
+        type='rotate'
+      />
+    </path>
+  </svg>
+)
+
+export default LoadingIcon

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const PauseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    className='svg-icon-nfplayerPause'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M4.5 3a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-17a.5.5 0 0 0-.5-.5h-5Zm10 0a.5.5 0 0 0-.5.5v17a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-17a.5.5 0 0 0-.5-.5h-5Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default PauseIcon

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps, memo } from 'react'
+
+const PlayIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    className='svg-icon-nfplayerPlay'
+    style={{ width: '100%', height: '100%' }}
+    {...props}>
+    <path
+      d='M4 2.691a1 1 0 0 1 1.482-.876l16.925 9.309a1 1 0 0 1 0 1.752L5.482 22.185A1 1 0 0 1 4 21.309V2.69Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default PlayIcon