changed saving mecanism to mp3

app.vue

@@ -43,7 +43,6 @@ onMounted(async () => {
   document.addEventListener('keydown', handleKeyDown);
   document.addEventListener('focusin', updateFocus);
   document.addEventListener('focusout', updateFocus);
-  await $settings.searchApiURL()
 });
 
 onUnmounted(() => {

assets/styles/pages/settings.scss

@@ -9,17 +9,23 @@
 .settings {
   padding-bottom: 0;
   padding-top: 64px;
-  gap: v.$spacing;
+  gap: 32px;
   display: flex;
   flex-direction: column;
   width: 100%;
-  align-items: center;
+  align-items: left;
   text-align: left;
   padding-inline: 24px;
   overflow: auto;
 }
 
-.equalizer {
+.setting {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.equalizer .eq {
   background-color: v.$element;
   color: v.$text;
   padding: 38px;
@@ -122,4 +128,29 @@
       }
     }
   }
+}
+
+.api-url .input-container {
+  width: 268px;
+  height: 32px;
+  background-color: v.$element;
+  outline: none;
+  border: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  padding-inline: 6px;
+  gap: 6px;
+  margin-bottom: 16px;
+
+  .input {
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+    outline: none;
+    color: #8b8b8b;
+    width: 100%;
+    height: 32px;
+  }
 }

package.json

@@ -12,16 +12,16 @@
   "devDependencies": {
     "@tauri-apps/api": "2.0.0-beta.7",
     "nuxt": "^3.11.2",
-    "sass": "^1.74.1",
-    "vue": "^3.4.20"
+    "sass": "1.77.0",
+    "vue": "3.4.27"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
     "@tauri-apps/cli": "2.0.0-beta.12",
     "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
     "@tauri-apps/plugin-fs": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-global-shortcut": "2.0.0-beta.2",
-    "@tauri-apps/plugin-os": "2.0.0-beta.2",
+    "@tauri-apps/plugin-global-shortcut": "2.0.0-beta.3",
+    "@tauri-apps/plugin-os": "2.0.0-beta.3",
     "axios": "^1.6.8",
     "pinia": "^2.1.7",
     "uuid": "^9.0.1",

pages/[playlist].vue

@@ -30,7 +30,7 @@
         </div>
         <div class="items">
           <div v-for="(song, index) in filteredSongs" :key="song.id" @click="playSong(song.id)" class="song">
-            <img :src="song.cover || '/cover.png'" :alt="song.title" class="cover" />
+            <img :src="song.coverURL || '/cover.png'" :alt="song.title" class="cover" />
             <div class="titles">
               <p class="title">{{ truncate(song.title) }}</p>
               <p class="artist">{{ truncate(song.artist) }}</p>

pages/search.vue

@@ -4,7 +4,8 @@
     <div class="search">
       <div class="search-container">
         <IconsSearch />
-        <input class="input" spellcheck="false" type="text" v-model="searchTerm" @input="handleInput" placeholder="Search" />
+        <input class="input" spellcheck="false" type="text" v-model="searchTerm" @input="handleInput"
+          placeholder="Search" />
       </div>
       <ul>
         <li v-for="(song, index) in searchResults" :class="{ 'first-result': index === 0 }"
@@ -39,10 +40,16 @@ async function searchSongs() {
     return;
   }
 
-  const apiURL = $settings.getApiURL()
+  let apiURL = $settings.getApiURL()
+
+  if (apiURL == "") {
+    apiURL = "https://pipedapi.r4fo.com";
+  }
+  
+  console.log(`${apiURL}/search?q=${encodeURIComponent(searchTerm.value)}&filter=music_songs`);
 
   try {
-    const response = await fetch(`${apiURL}/search?q=${searchTerm.value}&filter=music_songs`);
+    const response = await fetch(`${apiURL}/search?q=${encodeURIComponent(searchTerm.value)}&filter=music_songs`);
     const data = await response.json();
     searchResults.value = data.items
       .filter(item => item.type !== 'channel')
@@ -56,7 +63,7 @@ async function searchSongs() {
         durationFormatted: `${Math.floor(item.duration / 60)}:${item.duration % 60 < 10 ? '0' : ''}${item.duration % 60}`
       }));
   } catch (error) {
-    console.error("Failed to fetch songs:", error);
+    console.error("Failed to fetch songs:", error, apiURL, searchTerm.value);
     searchResults.value = [];
   }
 

