Add "How this was made" disclosure and AI labels

src/renderer/components/WatchVideoDescription/WatchVideoDescription.css

@@ -51,3 +51,29 @@
 .license {
   margin-block: 1em;
 }
+
+.aiDisclosureSection {
+  margin-block-start: 1.5em;
+}
+
+.aiDisclosureTitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin-block-end: 12px;
+}
+
+.aiDisclosureHeader {
+  font-weight: 600;
+  font-size: 15px;
+  margin-block-end: 4px;
+}
+
+.aiDisclosureBody {
+  font-size: 15px;
+  line-height: 1.4;
+  opacity: 0.9;
+}
+
+.aiDisclosureItem + .aiDisclosureItem {
+  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,37 @@
       {{ $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="aiDisclosureSection"
+    >
+      <div class="aiDisclosureTitle">
+        {{ t('Video.How this was made') }}
+      </div>
+      <div
+        v-for="(item, index) in contentDisclosures"
+        :key="index"
+        class="aiDisclosureItem"
+      >
+        <div class="aiDisclosureHeader">
+          {{ getDisclosureHeader(item.label) }}
+        </div>
+        <div
+          v-if="item.description"
+          class="aiDisclosureBody"
+        >
+          {{ getDisclosureDescription(item.description) }}
+        </div>
+      </div>
+    </div>
     <bdi
       v-if="license && showFullDescription"
       class="license"
@@ -44,6 +68,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 +84,55 @@ const props = defineProps({
   license: {
     type: String,
     default: null,
+  },
+  contentDisclosures: {
+    type: Array,
+    default: null
   }
 })
 
+const { t } = useI18n()
+
+const HEADER_TRANSLATIONS = {
+  'Made with AI': () => t('Video.Made with AI'),
+  'Altered or synthetic content': () => t('Video.Altered or synthetic content'),
+  'Auto-dubbed': () => t('Video.Auto-dubbed'),
+  'Captured with a camera': () => t('Video.Captured with a camera'),
+}
+
+const DESCRIPTION_TRANSLATIONS = {
+  'Sounds or visuals were altered or significantly edited.': () => t('Video["Sounds or visuals were altered or significantly edited."]'),
+  'Sounds or visuals were altered or fully generated.': () => t('Video["Sounds or visuals were altered or fully generated."]'),
+  'Sounds or visuals were significantly edited or digitally generated.': () => t('Video["Sounds or visuals were significantly edited or digitally generated."]'),
+  'Sounds or visuals were altered or digitally generated.': () => t('Video["Sounds or visuals were altered or digitally generated."]'),
+  'Audio tracks for some languages were automatically generated.': () => t('Video["Audio tracks for some languages were automatically generated."]'),
+  'The creator used a camera or other recording device to capture this video without altering the sounds or visuals.': () => t('Video["The creator used a camera or other recording device to capture this video without altering the sounds or visuals."]'),
+}
+
+/**
+ * @param {string} label
+ * @returns {string}
+ */
+function getDisclosureHeader(label) {
+  return HEADER_TRANSLATIONS[label]?.() ?? label
+}
+
+/**
+ * @param {string} description
+ * @returns {string}
+ */
+function getDisclosureDescription(description) {
+  if (!description) {
+    return ''
+  }
+  const normalized = description.endsWith('.') ? description : `${description}.`
+  return DESCRIPTION_TRANSLATIONS[description]?.() ??
+    DESCRIPTION_TRANSLATIONS[normalized]?.() ??
+    description
+}
+
+const showHowThisWasMade = computed(() => (props.contentDisclosures?.length ?? 0) > 0)
+
 const emit = defineEmits(['timestamp-event'])
 
 let shownDescription = ''
@@ -139,6 +210,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,10 @@ const USING_ELECTRON = process.env.IS_ELECTRON
 
 const { locale, t } = useI18n()
 
+const showAiBadge = computed(() =>
+  props.contentDisclosures?.some(item => /\b(ai|artificial intelligence|altered|synthetic)\b/i.test(item.label)) || false
+)
+
 /** @type {import('vue').ComputedRef<boolean>} */
 const hideSharingActions = computed(() => store.getters.getHideSharingActions)
 

src/renderer/helpers/api/local.js

@@ -702,7 +702,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') {
@@ -767,9 +767,36 @@ 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 }[] | 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 items = structuredDescPanel.content.items
+        .filterType(YTNodes.HowThisWasMadeSectionView)
+        .map(item => ({
+          label: item.body_header?.text ?? '',
+          description: item.body_text?.text?.replace(/\s*Learn more\.?$/i, '').trim() ?? '',
+        }))
+
+      return items.length > 0 ? items : null
+    }
+  }
+
+  return null
+}
+
 /**
  * @type {object}
  */

src/renderer/views/Watch/Watch.js

@@ -173,6 +173,7 @@ export default defineComponent({
       /** @type {string[]|null} */
       customErrorIcon: null,
       videoGenreIsMusic: false,
+      contentDisclosures: null,
       /** @type {Date|null} */
       streamingDataExpiryDate: null,
       currentPlaybackRate: null,
@@ -400,6 +401,7 @@ export default defineComponent({
       this.videoDescription = ''
       this.videoDescriptionHtml = ''
       this.license = ''
+      this.contentDisclosures = null
       this.videoViewCount = 0
       this.videoLikeCount = 0
       this.videoDislikeCount = 0
@@ -502,7 +504,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
@@ -1030,6 +1033,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

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

static/locales/en-US.yaml

@@ -894,6 +894,19 @@ 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
+  Made with AI: Made with AI
+  Altered or synthetic content: Altered or synthetic content
+  Auto-dubbed: Auto-dubbed
+  Captured with a camera: Captured with a camera
+  'Sounds or visuals were altered or significantly edited.': Sounds or visuals were altered or significantly edited.
+  'Sounds or visuals were altered or fully generated.': Sounds or visuals were altered or fully generated.
+  'Sounds or visuals were significantly edited or digitally generated.': Sounds or visuals were significantly edited or digitally generated.
+  'Sounds or visuals were altered or digitally generated.': Sounds or visuals were altered or digitally generated.
+  'Audio tracks for some languages were automatically generated.': Audio tracks for some languages were automatically generated.
+  'The creator used a camera or other recording device to capture this video without altering the sounds or visuals.': The creator used a camera or other recording device to capture this video without altering the sounds or visuals.
   Station: Station
   Live: Live
   Live Now: Live Now