i18n: update

feat: fix a bit virtual scroll but still stuttering

Author: hexadecimal233

README.md

@@ -87,4 +87,5 @@ Pull Requests: [Pull Requests](https://github.com/hexadecimal233/cloudie/pulls)
 - [ ] Make tags work
 - [ ] add share modal
 - [ ] add tooltips to icon-only buttons
+- [ ] watch immediate options
 -->

src/assets/i18n/en.json

@@ -78,6 +78,7 @@
       "removeSelected": "Remove Selected"
     },
     "downloads": {
+      "actions": "Actions",
       "deleteSelected": "Delete Selected",
       "allDownloads": "All Downloads",
       "downloading": "Downloading",
@@ -86,7 +87,7 @@
       "failed": "Failed",
       "paused": "Paused",
       "pending": "Pending",
-      "songInfo": "Song Info",
+      "track": "Track",
       "playlist": "Playlist",
       "addedTime": "Added Time",
       "origName": "Original Name",
@@ -99,7 +100,7 @@
       "search": "Search",
       "selected": "Selected: {count}",
       "searchResult": "1 item found | {count} items found",
-      "song": "Song",
+      "track": "Track",
       "genre": "Genre",
       "duration": "Duration",
       "downloadability": "Downloadability",
@@ -112,7 +113,12 @@
       "addToPlaylist": "Add To Playlist",
       "addToListening": "Add To Listening List",
       "deleteFromPlaylist": "Delete from Playlist",
-      "tags": "Tags"
+      "tags": "Tags",
+      "tracks": "{count} Tracks",
+      "listenAll": "Listen All",
+      "addAll": "Add All",
+      "listenSelected": "Listen Selected",
+      "openInNew": "Open in New Tab"
     },
     "library": {
       "playlist": "Playlist",
@@ -121,6 +127,8 @@
       "madeFor": "Made for {name}"
     },
     "common": {
+      "copy": "Copy",
+      "error": "Error",
       "loading": "Loading...",
       "noMore": "No More",
       "loadMore": "Load More",
@@ -130,6 +138,14 @@
       "play": "Play"
     },
     "toasts": {
+      "likeTrackErr": "Failed to like track",
+      "likePlaylistErr": "Failed to like playlist",
+      "likeSystemPlaylistErr": "Cannot like system playlist",
+      "followUserErr": "Failed to follow user",
+      "repostTrackErr": "Failed to repost track",
+      "repostPlaylistErr": "Failed to repost playlist",
+      "ffmpegNotInstalled": "FFmpeg not installed",
+      "ok": "OK",
       "playlistOpenFailed": "Failed to open playlist",
       "downloadFailed": "Download failed",
       "loginFailed": "Login failed",
@@ -158,6 +174,7 @@
     },
     "settings": {
       "config": {
+        "feedStyle": "Feed Style",
         "savePath": "Save Path",
         "parallelDownloads": "Parallel Downloads",
         "playlistSeparateDir": "Separate Playlist Download Folder",
@@ -203,7 +220,28 @@
     },
     "playlistSelectModal": {
       "all": "All",
-      "create": "Create"
+      "create": "Create",
+      "title": "Select Playlist"
+    },
+    "full": {
+      "playlist": {
+        "tracks": "{count} Tracks",
+        "duration": "Duration: {duration}"
+      },
+      "track": {
+        "reposted": "Reposted",
+        "posted": "Posted"
+      }
+    },
+    "comment": {
+      "placeholder": "Write a comment...",
+      "post": "Post Comment",
+      "sortBy": "Sort By:",
+      "sort": {
+        "newest": "Newest",
+        "oldest": "Oldest",
+        "trackTimestamp": "Track Timestamp"
+      }
     }
   }
 }

src/assets/i18n/zh-CN.json

@@ -45,6 +45,7 @@
       "onTrack": "在单曲"
     },
     "downloads": {
+      "actions": "操作",
       "deleteSelected": "删除选中",
       "allDownloads": "所有下载",
       "downloading": "下载中",
@@ -53,10 +54,11 @@
       "failed": "失败",
       "paused": "已暂停",
       "pending": "排队中",
-      "songInfo": "歌曲信息",
+      "track": "歌曲",
       "playlist": "歌单",
       "addedTime": "添加时间",
       "origFileName": "原文件名",
+      "origName": "原文件名",
       "status": "状态",
       "tag": "添加音频元数据"
     },
@@ -65,7 +67,7 @@
       "search": "搜索",
       "selected": "选中: {count}",
       "searchResult": "{count} 项结果",
-      "song": "歌曲",
+      "track": "歌曲",
       "genre": "流派",
       "duration": "时长",
       "downloadability": "可下载性",
@@ -78,9 +80,15 @@
       "addToListening": "添加到试听列表",
       "addToPlaylist": "添加到歌单",
       "deleteFromPlaylist": "从歌单中删除",
