feat: enhance note preview layout and add YouTube link embedding functionality

app/templates/note_preview.html

@@ -2,87 +2,143 @@
 
 {% block content %}
 <div class="max-w-7xl mx-auto px-4 sm:px-6">
-    <div class="mb-8 text-center">
-        <a href="{{ url_for('notes.list') }}" class="inline-flex items-center gap-2 font-mono text-sm text-gray-400 hover:text-blue-400 transition mb-6">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-            </svg>
-            Back to Notes
-        </a>
-        
-        <h1 class="font-display text-5xl font-bold tracking-tight mb-4">
-            {{ note.title }}
+  <div class="mb-8">
+    <div class="flex flex-col-reverse sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
+      <div>
+        <h1 class="font-display text-4xl sm:text-5xl font-bold tracking-tight mb-4">
+          {{ note.title }}
         </h1>
-        
-        <div class="flex flex-wrap gap-3 mb-6 justify-center">
-            <span class="px-4 py-2 bg-blue-500/20 border border-blue-500/50 rounded-lg font-mono text-sm">
-                {{ note.subject.name }}
-            </span>
-            <span class="px-4 py-2 bg-purple-500/20 border border-purple-500/50 rounded-lg font-mono text-sm">
-                {{ note.note_type.name }}
-            </span>
-            <span class="glass rounded-lg font-mono text-sm text-gray-400 flex items-center gap-2 px-3 py-2">
-                <img src="https://api.dicebear.com/9.x/thumbs/svg?seed={{ note.user.email }}" alt="{{ note.user.name }} Avatar" class="w-6 h-6 rounded-full">
-                by {{ note.user.name }}
-            </span>
-            <span class="px-4 py-2 glass rounded-lg font-mono text-sm text-gray-400">
-                {{ note.created_at.strftime('%b %d, %Y') }}
-            </span>
+
+        <div class="flex flex-wrap gap-3 mb-6">
+          <span class="px-4 py-2 bg-blue-500/20 border border-blue-500/50 rounded-lg font-mono text-sm">
+            {{ note.subject.name }}
+          </span>
+          <span class="px-4 py-2 bg-purple-500/20 border border-purple-500/50 rounded-lg font-mono text-sm">
+            {{ note.note_type.name }}
+          </span>
+          <span class="glass rounded-lg font-mono text-sm text-gray-400 flex items-center gap-2 px-3 py-2">
+            <img src="https://api.dicebear.com/9.x/thumbs/svg?seed={{ note.user.email }}"
+              alt="{{ note.user.name }} Avatar" class="w-6 h-6 rounded-full">
+            by {{ note.user.name }}
+          </span>
+          <span class="px-4 py-2 glass rounded-lg font-mono text-sm text-gray-400">
+            {{ note.created_at.strftime('%b %d, %Y') }}
+          </span>
         </div>
-        
+
         {% if note.description %}
-        <p class="font-mono text-gray-300 mb-6">{{ note.description }}</p>
+        <p class="font-mono text-gray-300 max-w-3xl">{{ note.description }}</p>
         {% endif %}
+      </div>
+
+      <a href="{{ url_for('notes.list') }}"
+        class="inline-flex items-center gap-2 font-mono text-sm text-gray-400 hover:text-blue-400 transition whitespace-nowrap">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to Notes
+      </a>
     </div>
