refactor: update player

feat: added Feed styles
feat: comment section
refactor: componentify Title bar

Author: hexadecimal233

README.md

@@ -79,8 +79,12 @@ Pull Requests: [Pull Requests](https://github.com/hexadecimal233/cloudie/pulls)
 - [ ] Scrobbling support
 - [ ] DJ Support
 - [ ] Watch Router updates on dynamic views 
+- [ ] Ulink is glitcing
 - [ ] Lyrics service
 - [ ] icon start to load online again...
 - [ ] cloudie.common.loading cloudie.common.loadMore cloudie.common.noMore cloudie.common.empty cloudie.common.emptyDesc
 - [ ] music title loading animation
+- [ ] Make tags work
+- [ ] add share modal
+- [ ] add tooltips to icon-only buttons
 -->

src/MainView.vue

@@ -1,28 +1,11 @@
 <template>
   <div class="mx-auto flex h-screen flex-col bg-muted relative overflow-hidden">
     <!-- Background -->
-    <div v-show="config.bg" class="absolute inset-0 bg-cover bg-fixed bg-center opacity-10 dark:opacity-10 background transition-all duration-700 ease-in-out z-[9999] pointer-events-none"
+    <div v-show="config.bg" class="absolute inset-0 bg-cover bg-fixed bg-center opacity-15 dark:opacity-10 background transition-all duration-700 ease-in-out z-[9999] pointer-events-none"
       :style="{ backgroundImage: `url(${config.bg})` }"
       :class="{'blur-sm scale-105': config.bgBlur}"></div>
 
-    <!-- Title Bar PS: data-tauri-drag-region doesn't work somehow -->
-    <div class="w-full px-2 py-1 flex from-primary/5 to-secondary/5 z-10 bg-gradient-to-r" @mousedown="Window.getCurrent().startDragging()">
-      <div class="flex items-center gap-2">
-        <i-mingcute-moon-cloudy-line class="text-primary" />
-        <span class="font-bold" :class="{'text-primary': windowStates.isFocused}">Cloudie</span>
-      </div>
-
-      <div class="flex-1"></div>
-
-      <div class="flex items-center gap-2" :class="{'opacity-50': !windowStates.isFocused}" @mousedown.stop>
-        <UButton class="cursor-pointer" icon="i-mingcute-minimize-line" color="neutral" variant="link"
-          @click="Window.getCurrent().minimize()" />
-        <UButton class="cursor-pointer" :icon="windowStates.isMaximized ? 'i-mingcute-restore-line' : 'i-mingcute-rectangle-line'"
-          color="neutral" variant="link" @click="Window.getCurrent().toggleMaximize()" />
-        <UButton class="cursor-pointer hover:bg-error hover:text-inverted" icon="i-mingcute-close-line" color="neutral"
-          variant="link" @click="Window.getCurrent().close()" />
-      </div>
-    </div>
+    <TitleBar />
 
     <!-- Main Area -->
     <div class="flex flex-1 overflow-hidden my-2">
@@ -95,7 +78,6 @@ import { useUserStore } from "@/systems/stores/user"
 import { getSearchSuggestions } from "@/utils/api"
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue"
 import { useColorMode, useDebounceFn } from "@vueuse/core"
-import { Window } from "@tauri-apps/api/window"
 import { config } from "./systems/config"
 
 const route = useRoute()
@@ -105,21 +87,6 @@ const loading = ref(true)
 const colorMode = useColorMode()
 const userInfo = useUserStore()
 
-const windowStates = ref({
-  isFocused: false,
-  isMaximized: false,
-})
-
-
-
-Window.getCurrent().onResized(async ({}) => {
-  windowStates.value.isMaximized = await Window.getCurrent().isMaximized()
-})
-
-Window.getCurrent().onFocusChanged(({ payload: focused }) => {
-  windowStates.value.isFocused = focused
-})
-
 // 计算滚动条主题
 const scrollbarTheme = computed(() => {
   return "os-theme-" + (colorMode.value === "dark" ? "light" : "dark")

src/components/RichText.vue

@@ -1,8 +1,24 @@
 <template>
-  <component :is="renderContent()" />
+  <UContextMenu :items="items">
+    <div>
+    <component :is="renderContent()" />
+    </div>
+  </UContextMenu>
 </template>
 
 <script setup lang="tsx">
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+const items = computed(() => [
+  {
+    label: useI18n().t("cloudie.common.copy"),
+    action: () => {
+      navigator.clipboard.writeText(props.content) // FIXME: Copy fails
+    },
+  },
+])
+
 const props = defineProps<{
   content: string
 }>()
@@ -19,7 +35,7 @@ function renderContent() {
           <ULink
             key={index}
             to={`/user/${part.username}`}
-            class="text-primary hover:text-primary-600 underline">
+            class="text-primary hover:text-primary-600">
             @{part.username}
           </ULink>
         )
@@ -57,7 +73,7 @@ function parseContent(content: string): Array<{
   }> = []
 
   // Regex patterns
-  const mentionPattern = /@(\w+)/g
+  const mentionPattern = /@([a-zA-Z0-9_-]+)/g
   const urlPattern = /(https?:\/\/[^\s]+)/g
 
   let lastIndex = 0

src/components/TitleBar.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="w-full px-2 py-1 flex from-primary/5 to-secondary/5 z-10 bg-gradient-to-r"
+  @mousedown="Window.getCurrent().startDragging()">
+  <div class="flex items-center gap-2" @mousedown.stop @click.stop="clicksFunc()">
+   <i-mingcute-moon-cloudy-line class="text-primary" />
+   
+         <span class="font-bold transition-none" 
+    :style="easterStyle" 
+    :class="{ 'text-primary': windowStates.isFocused && easterClicks === 0, 'spin-active': false }">
+        Cloudie
+      </span>
+  </div>
+
+  <div class="flex-1"></div>
+
+  <div class="flex items-center gap-2" :class="{ 'opacity-50': !windowStates.isFocused }" @mousedown.stop>
+   <UButton class="cursor-pointer" icon="i-mingcute-minimize-line" color="neutral" variant="link"
+    @click="Window.getCurrent().minimize()" />
+   <UButton class="cursor-pointer"
+    :icon="windowStates.isMaximized ? 'i-mingcute-restore-line' : 'i-mingcute-rectangle-line'" color="neutral"
+    variant="link" @click="Window.getCurrent().toggleMaximize()" />
+   <UButton class="cursor-pointer hover:bg-error hover:text-inverted" icon="i-mingcute-close-line" color="neutral"
+    variant="link" @click="Window.getCurrent().close()" />
+  </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { Window } from "@tauri-apps/api/window"
+import { ref, computed } from "vue" // 引入 onMounted 和 onUnmounted
+import { useRouter } from "vue-router"
+
+const clicksFunc = () => {
+  easterClicks.value++
+}
+
+const easterClicks = ref(0)
+const easterStyle = computed(() => {
+  if (easterClicks.value === 5) {
+    useRouter().push("/test")
+    easterClicks.value = 0
+    return { animation: "none" }
+  }
+  if (easterClicks.value  === 4) {
+    return { animation: "oldschool-blink 0.1s step-end infinite" }
+  } else {
+    return { animation: "none" }
+  }
+})
+
+const windowStates = ref({
+  isFocused: false,
+  isMaximized: false,
+})
+
+Window.getCurrent().onResized(async ({}) => {
+  windowStates.value.isMaximized = await Window.getCurrent().isMaximized()
+})
+
+Window.getCurrent().onFocusChanged(({ payload: focused }) => {
+  windowStates.value.isFocused = focused
+})
+</script>
+
+<style>
+@keyframes oldschool-blink {
+    0% { color: #000; } 
+    50% { color: #f00; } 
+    100% { color: #000; }
+}
+
+@keyframes spin-easter-egg {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spin-active {
+    animation: spin-easter-egg 0.5s ease-in-out infinite; 
+    transform-origin: center;
+}
+</style>

src/components/VirtualList.vue

@@ -7,19 +7,21 @@
                 height: `${virtualRow.size}px`,
                 transform: `translateY(${virtualRow.start}px)`,
             }">
-                <slot class="w-full h-full" name="item" :item="items[virtualRow.index]" :index="virtualRow.index" />
+                <div :ref="measureElement" class="w-full h-full">
+                    <slot name="item" :item="items[virtualRow.index]" :index="virtualRow.index" />
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue"
+import { ref, computed, VNodeRef } from "vue"
 import { useVirtualizer } from "@tanstack/vue-virtual"
 
 const props = defineProps<{
   items: any[]
-  estimateSize: (index: number) => number
+  estimateSize?: (index: number) => number
 }>()
 
 const parentRef = ref<HTMLElement | null>(null)
@@ -30,7 +32,7 @@ const rowVirtualizer = useVirtualizer(
     return {
       count: props.items.length, // this should be reactive
       getScrollElement: () => parentRef.value,
-      estimateSize: props.estimateSize,
+      estimateSize: props.estimateSize || (() => 50), // 提供默认值
       overscan: 5,
     }
   }),
@@ -39,6 +41,17 @@ const rowVirtualizer = useVirtualizer(
 const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 
+// FIXME: dynamic height not working
+const measureElement = (el: any) => {
+  if (!el) {
+    return
+  }
+  
+  rowVirtualizer.value.measureElement(el)
+  
+  return undefined
+}
+
 function goToIndex(index: number) {
   rowVirtualizer.value.scrollToIndex(index, { align: "center" })
 }

src/components/full/FullPlaylist.vue

@@ -1,13 +1,84 @@
 <template>
-  <div>
+  <div class="bg-default border-t border-accented max-w-3xl mx-auto">
+    <div class="flex flex-col gap-3">
+      <div v-if="streamItem" class="flex items-center gap-2 text-muted">
+        <UAvatar :src="streamItem.user.avatar_url" class="size-8" />
+        <ULink :to="`/user/${streamItem.user.id}`" class="text-lg font-bold text-highlighted truncate">
+          {{ streamItem.user.username }}
+        </ULink>
+        <i-mingcute-repeat-line v-if="streamItem.type === 'playlist-repost'" />
+        {{ streamItem.type === 'playlist-repost' ? 'Reposted' : 'Posted' }} a playlist {{
+          formatFromNow(streamItem.created_at)
+        }}
+      </div>
 
+      <RichText v-if="streamItem?.caption" :content="streamItem.caption" class="text-sm line-clamp-1" />
+
+      <div class="flex items-start gap-3">
+        <div class="relative size-28 flex-shrink-0">
+          <img :src="replaceImageUrl(usePlaylistsStore().getCoverCache(props.playlist.id).value)"
+            :alt="props.playlist.title" class="size-28 rounded-sm object-cover" />
+        </div>
+
+        <div class="flex-1 min-w-0 flex flex-col gap-2 h-28 bg-cover bg-fixed rounded-sm bg-center px-4 pt-2">
+          <div class="flex min-w-0 items-start justify-between">
+            <div class="flex flex-col min-w-0 flex-1 gap-1">
+              <UTooltip :text="props.playlist.title">
+                <ULink :to="`/playlist/${props.playlist.id}`"
+                  class="truncate font-bold cursor-pointer max-w-full inline-block text-highlighted">
+                  {{ props.playlist.title }}
+                </ULink>
+              </UTooltip>
+              <UTooltip :text="props.playlist.user.username">
+                <ULink :to="`/user/${props.playlist.user.id}`"
+                  class="truncate text-sm text-muted cursor-pointer max-w-full inline-block">
+                  {{ props.playlist.user.username }}
+                </ULink>
+              </UTooltip>
+            </div>
+
+            <span class="text-sm">
+              {{ formatMillis(props.playlist.duration) }} <!-- TODO: Time display -->
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex max-w-xl items-center gap-3 ml-32">
+        <UButton :icon="user.isLikedPlaylist(props.playlist.id) ? 'i-mingcute-heart-fill' : 'i-mingcute-heart-line'"
+          :color="user.isLikedPlaylist(props.playlist.id) ? 'primary' : 'neutral'" variant="soft"
+          :label="props.playlist.likes_count ? props.playlist.likes_count.toString() : '0'"
+          @click="user.toggleLikePlaylist(props.playlist.id)" />
+        <UButton
+          :icon="user.isRepostedPlaylist(props.playlist.id) ? 'i-mingcute-share-3-fill' : 'i-mingcute-share-3-line'"
+          :color="user.isRepostedPlaylist(props.playlist.id) ? 'primary' : 'neutral'" variant="soft"
+          :label="props.playlist.reposts_count.toString()" @click="user.toggleRepostPlaylist(props.playlist.id)" />
+        <UButton icon="i-mingcute-share-2-line" color="neutral" variant="soft" @click=";/* TODO: Share Track */" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { formatMillis, replaceImageUrl } from "@/utils/utils"
+import { StreamItem, UserPlaylist } from "@/utils/types"
+import { useUserStore } from "@/systems/stores/user"
+import { formatFromNow } from "@/utils/utils"
+import { usePlaylistsStore } from "@/systems/stores/playlists"
+
+const props = defineProps<{
+  playlist: UserPlaylist
+  streamItem?: StreamItem
+}>()
 
+const user = useUserStore()
 </script>
 
 <style scoped>
-
+/* 限制链接点击区域只包含文字内容 */
+:deep(a) {
+  display: inline;
+  width: fit-content;
+  max-width: 100%;
+}
 </style>