feed implementations (#3069)

package.json

@@ -72,7 +72,7 @@
     "@devprotocol/clubs-core": "3.24.2-beta.1",
     "@devprotocol/clubs-plugin-akiba": "0.1.9-beta.4",
     "@devprotocol/clubs-plugin-awesome-onboarding": "0.5.1",
-    "@devprotocol/clubs-plugin-passports": "0.1.0-beta.58",
+    "@devprotocol/clubs-plugin-passports": "0.1.0",
     "@devprotocol/clubs-plugin-payments": "0.4.0-alpha.0",
     "@devprotocol/clubs-plugin-posts": "0.21.0-alpha.0",
     "@devprotocol/clubs-plugin-posts-voting": "0.8.8",

src/components/Feed/Feed.vue

@@ -3,55 +3,45 @@ import MediaCard from '@pages/passport/components/MediaCard.vue'
 import { MediaEmbed } from '@devprotocol/clubs-plugin-passports/vue'
 import type { PassportItemAssetType } from '@devprotocol/clubs-plugin-passports/types'
 import type { FeedType } from '@fixtures/api/feed'
+import { computed } from 'vue'
+import { itemToHash } from '@fixtures/router/passportItem'
 
 const props = defineProps<FeedType>()
 
-const SKIN: FeedType['tag'][] = ['css', 'stylesheet-link']
-const CLIP: FeedType['tag'][] = [
-  'image',
-  'image-link',
-  'image-playable',
-  'image-playable-link',
-]
-const BGM: FeedType['tag'][] = ['bgm', 'bgm-link']
-const VIDEO: FeedType['tag'][] = [
-  'video',
-  'video-link',
-  'short-video',
-  'short-video-link',
-]
+const assetLink = computed(
+  () =>
+    `/passport/${props.address}/${props.parentPassport.id}/${itemToHash(props.clipType, props.item.id)}`,
+)
 </script>
 
 <template>
-  <div
-    class="flex gap-3 p-2 rounded-xl"
-    :class="{
-      'bg-indigo-600':
-        !frameHexColor || frameHexColor === '' ? CLIP.includes(tag) : false,
-      'bg-fuchsia-500':
-        !frameHexColor || frameHexColor === '' ? SKIN.includes(tag) : false,
-      'bg-orange-500':
-        !frameHexColor || frameHexColor === '' ? BGM.includes(tag) : false,
-      'bg-yellow-500':
-        !frameHexColor || frameHexColor === '' ? VIDEO.includes(tag) : false,
-    }"
-    :style="{
-      backgroundColor: frameHexColor,
-    }"
-  >
-    <div class="flex flex-col flex-grow">
-      <div class="flex items-center gap-3">
+  <div class="grid gap-2 p-2 border-b boder-black/20">
+    <div class="flex flex-col gap-2">
+      <div class="grid grid-cols-[auto_1fr] items-center gap-3">
         <a :href="`/passport/${address}`">
           <img
             class="w-14 h-14 rounded-full object-cover aspect-square bg-lightgray bg-cover bg-center bg-no-repeat _p-avatar"
             :src="avatarSrc"
             alt="avatar"
           />
         </a>
-        <div class="flex flex-col flex-grow gap-0">
-          <div class="text-xs font-bold">
-            {{ name }}
-          </div>
+        <div
+          :class="{
+            'grid grid-flow-col items-center justify-start gap-1': true,
+            'grid-rows-2': tag !== 'ugc',
+          }"
+        >
+          <span class="grid grid-flow-col items-center justify-start gap-2">
+            <span class="text-xs font-bold truncate">
+              {{ name }}
+            </span>
+            <span class="text-xs" v-if="props.parentPassport.description"
+              >·</span
+            >
+            <span class="text-xs truncate">
+              {{ props.parentPassport.description?.replace(/\\n/g, ' ') }}
+            </span>
+          </span>
           <div
             v-if="tag !== 'ugc'"
             class="flex items-center gap-2 p-1 rounded-sm bg-white"
