FreeTube/src/renderer/components/watch-video-info/watch-video-info.js

import Vue from 'vue'
import FtCard from '../ft-card/ft-card.vue'
import FtButton from '../ft-button/ft-button.vue'
import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
import { shell } from 'electron'

export default Vue.extend({
  name: 'WatchVideoInfo',
  components: {
    'ft-card': FtCard,
    'ft-button': FtButton,
    'ft-list-dropdown': FtListDropdown,
    'ft-flex-box': FtFlexBox
  },
  props: {
    id: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    channelId: {
      type: String,
      required: true
    },
    channelName: {
      type: String,
      required: true
    },
    channelThumbnail: {
      type: String,
      required: true
    },
    viewCount: {
      type: Number,
      required: true
    },
    subscriptionCountText: {
      type: String,
      required: true
    },
    likeCount: {
      type: Number,
      required: true
    },
    dislikeCount: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      formatTypeLabel: 'VIDEO FORMATS',
      formatTypeNames: [
        'USE DASH FORMATS',
        'USE LEGACY FORMATS',
        'USE YOUTUBE PLAYER'
      ],
      formatTypeValues: [
        'dash',
        'legacy',
        'youtube'
      ],
      shareLabel: 'SHARE VIDEO',
      shareNames: [
        'COPY INVIDIOUS LINK',
        'OPEN INVIDIOUS LINK',
        'COPY YOUTUBE LINK',
        'OPEN YOUTUBE LINK',
        'COPY YOUTUBE EMBED LINK',
        'OPEN YOUTUBE EMBED LINK'
      ],
      shareValues: [
        'copyInvidious',
        'openInvidious',
        'copyYoutube',
        'openYoutube',
        'copyYoutubeEmbed',
        'openYoutubeEmbed'
      ]
    }
  },
  computed: {
    invidiousInstance: function () {
      return this.$store.getters.getInvidiousInstance
    },

    invidiousUrl: function () {
      return `${this.invidiousInstance}/watch?v=${this.id}`
    },

    youtubeUrl: function () {
      return `https://www.youtube.com/watch?v=${this.id}`
    },

    youtubeEmbedUrl: function () {
      return `https://www.youtube-nocookie.com/embed/${this.id}`
    },

    totalLikeCount: function () {
      return this.likeCount + this.dislikeCount
    },

    likePercentageRatio: function () {
      return parseInt(this.likeCount / this.totalLikeCount * 100)
    },

    parsedViewCount: function () {
      return this.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' views'
    },

    subscribedText: function () {
      return `SUBSCRIBE ${this.subscriptionCountText}`
    }
  },
  methods: {
    goToChannel: function () {
      console.log('TODO: Handle goToChannel')
    },

    handleSubscription: function () {
      console.log('TODO: Handle subscription logic')
    },

    handleShare: function (method) {
      console.log('Handling share')

      switch (method) {
        case 'copyYoutube':
          navigator.clipboard.writeText(this.youtubeUrl)
          break
        case 'openYoutube':
          shell.openExternal(this.youtubeUrl)
          break
        case 'copyYoutubeEmbed':
          navigator.clipboard.writeText(this.youtubeEmbedUrl)
          break
        case 'openYoutubeEmbed':
          shell.openExternal(this.youtubeEmbedUrl)
          break
        case 'copyInvidious':
          navigator.clipboard.writeText(this.invidiousUrl)
          break
        case 'openInvidious':
          shell.openExternal(this.invidiousUrl)
          break
      }
    }
  }
})