From 08fae09a6d6ca62dc7f55265fa70a0777b017297 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 23 Feb 2025 01:28:24 +0100
Subject: [PATCH] feat(style): person icon as fallback for artists and
 channels. fix channel detail layout.

---
 front/src/components/artist/Card.vue       |  36 ++----
 front/src/components/audio/ChannelCard.vue |  15 +--
 front/src/views/channels/DetailBase.vue    | 127 ++++++++-------------
 3 files changed, 68 insertions(+), 110 deletions(-)

diff --git a/front/src/components/artist/Card.vue b/front/src/components/artist/Card.vue
index 0aafa6943..adeeef0c8 100644
--- a/front/src/components/artist/Card.vue
+++ b/front/src/components/artist/Card.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { type operations } from '~/generated/types.ts'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
 import Card from '~/components/ui/Card.vue'
@@ -21,29 +22,6 @@ const props = defineProps<Props>()
 
 const { artist } = props
 
-const cover = computed(() => {
-  const artistCover = artist.cover ?? undefined
-
-  const albumCover = albums.value?.find(
-    (album: Album) => album.cover?.urls
-  )?.cover
-
-  const trackCover = tracks.value?.find(
-    (track: Track) => track.cover?.urls
-  )?.cover
-
-  const fallback: Cover = {
-    uuid: '',
-    urls: {
-      original: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
-      medium_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`,
-      large_square_crop: `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
-    }
-  }
-
-  return artistCover || albumCover || trackCover || fallback
-})
-
 </script>
 
 <template>