@@ -70,37 +60,45 @@ const VIDEO: FeedType['tag'][] = [
           </div>
         </div>
       </div>
+
       <div
         v-if="description"
-        class="h-16 w-full text-2xl font-bold text-ellipsis overflow-hidden line-clamp-2"
+        class="text-xl font-bold text-ellipsis overflow-hidden line-clamp-2"
       >
         {{ description }}
       </div>
+      <ul v-if="props.item.tags" class="flex flex-wrap gap-2">
+        <li v-for="tag in props.item.tags" class="text-violet-500 text-sm">
+          #{{ tag }}
+        </li>
+      </ul>
     </div>
-    <div class="flex items-end max-w-16 min-w-16">
-      <a :href="assetLink" target="_blank">
-        <video v-if="VIDEO.includes(tag)">
-          <source :src="assetSrc" type="video/mp4" />
-        </video>
-        <img v-else-if="CLIP.includes(tag)" :src="assetSrc" alt="clip" />
+
+    <a :href="assetLink" target="_blank">
+      <div
+        v-if="tag !== 'ugc'"
+        class="p-3"
+        :style="{
+          backgroundColor: frameHexColor,
+        }"
+      >
         <MediaCard
-          v-else-if="SKIN.includes(tag as PassportItemAssetType)"
-          class="w-full rounded"
-          style="aspect-ratio: 1 / 1"
+          class="w-full rounded aspect-square overflow-hidden"
           :src="assetSrc"
           :type="tag as PassportItemAssetType"
           :found="!!assetSrc"
         />
+      </div>
+      <div v-if="tag === 'ugc'" class="rounded-xl bg-violet-50 p-2">
         <MediaEmbed
-          v-else
-          class="w-full rounded"
-          style="aspect-ratio: 1 / 1"
+          class="w-full rounded-xl aspect-[3/2] mx-auto max-w-xs pointer-events-none"
           :found="!!assetSrc"
           :src="assetSrc"
           :type="tag"
+          :autoplay="false"
         />
-      </a>
-    </div>
+      </div>
+    </a>
   </div>
 </template>
 

src/components/Feed/FeedPageContent.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 console.log('Feed', props.feeds.at(-1))
 </script>
 <template>
-  <div class="flex flex-col px-2 h-full">
+  <div class="flex flex-col p-2 h-full rounded-xl md:border boder-black/20">
     <p class="text-base font-bold">Latest updates</p>
     <div class="flex flex-col gap-2 flex-grow pb-24 h-full">
       <Feed v-for="feed in feeds" :key="feed.id" v-bind="feed" />

src/components/Global/Footer.vue

@@ -5,7 +5,7 @@ import iconMe from '@assets/footer/icon-me.png'
 </script>
 <template>
   <div
-    class="md:fixed md:bottom-8 md:drop-shadow md:left-2/4 md:-translate-x-1/2 md:w-[calc(640px_*_0.7)] md:border md:rounded-3xl flex justify-between px-16 py-2 text-dp-blue-grey-200 border-t border-black border-opacity-10 bg-white z-[1]"
+    class="fixed bottom-0 w-full md:bottom-8 md:drop-shadow md:left-2/4 md:-translate-x-1/2 md:w-[calc(640px_*_0.7)] md:border md:rounded-3xl flex justify-between px-16 py-2 text-dp-blue-grey-200 border-t border-black border-opacity-10 bg-white z-[1]"
   >
     <!-- <a href="/" class="flex flex-col items-center gap-0">
       <img class="w-6" :src="iconHome.src" alt="HOME" />

src/components/Global/NavbarResponsive.vue

@@ -47,7 +47,7 @@ watch(open, () => {
         }}</span>
       </h1>
       <span
-        class="w-full flex items-center justify-end lg:hidden cursor-pointer"
+        class="w-full flex items-center justify-end md:hidden cursor-pointer"
       >
         <HomeLogo />
       </span>

src/fixtures/api/feed/index.ts

