commit

app/assets/global.css

@@ -24,10 +24,20 @@
     
 }
 
+.light .pop {
+    --ui-bg: var(--color-zinc-50);
+}
+
 .dark {
     --ui-bg: var(--color-black);
 }
 
+/* aqui é descendência -- aplica a todos os subelementos de .dark que tenha .pop */
+.dark .pop {
+    --ui-bg: var(--color-zinc-900);
+}
+
+
 
 .inter {
     font-family: "Inter";

app/components/main_header.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 
 </script>
 <template>
- <UHeader :toggle="false" class="bg-zinc-950 mb-4">
+ <UHeader :toggle="false" class="pop mb-4">
         <template #title>
           <h2 class="font-bold">{{props.title}}</h2>
         </template>

app/pages/index.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 
+  const video = ref(1);
 
 </script>
 
 <template>
     <MainHeader :ui_colors="ui_colors_dropdown"/>
     <div class="justify-center flex flex-col mt-4 mb-4 w-full">
-        <h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow text-5xl md:text-7xl rgb-text">Youtube to MP3</h1>
+        <h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow max-sm:text-5xl sm:text-6xl md:text-7xl xl:text-8xl rgb-text">Youtube to MP3</h1>
 
          <div class="w-full flex self-center justify-center">
         <UInput
-            class="self-center w-1/3 geist-mono mt-3 mb-3" 
+            class="self-center geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
             placeholder="Search for a YouTube video..." >
             <template #trailing>
@@ -20,30 +21,22 @@
         
         </div>
     </div>
+    <div class="w-full max-w-md mx-auto mt-8 p-6 light:bg-zinc-50 dark:bg-zinc-950 rounded-xl" v-if="video">
+        
+      <div class="video-container">
+          <LazyYoutube src="https://www.youtube.com/watch?v=-B48W6H2YHE&list=RD-B48W6H2YHE&start_radio=1" />
+      </div>
 
-            <div class="w-full max-w-md mx-auto mt-8 p-6 bg-zinc-950 rounded-xl">
+      <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
-              
+          <UInput type="text" value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="w-full" />
-            <div class="video-container">
+      </UFormField>
-              <iframe 
+      <UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
-              class="w-full"
+          <UInput type="text" value="my_audio.mp3" class="w-full" />
-               height="315" 
+      </UFormField>
-               src="https://www.youtube.com/embed/vkNHMqQqCtk?si=Jnd3Vx17iDKw-v3f" 
+      <div class="text-center">
-               title="YouTube video player" frameborder="0"
+          <UButton class="mt-4 rounded-md px-6 py-3 text-white">Convert to MP3</UButton>
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+      </div>
-                referrerpolicy="strict-origin-when-cross-origin" 
+    </div>
-                allowfullscreen></iframe>
-            </div>
-
-            <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
-                <UInput type="text" value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="w-full" />
-            </UFormField>
-            <UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
-                <UInput type="text" value="my_audio.mp3" class="w-full" />
-            </UFormField>
-            <div class="text-center">
-                <UButton class="mt-4 rounded-md px-6 py-3 text-white" >Convert to MP3</UButton>
-            </div>
-        </div>
 
 </template>
 

nuxt.config.ts

@@ -3,9 +3,23 @@ import tailwindcss from "@tailwindcss/vite"
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
+<<<<<<< HEAD
   modules: [ "@nuxt/ui", "@nuxt/image", "@nuxt/fonts", "@nuxtjs/color-mode"],
+=======
+  modules: [
+    "@nuxt/ui",
+    "@nuxt/image",
+    "@nuxt/fonts",
+    "@nuxtjs/color-mode",
+    "nuxt-lazytube"
+  ],
+>>>>>>> fd526e9 (commit)
   css: [ "@/assets/global.css" ],
   vite: {
     plugins: [ tailwindcss() ]
   }
+<<<<<<< HEAD
 })
+=======
+})
+>>>>>>> fd526e9 (commit)

package.json

@@ -17,6 +17,10 @@
     "@nuxtjs/color-mode": "^4.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "nuxt": "^4.2.2",
+<<<<<<< HEAD
+=======
+    "nuxt-lazytube": "0.2.5",
+>>>>>>> fd526e9 (commit)
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"

pnpm-lock.yaml

@@ -29,6 +29,12 @@ importers:
       nuxt:
         specifier: ^4.2.2
         version: 4.2.2(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(ioredis@5.9.1)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.55.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))(yaml@2.8.2)
+<<<<<<< HEAD
+=======
+      nuxt-lazytube:
+        specifier: 0.2.5
+        version: 0.2.5
+>>>>>>> fd526e9 (commit)
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -3229,6 +3235,12 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+<<<<<<< HEAD
+=======
+  nuxt-lazytube@0.2.5:
+    resolution: {integrity: sha512-SaAMosZh0otF/zOfeng0lzUd5M10gkC2rwppGDISjno8z1C+mEymwjE8SVbnnsipAxkTy9Qm8umd+GuhFNo/hw==}
+
+>>>>>>> fd526e9 (commit)
   nuxt@4.2.2:
     resolution: {integrity: sha512-n6oYFikgLEb70J4+K19jAzfx4exZcRSRX7yZn09P5qlf2Z59VNOBqNmaZO5ObzvyGUZ308SZfL629/Q2v2FVjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4316,6 +4328,12 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+<<<<<<< HEAD
+=======
+  whatwg-fetch@3.6.20:
+    resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
+
+>>>>>>> fd526e9 (commit)
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -7839,6 +7857,13 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+<<<<<<< HEAD
+=======
+  nuxt-lazytube@0.2.5:
+    dependencies:
+      whatwg-fetch: 3.6.20
+
+>>>>>>> fd526e9 (commit)
   nuxt@4.2.2(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(ioredis@5.9.1)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.55.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))(yaml@2.8.2):
     dependencies:
       '@dxup/nuxt': 0.2.2(magicast@0.5.1)
@@ -9123,6 +9148,11 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
+<<<<<<< HEAD
+=======
+  whatwg-fetch@3.6.20: {}
+
+>>>>>>> fd526e9 (commit)
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3