Add "How this was made" disclosure and AI labels

src/renderer/components/WatchVideoDescription/WatchVideoDescription.css

@@ -51,3 +51,34 @@
 .license {
   margin-block: 1em;
 }
+
+.contentDisclosureSection {
+  margin-block-start: 1.5em;
+}
+
+.contentDisclosureTitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin-block-end: 12px;
+}
+
+.contentDisclosureHeader {
+  font-weight: 600;
+  font-size: 15px;
+  margin-block-end: 4px;
+}
+
+.contentDisclosureBody,
+.contentDisclosureAttribution {
+  font-size: 15px;
+  line-height: 1.4;
+  opacity: 0.9;
+}
+
+.contentDisclosureAttribution {
+  margin-block-start: 6px;
+}
+
+.contentDisclosureItem + .contentDisclosureItem {
+  margin-block-start: 12px;
+}

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -1,6 +1,6 @@
 <template>
   <FtCard
-    v-if="shownDescription.length > 0"
+    v-if="shownDescription.length > 0 || showHowThisWasMade"
     :class="{ videoDescription: true, short: !showFullDescription }"
   >
     <span
@@ -14,13 +14,43 @@
       {{ $t("Description.Expand Description") }}
     </span>
     <FtTimestampCatcher
+      v-if="shownDescription.length > 0"
       ref="descriptionContainer"
       class="description"
       :input-html="processedShownDescription"
       :link-tab-index="linkTabIndex"
       @timestamp-event="onTimestamp"
       @click="expandDescriptionWithClick"
     />
+    <div
+      v-if="showHowThisWasMade && showFullDescription"
+      class="contentDisclosureSection"
+    >
+      <div class="contentDisclosureTitle">
+        {{ t('Video.How this was made') }}
+      </div>
+      <div
+        v-for="(item, index) in contentDisclosures"
+        :key="index"
+        class="contentDisclosureItem"
+      >
+        <div class="contentDisclosureHeader">
+          {{ item.label }}
+        </div>
+        <div
+          v-if="item.description"
+          class="contentDisclosureBody"
+        >
+          {{ item.description }}
+        </div>
+        <div
+          v-if="item.attribution"
+          class="contentDisclosureAttribution"
+        >
+          {{ item.attribution }}
+        </div>
+      </div>
+    </div>
     <bdi
       v-if="license && showFullDescription"
       class="license"