-      "tags": "标签"
+      "tags": "标签",
+      "tracks": "{count} 首歌曲",
+      "listenAll": "播放全部",
+      "addAll": "添加全部",
+      "listenSelected": "播放选中",
+      "openInNew": "在新标签页打开"
     },
     "player": {
+      "listening": "试听列表",
       "ordered-no-repeat": "有序播放 (不循环)",
       "ordered": "有序播放",
       "single-repeat": "单曲循环",
@@ -94,6 +102,14 @@
       "madeFor": "为 {name} 推荐"
     },
     "toasts": {
+      "likeTrackErr": "喜欢歌曲失败",
+      "likePlaylistErr": "喜欢歌单失败",
+      "likeSystemPlaylistErr": "不能喜欢系统歌单",
+      "followUserErr": "关注用户失败",
+      "repostTrackErr": "转发歌曲失败",
+      "repostPlaylistErr": "转发歌单失败",
+      "ffmpegNotInstalled": "未安装 FFmpeg",
+      "ok": "确定",
       "playlistOpenFailed": "打开歌单失败",
       "downloadFailed": "下载失败",
       "loginFailed": "登录失败",
@@ -121,6 +137,8 @@
       "noComments": "暂无评论"
     },
     "common": {
+      "copy": "复制",
+      "error": "错误",
       "loading": "加载中...",
       "noMore": "没有更多了",
       "loadMore": "加载更多",
@@ -131,6 +149,7 @@
     },
     "settings": {
       "config": {
+        "feedStyle": "信息流样式",
         "savePath": "保存路径",
         "parallelDownloads": "并行下载数量",
         "playlistSeparateDir": "将播单下载保存到单独目录",
@@ -143,7 +162,9 @@
         "oauthToken": "Soundcloud OAuth 令牌",
         "theme": "主题",
         "language": "语言",
-        "noHistory": "禁用播放历史记录"
+        "noHistory": "禁用播放历史记录",
+        "bgBlur": "背景模糊",
+        "bg": "背景"
       },
       "fileNamingTypes": {
         "title": "标题",
@@ -168,7 +189,33 @@
       },
       "etc": {
         "loginSoundcloud": "登录 Soundcloud",
-        "clearCache": "清除缓存"
+        "clearCache": "清除缓存",
+        "invalidSavePath": "无效的保存路径"
+      }
+    },
+    "playlistSelectModal": {
+      "all": "全部",
+      "create": "创建",
+      "title": "选择歌单"
+    },
+    "full": {
+      "playlist": {
+        "tracks": "{count} 首歌曲",
+        "duration": "时长: {duration}"
+      },
+      "track": {
+        "reposted": "已转发",
+        "posted": "已发布"
+      }
+    },
+    "comment": {
+      "placeholder": "写一条评论...",
+      "post": "发表评论",
+      "sortBy": "排序方式:",
+      "sort": {
+        "newest": "最新",
+        "oldest": "最旧",
+        "trackTimestamp": "歌曲时间戳"
       }
     },
     "search": {

src/components/TitleBar.vue

@@ -40,7 +40,7 @@ const easterStyle = computed(() => {
     easterClicks.value = 0
     return { animation: "none" }
   }
-  if (easterClicks.value  === 4) {
+  if (easterClicks.value === 4) {
     return { animation: "oldschool-blink 0.1s step-end infinite" }
   } else {
     return { animation: "none" }

src/components/VirtualList.vue

@@ -1,22 +1,21 @@
 <template>
-  <!-- FIXME: page changes doesnt active re-renderer -->
-    <div ref="parentRef" class="overflow-auto">
-      <span> {{`${totalSize} ${items.length} ${virtualRows.length}` }}</span>
-        <div ref="scrollContainer" :style="{ height: `${totalSize}px`, width: '100%', position: 'relative' }">
-            <div v-for="virtualRow in virtualRows" :key="virtualRow.index" class="absolute w-full top-0 left-0" :style="{
-                height: `${virtualRow.size}px`,
-                transform: `translateY(${virtualRow.start}px)`,
-            }">
-                <div :ref="measureElement" class="w-full h-full">
-                    <slot name="item" :item="items[virtualRow.index]" :index="virtualRow.index" />
-                </div>
-            </div>
+  <!-- FIXME: page changes doesnt active re-renderer and they are not unmounting-->
+  <div ref="parentRef" class="overflow-auto">
+    <div ref="scrollContainer" :style="{ height: `${totalSize}px`, width: '100%', position: 'relative' }">
+      <div 
+        class="absolute w-full top-0 left-0" :style="{
+          transform: `translateY(${virtualRows[0]?.start - rowVirtualizer.options.scrollMargin}px)`,
+        }">
+        <div v-for="virtualRow in virtualRows" :data-index="virtualRow.index" :key="virtualRow.index" :ref="estimateSize === defaultEstimateSize ? undefined : 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, VNodeRef } from "vue"
+import { ref, computed } from "vue"
 import { useVirtualizer } from "@tanstack/vue-virtual"
 
 const props = defineProps<{
@@ -26,13 +25,14 @@ const props = defineProps<{
 
 const parentRef = ref<HTMLElement | null>(null)
 const scrollContainer = ref<HTMLElement | null>(null)
+const defaultEstimateSize = (index: number) => 50
 
 const rowVirtualizer = useVirtualizer(
   computed(() => {
     return {
       count: props.items.length, // this should be reactive
       getScrollElement: () => parentRef.value,
-      estimateSize: props.estimateSize || (() => 50), // 提供默认值
+      estimateSize: props.estimateSize || defaultEstimateSize, // 提供默认值
       overscan: 5,
     }
   }),
@@ -41,14 +41,13 @@ 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
 }
 

src/components/full/FullPlaylist.vue

@@ -38,7 +38,9 @@
             </div>
 
             <span class="text-sm">
-              {{ formatMillis(props.playlist.duration) }} <!-- TODO: Time display -->
+              <p>{{ $t('cloudie.full.playlist.tracks', { count: props.playlist.track_count ?? 0 }) }}</p>
+              <p>{{ $t('cloudie.full.playlist.duration', { duration: formatMillis(props.playlist.duration ?? 0) }) }}</p>
+              <!-- TODO: Time display -->
             </span>
           </div>
         </div>

src/components/full/FullTrack.vue

@@ -7,8 +7,7 @@
         {{ streamItem.user.username }}
       </ULink>
       <i-mingcute-repeat-line v-if="streamItem.type === 'track-repost'" />
-      {{ streamItem.type === 'track-repost' ? 'Reposted' : 'Posted' }} a track {{ formatFromNow(streamItem.created_at)
-      }}
+      {{ streamItem.type === 'track-repost' ? $t('cloudie.full.track.reposted', { time: formatFromNow(streamItem.created_at) }) : $t('cloudie.full.track.posted', { time: formatFromNow(streamItem.created_at) }) }}
     </div>
 
     <RichText v-if="streamItem?.caption" :content="streamItem.caption" class="text-sm line-clamp-1" />

src/components/full/themes/TwitterFullPlaylist.vue

@@ -55,7 +55,8 @@
             </div>
             <!-- Added a bit of spacing here for the Twitter style -->
             <div class="mt-2 text-xs text-neutral-500">
-              <p>{{ $t('cloudie.full.playlist.tracks', props.playlist.track_count ?? 0) }}</p>
+              <p>{{ $t('cloudie.full.playlist.tracks', { count: props.playlist.track_count ?? 0 }) }}</p>
+              <p>{{ $t('cloudie.full.playlist.duration', { duration: formatMillis(props.playlist.duration ?? 0) }) }}</p>
             </div>
           </div>
         </div>

src/components/mini/MiniPlaylist.vue

@@ -1,27 +1,30 @@
 <template>
   <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-accented/50 transition-colors min-w-0 w-full h-18">
     <div class="flex items-center gap-3 flex-1 min-w-0">
-    <img :src="artworkUrl" :alt="props.playlist.title" class="size-14 rounded-sm object-cover flex-shrink-0" />
-    <div class="flex flex-col min-w-0 flex-1">
-      <UTooltip :text="props.playlist.title">
-        <ULink :to="`/user-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>
-      <p class="truncate text-sm text-muted">{{ (props.playlist.tracks || []).length }} {{ $t("cloudie.trackList.song")
-        }}</p>
-    </div>
+      <img :src="artworkUrl" :alt="props.playlist.title" class="size-14 rounded-sm object-cover flex-shrink-0" />
+      <div class="flex flex-col min-w-0 flex-1">
+        <UTooltip :text="props.playlist.title">
+          <ULink :to="`/user-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>
+        <p class="truncate text-sm text-muted"> {{ $t("cloudie.trackList.tracks", {
+          count: (props.playlist.tracks ||
+            []).length})}}</p>
+      </div>
     </div>
 
     <div class="flex items-center gap-2">
-      <UButton color="neutral" :icon="user.isLikedPlaylist(props.playlist.id) ? 'i-mingcute-heart-fill' : 'i-mingcute-heart-line'" variant="ghost" @click="user.toggleLikePlaylist(props.playlist.id)" />
+      <UButton color="neutral"
+        :icon="user.isLikedPlaylist(props.playlist.id) ? 'i-mingcute-heart-fill' : 'i-mingcute-heart-line'"
+        variant="ghost" @click="user.toggleLikePlaylist(props.playlist.id)" />
     </div>
   </div>
 </template>