pages/settings.vue

@@ -2,22 +2,32 @@
   <div class="main element">
     <p class="element-title">Settings</p>
     <div class="settings">
-      <p>Equalizer</p>
-      <div class="equalizer">
-        <div class="info">
-          <p>+12.0</p>
-          <p>0.0</p>
-          <p>-12.0</p>
-        </div>
-        <div class="sliders">
-          <div v-for="(freq, index) in frequencies" :key="freq" class="freq">
-            <input type="number" v-model.number="eqGains[index]" @input="updateEqGain(index, $event.target.valueAsNumber)" class="gain" step="0.1" min="-12" max="12">
-            <input type="range" min="-12" max="12" step="0.1" v-model.number="eqGains[index]"
-              @input="updateEqGain(index, eqGains[index])" class="range">
-            <div class="hz">{{ formatFrequency(freq) }}</div>
+      <div class="equalizer setting">
+        <p>Equalizer</p>
+        <div class="eq">
+          <div class="info">
+            <p>+12.0</p>
+            <p>0.0</p>
+            <p>-12.0</p>
+          </div>
+          <div class="sliders">
+            <div v-for="(freq, index) in frequencies" :key="freq" class="freq">
+              <input type="number" v-model.number="eqGains[index]"
+                @input="updateEqGain(index, $event.target.valueAsNumber)" class="gain" step="0.1" min="-12" max="12">
+              <input type="range" min="-12" max="12" step="0.1" v-model.number="eqGains[index]"
+                @input="updateEqGain(index, eqGains[index])" class="range">
+              <div class="hz">{{ formatFrequency(freq) }}</div>
+            </div>
           </div>
         </div>
       </div>