@@ -63,9 +63,11 @@ export type FeedType = {
   address: string
   badgeName: string
   description?: string
-  assetLink: string
   frameHexColor?: string
   tag: PassportItemAssetType | 'ugc'
+  item: Clip
+  clipType: ClipTypes
+  parentPassport: Skin
 }
 
 export const getAllProfiles = async (
@@ -155,6 +157,8 @@ export const getClubFromAssetPayload = async (
 
 export const getFeedAssetFromClip = async (
   clip: Clip,
+  skin: Skin,
+  type: ClipTypes,
   ownerDetails: FeedUserData,
   redis: ReturnType<typeof createClient>,
 ): Promise<FeedType | undefined> => {
@@ -218,8 +222,10 @@ export const getFeedAssetFromClip = async (
     address: ownerDetails.address,
     badgeName: clubName,
     description: clip.description || '',
-    assetLink: '', // TODO: replace this
     frameHexColor: clip.frameColorHex || '',
+    item: clip,
+    clipType: type,
+    parentPassport: skin,
   }
 }
 
@@ -243,12 +249,12 @@ export const getClipFromSkin = async (
   const spotlight = skin.spotlight || []
   const clipsFeedDataPromises = Promise.all(
     clips.map(async (clip) => {
-      return getFeedAssetFromClip(clip, ownerDetails, redis)
+      return getFeedAssetFromClip(clip, skin, 'clips', ownerDetails, redis)
     }),
   )
   const spotlightsFeedDataPromises = Promise.all(
     spotlight.map(async (clip) => {
-      return getFeedAssetFromClip(clip, ownerDetails, redis)
+      return getFeedAssetFromClip(clip, skin, 'spotlight', ownerDetails, redis)
     }),
   )
 

src/layouts/LandingWithFooter.astro

@@ -68,7 +68,6 @@ const twitterHandle = 'poweredbyClubs'
         'md:max-w-screen-sm': fullwidth === false,
       },
     ]}
-    style="height: 100dvh"
   >
     <slot name="before-header" />
     {

src/pages/passport/components/MediaCard.vue

@@ -48,7 +48,7 @@ onMounted(async () => {
         type === 'image-playable' ||
         type === 'image-playable-link')
     "
-    class="rounded-md w-full max-w-full"
+    class="rounded-md w-full max-w-full object-cover"
     :class="props.class"
   />
 

src/pages/passport/components/PassportAsset.svelte

@@ -203,7 +203,7 @@
           {#if props.item.tags}
             <ul class="flex flex-wrap gap-2 empty:hidden">
               {#each props.item.tags as tag}
-                <li class="text-blue-500 text-sm">#{tag}</li>
+                <li class="text-violet-500 text-sm">#{tag}</li>
               {/each}
             </ul>
           {/if}

yarn.lock

@@ -1473,9 +1473,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devprotocol/clubs-plugin-passports@npm:0.1.0-beta.58":
-  version: 0.1.0-beta.58
-  resolution: "@devprotocol/clubs-plugin-passports@npm:0.1.0-beta.58"
+"@devprotocol/clubs-plugin-passports@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@devprotocol/clubs-plugin-passports@npm:0.1.0"
   dependencies:
     "@devprotocol/dev-kit": "npm:8.7.0"
     "@devprotocol/util-ts": "npm:4.0.0"
@@ -1489,7 +1489,7 @@ __metadata:
     "@devprotocol/clubs-core": ^3.18.0
     "@devprotocol/clubs-plugin-payments": ^0.2.3 || ^0.3.0
     ethers: ^6.0.0
-  checksum: 10c0/50438629584256f52d0deb88987b643cfe04dab7b1654c3d4926397b6dbf48e383612f6e62c956964c4b4724e3abe197cf5400f6507c53737c6a0c579f8401e9
+  checksum: 10c0/84de947be56e5c9a401108e2eabcd6002b083317a2576760fd8f2d50a9b40683d757e1821d6d4d9559a09396b93bd57898fed1c4de836d3b44638402e9e32200
   languageName: node
   linkType: hard
 
@@ -11540,7 +11540,7 @@ __metadata:
     "@devprotocol/clubs-core": "npm:3.24.2-beta.1"
     "@devprotocol/clubs-plugin-akiba": "npm:0.1.9-beta.4"
     "@devprotocol/clubs-plugin-awesome-onboarding": "npm:0.5.1"
-    "@devprotocol/clubs-plugin-passports": "npm:0.1.0-beta.58"
+    "@devprotocol/clubs-plugin-passports": "npm:0.1.0"
     "@devprotocol/clubs-plugin-payments": "npm:0.4.0-alpha.0"
     "@devprotocol/clubs-plugin-posts": "npm:0.21.0-alpha.0"
     "@devprotocol/clubs-plugin-posts-voting": "npm:0.8.8"