-    
-    <!-- Preview Area -->
-    <div class="glass p-8 rounded-2xl mb-8">
-        {% if note.original_link %}
-            <div class="text-center">
-                <p class="font-mono text-sm text-gray-400 mb-4">External Link</p>
-                <a href="{{ note.presigned_url }}" target="_blank" class="inline-flex items-center gap-2 font-mono text-blue-400 hover:text-blue-300 transition break-all">
-                    {{ note.presigned_url }}
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
-                    </svg>
-                </a>
-            </div>
-        {% else %}
-            {% set ext = note.link.split('.')[-1].lower() %}
-            
-            {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
-                <img src="{{ note.presigned_url }}" class="w-full rounded-xl" alt="{{ note.title }}">
-            {% elif ext == 'pdf' %}
-                <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
-            {% elif ext in ['mp4', 'webm', 'ogg'] %}
-                <video controls class="w-full rounded-xl">
-                    <source src="{{ note.presigned_url }}" type="video/{{ ext }}">
-                </video>
-            {% elif ext in ['mp3', 'wav', 'ogg'] %}
-                <audio controls class="w-full">
-                    <source src="{{ note.presigned_url }}" type="audio/{{ ext }}">
-                </audio>
-            {% elif ext in ['txt', 'md'] %}
-                <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
-            {% else %}
-                <div class="text-center py-12">
-                    <p class="font-mono text-gray-400 mb-4">Preview not available for this file type</p>
-                    <p class="font-mono text-sm text-gray-500">{{ note.link.split('/')[-1] }}</p>
-                </div>
-            {% endif %}
-        {% endif %}
+  </div>
+
+  <!-- Preview Area -->
+  <div class="glass p-4 sm:p-8 rounded-2xl mb-8" id="preview-container">
+    {% if note.original_link %}
+    <div id="link-preview" class="text-center py-8" data-url="{{ note.presigned_url }}">
+      <p class="font-mono text-sm text-gray-400 mb-4">External Link</p>
+      <a href="{{ note.presigned_url }}" target="_blank"
+        class="inline-flex items-center gap-2 font-mono text-blue-400 hover:text-blue-300 transition break-all">
+        {{ note.presigned_url }}
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
     </div>
-    
-    <!-- Actions -->
-    <div class="flex gap-4 justify-center">
-        {% if note.presigned_url %}
-        <a href="{{ note.presigned_url }}" download class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow">
-            Download
-        </a>
-        {% endif %}
-        <a href="{{ url_for('notes.share', id=note.id) }}" class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5">
-            Share
-        </a>
+    {% else %}
+    {% set ext = note.link.split('.')[-1].lower() %}
+
+    {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
+    <img src="{{ note.presigned_url }}" class="w-full rounded-xl" alt="{{ note.title }}">
+    {% elif ext == 'pdf' %}
+    <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
+    {% elif ext in ['mp4', 'webm', 'ogg'] %}
+    <video controls class="w-full rounded-xl">
+      <source src="{{ note.presigned_url }}" type="video/{{ ext }}">
+    </video>
+    {% elif ext in ['mp3', 'wav', 'ogg'] %}
+    <audio controls class="w-full">
+      <source src="{{ note.presigned_url }}" type="audio/{{ ext }}">
+    </audio>
+    {% elif ext in ['txt', 'md'] %}
+    <iframe src="{{ note.presigned_url }}" class="w-full h-[600px] rounded-xl bg-white/5"></iframe>
+    {% else %}
+    <div class="text-center py-12">
+      <p class="font-mono text-gray-400 mb-4">Preview not available for this file type</p>
+      <p class="font-mono text-sm text-gray-500">{{ note.link.split('/')[-1] }}</p>
     </div>
+    {% endif %}
+    {% endif %}
+  </div>
+
+  <!-- Actions -->
+  <div class="flex gap-4">
+    {% if note.presigned_url %}
+    {% if note.original_link %}
+    <a href="{{ note.presigned_url }}" target="_blank"
+      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
+      Go To Site
+    </a>
+    {% else %}
+    <a href="{{ note.presigned_url }}" download
+      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
+      Download
+    </a>
+    {% endif %}
+    {% endif %}
+    <a href="{{ url_for('notes.share', id=note.id) }}"
+      class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
+      Share
+    </a>
+  </div>
 </div>
-{% endblock %}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const linkPreview = document.getElementById('link-preview');
+    if (linkPreview) {
+      const url = linkPreview.getAttribute('data-url');
+
+      // Regex for Playlist
+      const playlistRegex = /[?&]list=([^#\&\?]+)/;
+      const playlistMatch = url.match(playlistRegex);
+
+      // Regex for Video
+      const videoRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
+      const videoMatch = url.match(videoRegex);
+
+      let embedUrl = null;
+
+      if (playlistMatch && playlistMatch[1]) {
+        embedUrl = `https://www.youtube.com/embed/videoseries?list=${playlistMatch[1]}`;
+      } else if (videoMatch && videoMatch[1]) {
+        embedUrl = `https://www.youtube.com/embed/${videoMatch[1]}`;
+      }
+
+      if (embedUrl) {
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('src', embedUrl);
+        iframe.setAttribute('class', 'w-full aspect-video rounded-xl shadow-lg');
+        iframe.setAttribute('frameborder', '0');
+        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
+        iframe.setAttribute('allowfullscreen', 'true');
+        iframe.setAttribute('loading', 'eager');
+
+        linkPreview.innerHTML = '';
+        linkPreview.appendChild(iframe);
+        linkPreview.classList.remove('text-center', 'py-8');
+      }
+    }
+  });
+</script>
+{% endblock %}