Add Creative Commons License to Description of Videos (#6614)

* feat: add creative commons license to description

* fix: change the cc license position to video description

* fix: add license only for the full description

Author: SudharakaP

src/renderer/components/WatchVideoDescription/WatchVideoDescription.css

@@ -43,3 +43,7 @@
   max-block-size: 4lh;
   overflow: hidden;
 }
+
+.license {
+  margin-block: 1em;
+}

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -22,6 +22,12 @@
       @timestamp-event="onTimestamp"
       @click.native="expandDescriptionWithClick"
     />
+    <span
+      v-if="license && showFullDescription"
+      class="license"
+    >
+      {{ license }}
+    </span>
     <span
       v-if="showControls && showFullDescription"
       class="descriptionStatus"
@@ -51,6 +57,10 @@ const props = defineProps({
   descriptionHtml: {
     type: String,
     default: ''
+  },
+  license: {
+    type: String,
+    default: null,
   }
 })
 

src/renderer/views/Watch/Watch.js

@@ -413,6 +413,7 @@ export default defineComponent({
         // extract localised title first and fall back to the not localised one
         this.videoTitle = result.primary_info?.title.text ?? result.basic_info.title
         this.videoViewCount = result.basic_info.view_count ?? (result.primary_info.view_count ? extractNumberFromString(result.primary_info.view_count.text) : null)
+        this.license = result.secondary_info.metadata.rows.find(element => element.title.text === 'License')?.contents[0].text
 
         this.channelId = result.basic_info.channel_id ?? result.secondary_info.owner?.author.id
         this.channelName = result.basic_info.author ?? result.secondary_info.owner?.author.name

src/renderer/views/Watch/Watch.vue

@@ -168,6 +168,7 @@
         v-if="!isLoading && !hideVideoDescription"
         :description="videoDescription"
         :description-html="videoDescriptionHtml"
+        :license="license"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
         @timestamp-event="changeTimestamp"