feat(front): new layout details for track detail page

front/src/components/audio/track/Table.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { clone, uniqBy } from 'lodash-es'
 import { ref, computed } from 'vue'
 import { useStore } from '~/store'
+import { sortedUniq } from 'lodash-es'
 
 
 import axios from 'axios'
@@ -67,7 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
   filters: () => ({}),
   nextUrl: null,
 
-  paginateResults: true,
+  paginateResults: false,
   total: 0,
   page: 1,
   paginateBy: 25,
@@ -88,6 +89,8 @@ const allTracks = computed(() => {
     : tracks
 })
 
+const paginateResults = computed(() => props.paginateResults && allTracks.value.length < props.paginateBy)
+
 const { t } = useI18n()
 const store = useStore()
 
@@ -243,17 +246,13 @@ const updatePage = (page: number) => {
           :is-podcast="isPodcast"
         />
       </div>
-      <div
-        v-if="tracks && paginateResults"
-        class="ui center aligned basic segment desktop-and-up"
-      >
-        <pagination
-          :total="totalTracks"
-          :current="tracks !== undefined ? page : currentPage"
-          :paginate-by="paginateBy"
-          @update:current="updatePage"
-        />
-      </div>
+      <Pagination
+        v-if="paginateResults && totalTracks > paginateBy"
+        :paginate-by="paginateBy"
+        :total="totalTracks"
+        :current="tracks !== undefined ? page : currentPage"
+        @update:current="updatePage"
+      />
     </div>
 
     <div

front/src/components/library/TrackBase.vue

@@ -10,9 +10,12 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import ActorLink from '~/components/common/ActorLink.vue'
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import EmbedWizard from '~/components/audio/EmbedWizard.vue'
+import HumanDuration from '~/components/common/HumanDuration.vue'
+import TagsList from '~/components/tags/List.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Modal from '~/components/ui/Modal.vue'
@@ -75,6 +78,8 @@ const attributedToUrl = computed(() => router.resolve({
   }
 })?.href)
 
+const totalDuration = computed(() =>  track.value?.uploads[0]?.duration ?? 0)
+
 const { t } = useI18n()
 const labels = computed(() => ({
   title: t('components.library.TrackBase.title'),
@@ -160,27 +165,14 @@ watch(showDeleteModal, (newValue) => {
           </Button>
         </Layout>
         <div class="meta">
-          <template v-if="track.attributed_to">
-            <Link
-              :to="attributedToUrl"
-            >
-              <i class="bi bi-at" />
-              {{ track.attributed_to.full_username }}
-            </Link>
-            <i class="bi bi-dot" />
-          </template>
-
-          <time
-            :title="track.creation_date"
-            :datetime="track.creation_date"
-          >
-            {{ momentFormat(new Date(track.creation_date), 'LL') }}
-          </time>
-
-          <template v-if="track.album">
+            <span>{{ t('components.library.TrackBase.title') }}</span>
             <i class="bi bi-dot" />
             <span>{{ track.album.title }}</span>
-          </template>
+            <i v-if="totalDuration > 0" class="bi bi-dot" />
+            <human-duration
+              v-if="totalDuration > 0"
+              :duration="totalDuration"
+            />
         </div>
 
         <Layout flex>
@@ -293,6 +285,34 @@ watch(showDeleteModal, (newValue) => {
       </Layout>
     </Layout>
 
+    <hr>
+    <Layout flex>
+      <div>
+        <span v-if="track.attributed_to">
+          {{ t('components.library.TrackBase.subtitle.with-uploader') }}
+        </span>
+        <span v-else>
+          {{ t('components.library.TrackBase.subtitle.without-uploader') }}
+        </span>
+        <ActorLink
+          v-if="track.attributed_to"
+          :actor="track.attributed_to"
+          :avatar="false"
+        />
+
+        <time
+          :title="track.creation_date"
+          :datetime="track.creation_date"
+        >
+          {{ momentFormat(new Date(track.creation_date), 'LL') }}
+        </time>
+      </div>
+    </Layout>
+    <TagsList
+      v-if="track.tags && track.tags.length > 0"
+      :tags="track.tags"
+    />
+
     <Modal
       v-if="isEmbedable"
       v-model="showEmbedModal"
@@ -312,16 +332,6 @@ watch(showDeleteModal, (newValue) => {
         </Button>
       </template>
     </Modal>
-    <router-view
-      v-if="track"
-      :key="route.fullPath"
-      :track="track"
-      :object="track"
-      object-type="track"
-      @libraries-loaded="libraries = $event"
-    />
-    </template>
-
     <Modal
       v-model="showDeleteModal"
       :title="t('components.library.TrackBase.modal.delete.header')"
@@ -349,6 +359,16 @@ watch(showDeleteModal, (newValue) => {
         </Button>
       </template>
     </Modal>
+    <router-view
+      v-if="track"
+      :key="route.fullPath"
+      :track="track"
+      :object="track"
+      object-type="track"
+      @libraries-loaded="libraries = $event"
+    />
+  </template>
+
   </Layout>
 </template>
 

front/src/style/components/_track_table.scss

@@ -60,14 +60,13 @@
     vertical-align: middle;
   }
   .ui.artist-track.mini.image {
-    top: auto;
-    bottom: 0;
-    position: absolute;
-    margin: auto;
+    height: 40px;
+    margin-right: 8px;
+    margin-top: 4px;
   }
 
   .image.left.floated.column {
-    width: 51px;
+
   }
 }