chore: add gif and audio preview to examples

examples/App.css

@@ -140,6 +140,55 @@ body {
   accent-color: #ef4444;
 }
 
+.media-test-section {
+  max-width: 1200px;
+  margin: 2rem auto 0;
+}
+
+.media-test-section h2 {
+  font-size: 1.8rem;
+  color: #ef4444;
+  margin-bottom: 0.35rem;
+}
+
+.media-test-subtitle {
+  color: #94a3b8;
+  margin-bottom: 1.3rem;
+}
+
+.media-test-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+.media-test-card {
+  background-color: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.media-test-card h3 {
+  color: #f1f5f9;
+  margin-bottom: 0.45rem;
+}
+
+.media-test-card p {
+  color: #cbd5e1;
+  font-size: 0.95rem;
+  margin-bottom: 0.85rem;
+}
+
+.media-test-player {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.media-test-player-gif {
+  max-width: 320px;
+}
+
 .features-section {
   margin-top: 4rem;
 }
@@ -217,6 +266,14 @@ kbd {
     flex-direction: column;
   }
 
+  .media-test-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .media-test-player-gif {
+    max-width: 100%;
+  }
+
   .features-grid {
     grid-template-columns: 1fr;
   }

examples/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { AudioPlayer } from '../src/components/AudioPlayer'
 import { VideoPlayer } from '../src/components/VideoPlayer'
 import type { SubtitleTrack } from '../src/types'
 import './App.css'
@@ -11,6 +12,8 @@ function App() {
   // Demo video URLs (you can replace with your own)
   const demoVideoUrl = '/player/ses.mp4'
   const demoPoster = '/player/poster.svg'
+  const demoGifUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif'
+  const demoAudioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
 
   const demoSubtitles: SubtitleTrack[] = [
     {
@@ -90,6 +93,48 @@ function App() {
           </div>
         </div>
 
+        <div className="media-test-section">
+          <h2>GIF ve Ses Önizleme</h2>
+          <p className="media-test-subtitle">
+            Yeni medya tiplerinin player içinde nasıl göründüğünü burada test edebilirsiniz.
+          </p>
+
+          <div className="media-test-grid">
+            <article className="media-test-card">
+              <h3>🖼️ Animated Image (GIF)</h3>
+              <p>VideoPlayer, GIF kaynaklarını otomatik algılayıp minimal görüntü modunda açar.</p>
+              <div className="media-test-player media-test-player-gif">
+                <VideoPlayer
+                  src={demoGifUrl}
+                  aspectRatio="1:1"
+                  theme={{
+                    primaryColor: '#ef4444',
+                    accentColor: '#dc2626',
+                  }}
+                />
+              </div>
+            </article>
+
+            <article className="media-test-card">
+              <h3>🎧 Audio Player (.mp3)</h3>
+              <p>MP3/WAV gibi ses dosyaları için ayrı AudioPlayer görünümü.</p>
+              <div className="media-test-player media-test-player-audio">
+                <AudioPlayer
+                  src={demoAudioUrl}
+                  title="SoundHelix Demo Track"
+                  subtitle="AudioPlayer test görünümü"
+                  artwork={demoPoster}
+                  playbackRates={[0.75, 1, 1.25, 1.5, 2]}
+                  theme={{
+                    primaryColor: '#ef4444',
+                    accentColor: '#dc2626',
+                  }}
+                />
+              </div>
+            </article>
+          </div>
+        </div>
+
         <div className="features-section">
           <h2>Features</h2>
           <div className="features-grid">