+
+      <div class="api-url setting">
+        <p>Search API URL</p>
+        <div class="input-container">
+          <input class="input" v-model="apiUrl" @input="updateApiURL" spellcheck="false" type="url" placeholder="url" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -30,6 +40,12 @@ const { $music, $settings } = useNuxtApp()
 
 const frequencies = [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
 const eqGains = ref(new Array(frequencies.length).fill(0.0));
+const apiUrl = ref("");
+
+function updateApiURL() {
+  $settings.setApiURL(apiUrl.value);
+}
+
 
 const eq = $settings.getEq()
 frequencies.forEach((freq, index) => {

pages/songs.vue

@@ -43,35 +43,23 @@
 
 <script lang="ts" setup>
 import { type Song } from "~/types/types";
-import { computed, ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useMusicStore } from "~/stores/music";
-import { invoke } from "@tauri-apps/api/core";
 
 const { $music } = useNuxtApp();
 const musicStore = useMusicStore();
 
-const songs = ref<Song[]>([]);
 const searchQuery = ref("");
+const songs = ref([]);
 
 onMounted(async () => {
-  await loadSongs();
+  await reloadSongs();
 });
 
-const loadSongs = async () => {
-  const loadedSongs = await $music.getSongs();
-  const songArray = Object.values(loadedSongs.songs);
-  await Promise.all(
-    songArray.map(async (song) => {
-      song.coverURL = await $music.getCoverURLFromID(song.id);
-    })
-  );
-  songs.value = songArray;
-};
-
 watch(
   () => musicStore.lastUpdated,
   async () => {
-    await loadSongs();
+    await reloadSongs();
   }
 );
 
@@ -95,6 +83,17 @@ const filteredSongs = computed(() => {
     });
 });
 
+async function reloadSongs() {
+  const loadedSongs = await $music.getSongs();
+  const songArray = Object.values(loadedSongs.songs);
+  await Promise.all(
+    songArray.map(async (song) => {
+      song.coverURL = await $music.getCoverURLFromID(song.id);
+    })
+  );
+  songs.value = songArray;
+}
+
 async function play(id: string, index: number) {
   const queueIds = filteredSongs.value.slice(index).map(song => song.id);
   await $music.setQueue(queueIds);

plugins/music.ts

@@ -100,11 +100,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     },
     async setSong(id: string) {
       if (
-        await exists(`Vleer/Songs/${id}.webm`, {
+        await exists(`Vleer/Songs/${id}.mp3`, {
           baseDir: BaseDirectory.Audio,
         })
       ) {
-        const contents = await readFile(`Vleer/Songs/${id}.webm`, {
+        const contents = await readFile(`Vleer/Songs/${id}.mp3`, {
           baseDir: BaseDirectory.Audio,
         });
         musicStore.player.currentSongId = id;
@@ -118,7 +118,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     },
     async exists(id: string): Promise<boolean> {
-      return await exists(`Vleer/Songs/${id}.webm`, {
+      return await exists(`Vleer/Songs/${id}.mp3`, {
         baseDir: BaseDirectory.Audio,
       });
     },

plugins/settings.ts

@@ -56,7 +56,18 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         console.error('Failed to fetch API URLs:', error);
         return [];
       }
-    }
+    },
+    async getApiURLs() {
+      try {
+        const response = await fetch('https://piped-instances.kavin.rocks/');
+        const instances = await response.json();
+        const urls = instances.map((instance: { api_url: string }) => instance.api_url);
+        return urls;
+      } catch (error) {
+        console.error('Failed to fetch API URLs:', error);
+        return [];
+      }
+    },
   };
 
   return {

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vleer"
-version = "1.0.0"
+version = "1.0.0-beta.4"
 description = "Vleer"
 authors = ["pandadev", "waradu"]
 edition = "2021"

src-tauri/src/main.rs

@@ -4,7 +4,7 @@
 )]
 
 use anyhow::{anyhow, Result};
-use tokio::io::AsyncWriteExt;
+use rusty_ytdl::Video;
 use std::path::PathBuf;
 use tauri::Error as TauriError;
 use reqwest::Client;
@@ -13,31 +13,8 @@ use tokio::time::Instant;
 mod discord_rpc;
 
 #[tauri::command]
-async fn download(url: String) -> Result<(), TauriError> {
-
-    let yt_id = url.trim_start_matches("https://youtube.com/watch?v=");
-
-    let client = reqwest::Client::new();
-    let response = client.get(format!("https://wave.wireway.ch/api/extract/music?q=/watch?v={}", yt_id))
-        .send()
-        .await
-        .map_err(|e| anyhow!("Failed to send request: {}", e))?;
-
-    if !response.status().is_success() {
-        return Err(anyhow!("Failed to download video: {}", response.status()).into());
-    }
-
-    let video_data = response.json::<serde_json::Value>().await.map_err(|e| anyhow!("Failed to parse JSON: {}", e))?;
-    let video_url = video_data["url"].as_str().ok_or_else(|| anyhow!("URL not found in response"))?;
-
-    let video_response = client.get(video_url)
-        .send()
-        .await
-        .map_err(|e| anyhow!("Failed to download video: {}", e))?;
-
-    if !video_response.status().is_success() {
-        return Err(anyhow!("Failed to download video: {}", video_response.status()).into());
-    }
+async fn download(url: String, name: String) -> Result<(), TauriError> {
+    let video = Video::new(url.clone()).map_err(|e| anyhow!(e.to_string()))?;
 
     let mut base_path = PathBuf::new();
     match std::env::consts::OS {
@@ -54,11 +31,12 @@ async fn download(url: String) -> Result<(), TauriError> {
 
     let mut path = base_path.clone();
     path.push("Songs");
-    path.push(format!("{}.webm", yt_id));
+    path.push(&name);
 
-    let mut file = tokio::fs::File::create(&path).await.map_err(|e| anyhow!("Failed to create file: {}", e))?;
-    let content = video_response.bytes().await.map_err(|e| anyhow!("Failed to read video bytes: {}", e))?;
-    file.write_all(&content).await.map_err(|e| anyhow!("Failed to write video to file: {}", e))?;
+    video
+        .download(&path)
+        .await
+        .map_err(|e| anyhow!(e.to_string()))?;
 
     println!("Downloaded: {}", path.display());
     Ok(())

src-tauri/tauri.conf.json

@@ -1,10 +1,10 @@
 {
   "productName": "Vleer",
-  "version": "1.0.0",
+  "version": "1.0.0-beta.4",
   "identifier": "app.vleer",
   "build": {
-    "beforeDevCommand": "pnpm nuxt dev",
-    "beforeBuildCommand": "pnpm nuxt generate",
+    "beforeDevCommand": "bun nuxt dev",
+    "beforeBuildCommand": "bun nuxt generate",
     "devUrl": "http://localhost:3000",
     "frontendDist": "../dist"
   },