feat: display embedded media player (#2417)

components/status/StatusBody.vue

@@ -17,7 +17,7 @@ const emojisObject = useEmojisFallback(() => status.emojis)
 const vnode = $computed(() => {
   if (!status.content)
     return null
-  const vnode = contentToVNode(status.content, {
+  return contentToVNode(status.content, {
     emojis: emojisObject.value,
     mentions: 'mentions' in status ? status.mentions : undefined,
     markdown: true,
@@ -25,7 +25,6 @@ const vnode = $computed(() => {
     status: 'id' in status ? status : undefined,
     inReplyToStatus: newer,
   })
-  return vnode
 })
 </script>
 

components/status/StatusContent.vue

@@ -26,9 +26,11 @@ const hasSpoilerOrSensitiveMedia = $computed(() => spoilerTextPresent || (status
 const isSensitiveNonSpoiler = computed(() => status.sensitive && !status.spoilerText && !!status.mediaAttachments.length)
 const hideAllMedia = computed(
   () => {
-    return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && !!status.mediaAttachments.length) : false
+    return currentUser.value ? (getHideMediaByDefault(currentUser.value.account) && (!!status.mediaAttachments.length || !!status.card?.html)) : false
   },
 )
+const embeddedMediaPreference = $(usePreferences('experimentalEmbeddedMedia'))
+const allowEmbeddedMedia = $computed(() => status.card?.html && embeddedMediaPreference)
 </script>
 
 <template>
@@ -56,10 +58,11 @@ const hideAllMedia = computed(
         :is-preview="isPreview"
       />
       <StatusPreviewCard
-        v-if="status.card"
+        v-if="status.card && !allowEmbeddedMedia"
         :card="status.card"
         :small-picture-only="status.mediaAttachments?.length > 0"
       />
+      <StatusEmbeddedMedia v-if="allowEmbeddedMedia" :status="status" />
       <StatusCard
         v-if="status.reblog"
         :status="status.reblog" border="~ rounded"

components/status/StatusEmbeddedMedia.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { status } = defineProps<{
+  status: mastodon.v1.Status
+}>()
+
+const vnode = $computed(() => {
+  if (!status.card?.html)
+    return null
+  const node = sanitizeEmbeddedIframe(status.card?.html)?.children[0]
+  return node ? nodeToVNode(node) : null
+})
+const overlayToggle = ref(true)
+const card = ref(status.card)
+</script>
+
+<template>
+  <div v-if="card">
+    <div
+      v-if="overlayToggle"
+      h-80
+      cursor-pointer
+      relative
+    >
+      <div
+        p-3
+        absolute
+        w-full
+        h-full
+        z-100
+        rounded-lg
+        style="background: linear-gradient(black, rgba(0,0,0,0.5), transparent, transparent, rgba(0,0,0,0.20))"
+      >
+        <NuxtLink flex flex-col gap-1 hover:underline text-xs text-light font-light target="_blank" :href="card?.url">
+          <div flex gap-0.5>
+            <p flex-row line-clamp-1>
+              {{ card?.providerName }}<span v-if="card?.authorName"> • {{ card?.authorName }}</span>
+            </p>
+            <span
+              flex-row
+              w-4 h-4
+              pointer-events-none
+              i-ri:arrow-right-up-line
+            />
+          </div>
+          <p font-bold line-clamp-1 text-size-base>
+            {{ card?.title }}
+          </p>
+          <p line-clamp-1>
+            {{ $t('status.embedded_warning') }}
+          </p>
+        </NuxtLink>
+        <div
+          flex
+          h-50
+          mt-1
+          justify-center
+          flex-items-center
+        >
+          <button
+            absolute
+            bg-primary
+            opacity-85
+            rounded-full
+            hover:bg-primary-active
+            hover:opacity-95
+            transition-all
+            box-shadow-outline
+            @click.stop.prevent="() => overlayToggle = !overlayToggle"
+          >
+            <span
+              text-light
+              flex flex-col
+              gap-3
+              w-27 h-27
+              pointer-events-none
+              i-ri:play-circle-line
+            />
+          </button>
+        </div>
+      </div>
+      <CommonBlurhash
+        v-if="card?.image"
+        :blurhash="card.blurhash"
+        :src="card.image"
+        w-full
+        h-full
+        object-cover
+        rounded-lg
+      />
+    </div>
+    <div v-else>
+      <!-- this inserts the iframe -->
+      <component :is="vnode" v-if="vnode" rounded-lg h-80 />
+    </div>
+  </div>
+</template>
+
+<style>
+iframe {
+    width: 100%;
+    height: 100%;
+}
+</style>