@@ -44,6 +74,7 @@
 import autolinker from 'autolinker'
 
 import { onMounted, ref, computed, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../FtTimestampCatcher.vue'
 
@@ -59,9 +90,17 @@ const props = defineProps({
   license: {
     type: String,
     default: null,
+  },
+  contentDisclosures: {
+    type: Array,
+    default: null
   }
 })
 
+const { t } = useI18n()
+
+const showHowThisWasMade = computed(() => (props.contentDisclosures?.length ?? 0) > 0)
+
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
@@ -139,6 +178,13 @@ function isShortDescription() {
 }
 
 onMounted(() => {
+  // There is no description, so do not show the controls
+  if (shownDescription.length === 0) {
+    showFullDescription.value = true
+    showControls.value = false
+    return
+  }
+
   // To verify whether or not the description is too short for displaying
   // description controls, we need to check the description's dimensions.
   // The only way to make this work is to check on mount.

src/renderer/components/WatchVideoInfo/WatchVideoInfo.css

@@ -22,10 +22,20 @@
   gap: 10px;
 }
 
-.unlistedBadge {
+.videoBadges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-block-start: 4px;
+}
+
+.unlistedBadge,
+.aiBadge {
   background-color: var(--secondary-card-bg-color);
   border-radius: 5px;
-  display: inline;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding-inline: 5px;
   padding-block: 2px;
   white-space: nowrap;

src/renderer/components/WatchVideoInfo/WatchVideoInfo.vue

@@ -8,10 +8,24 @@
         {{ title }}
       </h1>
       <div
-        v-if="isUnlisted"
-        class="unlistedBadge"
+        v-if="isUnlisted || showAiBadge"
+        class="videoBadges"
       >
-        {{ t('Video.Unlisted') }}
+        <div
+          v-if="isUnlisted"
+          class="unlistedBadge"
+        >
+          {{ t('Video.Unlisted') }}
+        </div>
+        <div
+          v-if="showAiBadge"
+          class="aiBadge"
+          :title="t('Video.AI: Content was made with AI')"
+          :aria-label="t('Video.AI: Content was made with AI')"
+        >
+          <FontAwesomeIcon :icon="['fas', 'circle-info']" />
+          <span>{{ t('Video.AI') }}</span>
+        </div>
       </div>
     </div>
     <div class="videoMetrics">
@@ -231,6 +245,10 @@ const props = defineProps({
     type: Boolean,
     required: false
   },
+  contentDisclosures: {
+    type: Array,
+    default: null
+  },
   canSaveWatchedProgress: {
     type: Boolean,
     required: true
@@ -247,6 +265,12 @@ const USING_ELECTRON = process.env.IS_ELECTRON
 
 const { locale, t } = useI18n()
 
+const showAiBadge = computed(() => {
+  const LABEL_REGEX = /\b(ai|artificial intelligence|altered|synthetic)\b/i
+
+  return props.contentDisclosures?.some(item => LABEL_REGEX.test(item.label)) || false
+})
+
 /** @type {import('vue').ComputedRef<boolean>} */
 const hideSharingActions = computed(() => store.getters.getHideSharingActions)
 

src/renderer/helpers/api/local.js

@@ -704,7 +704,7 @@ export async function getLocalVideoInfo(id) {
 
   if ((info.playability_status.status === 'UNPLAYABLE' && (!hasTrailer || trailerIsAgeRestricted)) ||
     info.playability_status.status === 'LOGIN_REQUIRED') {
-    return { info, poToken: undefined, clientInfo }
+    return { info, poToken: undefined, clientInfo, contentDisclosures: extractLocalContentDisclosures(info) }
   }
 
   if (hasTrailer && info.playability_status.status !== 'OK') {
@@ -769,9 +769,39 @@ export async function getLocalVideoInfo(id) {
     poToken: contentPoToken,
     clientInfo,
     adEndTimeUnixMs,
+    contentDisclosures: extractLocalContentDisclosures(info),
   }
 }
 
+/**
+ * Extracts content disclosures ('How this was made') from YouTube VideoInfo response
+ * @param {import('youtubei.js').YT.VideoInfo} info
+ * @returns {{ label: string, description: string, attribution: string }[] | null}
+ */
+export function extractLocalContentDisclosures(info) {
+  if (info?.page?.[1]?.engagement_panels) {
+    const structuredDescPanel = info.page[1].engagement_panels.find(
+      panel => panel.target_id === 'engagement-panel-structured-description'
+    )
+
+    if (structuredDescPanel?.content?.is(YTNodes.StructuredDescriptionContent)) {
+      const LEARN_MORE_REGEX = /\s*Learn more\.?$/i
+
+      const items = structuredDescPanel.content.items
+        .filterType(YTNodes.HowThisWasMadeSectionView)
+        .map(item => ({
+          label: item.body_header?.text ?? '',
+          description: item.body_text?.text?.replace(LEARN_MORE_REGEX, '').trim() ?? '',
+          attribution: item.attribution_text?.text ?? '',
+        }))
+
+      return items.length > 0 ? items : null
+    }
+  }
+
+  return null
+}
+
 /**
  * @type {object}
  */

src/renderer/views/Watch/Watch.js

@@ -174,6 +174,7 @@ export default defineComponent({
       /** @type {string[]|null} */
       customErrorIcon: null,
       videoGenreIsMusic: false,
+      contentDisclosures: null,
       /** @type {Date|null} */
       streamingDataExpiryDate: null,
       currentPlaybackRate: null,
@@ -401,6 +402,7 @@ export default defineComponent({
       this.videoDescription = ''
       this.videoDescriptionHtml = ''
       this.license = ''
+      this.contentDisclosures = null
       this.videoViewCount = 0
       this.videoLikeCount = 0
       this.videoDislikeCount = 0
@@ -503,7 +505,8 @@ export default defineComponent({
 
       try {
         const videoInfo = await getLocalVideoInfo(this.videoId)
-        const { info: result, poToken, clientInfo, adEndTimeUnixMs } = videoInfo
+        const { info: result, poToken, clientInfo, adEndTimeUnixMs, contentDisclosures } = videoInfo
+        this.contentDisclosures = contentDisclosures || null
 
         const playabilityStatus = result.playability_status
         this.playabilityStatus = playabilityStatus.status
@@ -1033,6 +1036,7 @@ export default defineComponent({
           this.isFamilyFriendly = result.isFamilyFriendly
           this.isPostLiveDvr = !!result.isPostLiveDvr
           this.isUnlisted = !result.isListed
+          this.contentDisclosures = null
 
           this.captions = sortCaptions(result.captions.map(caption => {
             return {

src/renderer/views/Watch/Watch.vue

@@ -152,6 +152,7 @@
         :video-thumbnail="thumbnail"
         :in-user-playlist="!!selectedUserPlaylist"
         :is-unlisted="isUnlisted"
+        :content-disclosures="contentDisclosures"
         :can-save-watched-progress="canSaveWatchProgress"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
@@ -173,6 +174,7 @@
         :description="videoDescription"
         :description-html="videoDescriptionHtml"
         :license="license"
+        :content-disclosures="contentDisclosures"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
         @timestamp-event="changeTimestamp"

static/locales/en-US.yaml

@@ -902,6 +902,9 @@ Video:
   Premieres: Premieres
   Upcoming: Upcoming
   Unlisted: Unlisted
+  AI: AI
+  'AI: Content was made with AI': 'AI: Content was made with AI'
+  How this was made: How this was made
   Station: Station
   Premiere: Premiere
   Live: Live