feat: add TvPlayer component and integrate into routing

.env

@@ -1,4 +1,4 @@
-VITE_BACKEND_DOMAIN=https://localhost:6767
+VITE_BACKEND_DOMAIN=https://api.snusxd.site
 
 VITE_LASTFM_API=577403120879aadec2e6fd0d6160cca4
 LASTFM_SECRET=08baaf3b3050854d019ce5884e0d6d27

Dockerfile

@@ -8,7 +8,9 @@ WORKDIR /app
 FROM base AS build
 ARG CI=true
 ARG VITE_BACKEND_DOMAIN
+ARG VITE_LASTFM_API
 ENV VITE_BACKEND_DOMAIN=$VITE_BACKEND_DOMAIN
+ENV VITE_LASTFM_API=$VITE_LASTFM_API
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN pnpm run build
 

src/components/now-playing.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import axios from 'axios'
 import { onMounted, onUnmounted, ref } from 'vue'
-import { ChangeTitle } from '@/utils/change-title'
-
-const backendUrl = import.meta.env.VITE_BACKEND_DOMAIN
+import { ChangeTitle } from '@/utils/ChangeTitle'
+import { Song } from '@/utils/Song'
 
 // api
 const lastfmapi = import.meta.env.VITE_LASTFM_API
@@ -12,74 +10,49 @@ const lastfmusername = 'snsxd'
 const header = ref('silence...')
 const artist = ref('today...')
 const track = ref("we're silnce...")
-const labelurl = ref('/public/default-cover.png')
+const labelurl = ref('/default-cover.png')
 
 // colors
 const border_color = ref('#656565')
 const background_color = ref('#353535')
 const primary_color = ref('#656565') // #FFFFFF
 