@@ -53,6 +31,7 @@ const cover = computed(() => {
     :tags="artist.tags"
     :to="{name: 'library.artists.detail', params: {id: artist.id}}"
     small
+    style="align-self: flex-start;"
   >
     <template #topright>
       <PlayButton
@@ -64,10 +43,16 @@ const cover = computed(() => {
 
     <template #image>
       <img
-        v-lazy="cover.urls.medium_square_crop"
+        v-if="artist.cover"
+        v-lazy="artist.cover.urls.medium_square_crop"
         :alt="artist.name"
         class="channel-image"
-      >
+      />
+      <i
+        v-else
+        class="bi bi-person-circle"
+        style="font-size: 167px; margin: 16px;"
+      />
     </template>
 
     <template #footer>
@@ -85,6 +70,7 @@ const cover = computed(() => {
         discrete
       />
     </template>
+
   </Card>
 </template>
 
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 1ce87503a..19ac52b5d 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -55,7 +55,6 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
     <template #topright>
       <PlayButton
         icon-only
-        :is-playable="object.artist?.is_playable"
         :artist="object.artist"
       />
     </template>
@@ -66,11 +65,16 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
         v-lazy="imageUrl"
         :alt="object.artist?.name"
         class="channel-image"
-      >
+      />
+      <i
+        v-else
+        class="bi bi-person-circle"
+        style="font-size: 167px; margin: 16px;"
+      />
     </template>
 
     <template #default>
-      <Spacer :size="8" />
+      <Spacer :size="8"/>
     </template>
 
     <template #footer>
@@ -89,10 +93,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
       <span v-else>
         {{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
       </span>
-      <Spacer
-        h
-        grow
-      />
+      <Spacer h grow />
       <PlayButton
         :dropdown-only="true"
         :is-playable="true"
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index a59464f4b..e44d112ad 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -150,10 +150,8 @@ const updateSubscriptionCount = (delta: number) => {
 </script>
 
 <template>
-  <Layout
+  <Layout stack main
     v-title="labels.title"
-    stack
-    main
   >
     <Loader v-if="isLoading" />
     <template v-if="object && !isLoading">
@@ -166,32 +164,18 @@ const updateSubscriptionCount = (delta: number) => {
             alt=""
             class="huge channel-image"
             :src="store.getters['instance/absoluteUrl'](object.artist.cover.urls.large_square_crop)"
-          >
+          />
           <i
             v-else
-            class="huge circular inverted bi bi-person-circle-fill violet"
+            class="bi bi-person-circle"
+            style="font-size: 300px; margin-top: -32px;"
           />
-          <Layout
-            stack
-            no-gap
-            style="flex: 1;"
-          >
-            <h1>
-              <div
-                :title="object.artist?.name"
-              >
-                {{ object.artist?.name }}
-              </div>
+          <Layout stack style="flex: 1; gap: 16px;">
+            <h1 style="margin-top: 64px; margin-bottom: 8px;">
+              {{ object.artist?.name }}
             </h1>
-            <Layout
-              stack
-              class="meta"
-              style="gap: 0;"
-            >
-              <Layout
-                flex
-                no-gap
-              >
+            <Layout stack class="meta" style="gap: 8px;">
+              <Layout flex noGap>
                 <template v-if="totalTracks > 0">
                   <span
                     v-if="object.artist?.content_category === 'podcast'"
@@ -219,41 +203,35 @@ const updateSubscriptionCount = (delta: number) => {
                   />
                 </div>
               </Layout>
-              <Layout
-                flex
-                no-gap
-              >
-                <span
-                  v-if="object.artist?.content_category === 'podcast'"
-                >
-                  {{ t('views.channels.DetailBase.header.podcastChannel') }}
-                </span>
-                <span
-                  v-if="!object.actor"
-                >
-                  <i class="bi bi-dot" />
-                  <a
-                    :href="object.url || object.rss_url"
-                    rel="noopener noreferrer"
-                    target="_blank"
+              <Layout flex noGap>
+                <template v-if="object.artist?.content_category === 'podcast'">
+                  <span>
+                    {{ t('views.channels.DetailBase.header.podcastChannel') }}
+                  </span>
+                  <span
+                    v-if="!object.actor"
                   >
-                    <i class="bi bi-box-arrow-up-right" />
-                    {{ t('views.channels.DetailBase.link.mirrored', {domain: externalDomain}) }}
-                  </a>
-                </span>
-                <span
-                  v-else
-                >
-                  {{ t('views.channels.DetailBase.header.artistChannel') }}
-                </span>
+                    <i class="bi bi-dot" />
+                    <a
+                      :href="object.url || object.rss_url"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      <i class="bi bi-box-arrow-up-right" />
+                      {{ t('views.channels.DetailBase.link.mirrored', {domain: externalDomain}) }}
+                    </a>
+                  </span>
+                </template>
+                <template v-else>
+                  <span>
+                    {{ t('views.channels.DetailBase.header.artistChannel') }}
+                  </span>
+                </template>
                 <span v-if="object.actor">
                   <i class="bi bi-dot" />
                   {{ t('views.library.LibraryBase.link.owner') }}
                 </span>
-                <Spacer
-                  h
-                  :size="4"
-                />
+                <Spacer h :size="4" />
                 <ActorLink
                   v-if="object.actor"
                   discrete
@@ -263,16 +241,13 @@ const updateSubscriptionCount = (delta: number) => {
                 />
               </Layout>
             </Layout>
-            <rendered-description
-              :content="object.artist?.description"
-              :update-url="`channels/${object.uuid}/`"
-              :can-update="false"
-              @updated="object = $event"
-            />
-            <Layout
-              flex
-              class="header-buttons"
-            >
+              <rendered-description
+                :content="object.artist?.description"
+                :update-url="`channels/${object.uuid}/`"
+                :can-update="false"
+                @updated="object = $event"
+              />
+            <Layout flex class="header-buttons">
               <Link
                 v-if="isOwner"
                 solid
@@ -320,8 +295,8 @@ const updateSubscriptionCount = (delta: number) => {
                   <hr>
                   <PopoverItem
                     v-for="obj in getReportableObjects({account: object.attributed_to, channel: object})"
-                    :key="obj.target.type + obj.target.id"
                     icon="bi-share"
+                    :key="obj.target.type + obj.target.id"
                     @click.stop.prevent="report(obj)"
                   >
                     {{ obj.label }}
@@ -342,8 +317,7 @@ const updateSubscriptionCount = (delta: number) => {
                       :is-loading="isLoading"
                       icon="bi-trash"
                       @confirm="remove()"
-                    >
-                      {{ t('views.channels.DetailBase.button.confirm') }}
+                    > {{ t('views.channels.DetailBase.button.confirm') }}
                       <template #modal-content>
                         {{ t('views.channels.DetailBase.modal.delete.content.warning') }}
                       </template>
@@ -365,10 +339,7 @@ const updateSubscriptionCount = (delta: number) => {
                   </template>
                 </template>
               </Popover>
-              <Spacer
-                h
-                grow
-              />
+              <Spacer h grow />
               <subscribe-button
                 :channel="object"
                 @subscribed="updateSubscriptionCount(1)"
@@ -376,9 +347,9 @@ const updateSubscriptionCount = (delta: number) => {
               />
 
               <Modal
+                :title="t('views.channels.DetailBase.modal.embed.header')"
                 v-if="totalTracks > 0"
                 v-model="showEmbedModal"
-                :title="t('views.channels.DetailBase.modal.embed.header')"
                 :cancel="t('views.channels.DetailBase.button.cancel')"
               >
                 <div class="scrolling content">
@@ -396,11 +367,11 @@ const updateSubscriptionCount = (delta: number) => {
                 </template>
               </Modal>
               <Modal
-                v-if="isOwner"
-                v-model="showEditModal"
                 :title="t(`views.channels.DetailBase.header.${
                   object.artist?.content_category === 'podcast' ? 'podcastChannel' : 'artistChannel'
                 }`)"
+                v-if="isOwner"
+                v-model="showEditModal"
               >
                 <div class="scrolling content">
                   <channel-form
@@ -416,7 +387,7 @@ const updateSubscriptionCount = (delta: number) => {
                   <Button
                     primary
                     autofocus
-                    :is-loading="edit.loading"
+                    :isLoading="edit.loading"
                     :disabled="!edit.submittable"
                     @click.stop="editForm?.submit"
                   >
@@ -430,8 +401,8 @@ const updateSubscriptionCount = (delta: number) => {
                 @click.stop.prevent="showSubscribeModal = true"
               />
               <Modal
-                v-model:show="showSubscribeModal"
                 :title="t('views.channels.DetailBase.modal.subscribe.header')"
+                v-model:show="showSubscribeModal"
                 class="tiny"
                 :cancel="t('views.channels.DetailBase.button.cancel')"
               >
@@ -482,7 +453,7 @@ const updateSubscriptionCount = (delta: number) => {
           v-if="object.artist?.tags && object.artist?.tags.length > 0"
           :tags="object.artist.tags"
           :limit="5"
-          show-more="true"
+          showMore="true"
         />
         <Tabs>
           <Tab