-async function checkNowPlaying(api: string, username: string) {
-  try {
-    const response = await axios.get(
-      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${api}&format=json&limit=1`,
-    )
-    return response.data.recenttracks.track
-  } catch (error) {
-    console.error('Error fetching data:', error)
-  }
-}
-
-async function changeCover(artist: string, album: string, mbid: string): Promise<string> {
-  try {
-    const result = `${backendUrl}/cover/${artist.replace('/', '')}/${album}/${mbid ? mbid : '0'}`
-    return result
-  } catch (err) {
-    console.error('Error while changing track cover:', err)
-    return '/public/default-cover.png'
-  }
-}
-
-let timerId: ReturnType<typeof setTimeout>
+let timer_id: ReturnType<typeof setTimeout>
 
 onMounted(() => {
-  const updateSong = async () => {
-    const trackData = await checkNowPlaying(lastfmapi, lastfmusername)
-    console.log(trackData)
-    if (trackData) {
-      if (trackData.length > 1) {
-        if (header.value !== 'now playing') {
-          await ChangeTitle(header, header.value, 'now playing')
-          primary_color.value = '#FFFFFF'
-        }
-        if (artist.value != trackData[0].artist['#text'])
-          ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
-        if (track.value != trackData[0].name) {
-          labelurl.value = await changeCover(
-            trackData[0].artist['#text'],
-            trackData[0].album['#text'],
-            trackData[0].album.mbid,
-          )
-          console.log(labelurl.value)
-          ChangeTitle(track, track.value, trackData[0].name)
-        }
-      } else {
-        if (header.value !== 'silence...') ChangeTitle(header, header.value, 'silence...')
-        primary_color.value = '#656565'
-        labelurl.value = '/public/default-cover.png'
-        if (artist.value != trackData[0].artist['#text'])
-          ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
-        if (track.value != trackData[0].name) ChangeTitle(track, track.value, trackData[0].name)
+  const SONG = new Song(lastfmapi, lastfmusername)
+
+  const update_song = async () => {
+    SONG.update_song_data()
+
+    if (SONG.is_now_playing) {
+      if (header.value !== 'now playing') {
+        await ChangeTitle(header, header.value, 'now playing')
+        primary_color.value = '#FFFFFF'
       }
+      if (artist.value != SONG.artist) ChangeTitle(artist, artist.value, SONG.artist)
+      if (track.value != SONG.song) {
+        SONG.update_cover_url()
+        console.log(SONG.cover_url)
+        labelurl.value = SONG.cover_url
+        ChangeTitle(track, track.value, SONG.song)
+      }
+    } else {
+      if (header.value !== 'silence...') ChangeTitle(header, header.value, 'silence...')
+      primary_color.value = '#656565'
+      labelurl.value = '/default-cover.png'
+      if (artist.value != 'today...') ChangeTitle(artist, artist.value, 'today...')
+      if (track.value != "we're silnce...") ChangeTitle(track, track.value, "we're silnce...")
     }
-    timerId = setTimeout(updateSong, 10000)
+
+    timer_id = setTimeout(update_song, 10000)
   }
 
-  updateSong()
+  update_song()
 })
 
 onUnmounted(() => {
-  if (timerId) clearTimeout(timerId)
+  if (timer_id) clearTimeout(timer_id)
 })
 </script>
 
@@ -106,6 +79,7 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   gap: 10px;
+  min-height: 1.4em;
 }
 
 h1 {
@@ -122,10 +96,13 @@ h1 {
 p {
   color: v-bind(primary_color);
   margin: 0;
+  min-height: 1.4em;
 }
-.track {
+
+.track_name {
   font-weight: bolder;
 }
+
 img {
   width: 75px;
   height: auto;
@@ -162,9 +139,9 @@ img {
     </h1>
 
     <div class="cover_name">
-      <img :src="labelurl" />
+      <img :src="labelurl" @error="labelurl = '/default-cover.png'" />
       <div class="name">
-        <p class="track">{{ track }}</p>
+        <p class="track_name">{{ track }}</p>
         <p>{{ artist }}</p>
       </div>
     </div>

src/global.css

@@ -1,11 +1,12 @@
 body {
   background-color: #353535;
   font-family: 'Iosevka', sans-serif;
+  margin: 0;
 }
 
 @font-face {
   font-family: 'Iosevka';
-  src: url('/public/fonts/sgr_iosevka_regular.woff2') format('woff2');
+  src: url('/fonts/sgr_iosevka_regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import NowPlaying from './components/now-playing.vue'
 import GeneralXd from './components/general-xd.vue'
 import './global.css'
+import TvPlayer from './pages/tv-player.vue'
 
 const Home = {
   render() {
@@ -15,6 +16,7 @@ const Home = {
 const routes = [
   { path: '/', component: Home },
   { path: '/nowplay', component: NowPlaying },
+  { path: '/player', component: TvPlayer },
 ]
 
 export const router = createRouter({

src/pages/tv-player.vue

@@ -0,0 +1,41 @@
+<style scoped>
+.bg {
+  background-color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+div {
+  margin: 0;
+  padding: 0;
+}
+
+.screen {
+  background-color: white;
+  aspect-ratio: 4 / 3;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+p {
+  font-family: sans-serif;
+  color: black;
+  /* margin: 0; */
+  /* font-size: x-large; */
+}
+</style>
+
+<template>
+  <div class="bg">
+    <div class="screen">
+      <p>hello?...</p>
+    </div>
+  </div>
+</template>

src/utils/Song.ts

@@ -0,0 +1,52 @@
+import axios from 'axios'
+const api_domain = import.meta.env.VITE_BACKEND_DOMAIN
+
+export class Song {
+  LFM_API: string
+  LFM_USERNAME: string
+
+  is_now_playing: boolean = false
+  song: string = 'track_name'
+  song_mbid: string = 'track_song_mbid'
+  artist: string = 'track_artist'
+  album: string = 'track_album'
+  album_mbid: string = 'track_album_mbid'
+  cover_url: string = 'cover_url'
+
+  constructor(lfm_api: string, lfm_username: string) {
+    this.LFM_API = lfm_api
+    this.LFM_USERNAME = lfm_username
+  }
+
+  update_cover_url() {
+    const base_url = api_domain.replace(/\/$/, '')
+
+    // спасибо любимому копилоту (модель гемини 3.1 про превью) за это великое решение
+    const safe_artist = encodeURIComponent(this.artist || 'unknown')
+    const safe_album = encodeURIComponent(this.album || 'unknown')
+    const safe_mbid = this.album_mbid || '0'
+
+    this.cover_url = `${base_url}/cover/${safe_artist}/${safe_album}/${safe_mbid}`
+  }
+
+  async update_song_data() {
+    try {
+      const track_data = await (
+        await axios.get(
+          `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${this.LFM_USERNAME}&api_key=${this.LFM_API}&format=json&limit=1`,
+        )
+      ).data.recenttracks.track
+
+      console.log(track_data)
+
+      this.is_now_playing = track_data.length > 1
+      this.song = track_data[0].name
+      this.song_mbid = track_data[0].mbid
+      this.artist = track_data[0].artist['#text']
+      this.album = track_data[0].album['#text']
+      this.album_mbid = track_data[0].album.mbid
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
+  }
+}