diff --git a/src/renderer/components/FtCommunityPost/FtCommunityPost.vue b/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
index 3c78df7715501..8e4d52f2c6f37 100644
--- a/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
+++ b/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
@@ -175,7 +175,7 @@ import autolinker from 'autolinker'
 import { A11y, Navigation, Pagination } from 'swiper/modules'
 import { computed, onMounted, useTemplateRef } from 'vue'
 
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideo from '../FtListVideo/FtListVideo.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPoll from '../FtCommunityPoll/FtCommunityPoll.vue'
 import FtShareButton from '../FtShareButton/FtShareButton.vue'
diff --git a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
index a7dbf2a9b20f0..79dad883e6602 100644
--- a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
+++ b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
@@ -66,7 +66,7 @@ import { computed, ref } from 'vue'
 
 import { handleDragAndDrop } from '../../helpers/dragAndDrop'
 
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideo from '../FtListVideo/FtListVideo.vue'
 import FtListChannel from '../FtListChannel/FtListChannel.vue'
 import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPost from '../FtCommunityPost/FtCommunityPost.vue'
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/FtListVideo/FtListVideo.scss
similarity index 97%
rename from src/renderer/components/ft-list-video/ft-list-video.scss
rename to src/renderer/components/FtListVideo/FtListVideo.scss
index 75499bfafe7b9..3ee38f3fdf75b 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/FtListVideo/FtListVideo.scss
@@ -31,6 +31,10 @@
   aspect-ratio: 16/9 auto;
 }
 
+.blur {
+  filter: blur(20px);
+}
+
 .videoTagLine {
   margin-block-start: 3px;
 }
diff --git a/src/renderer/components/FtListVideo/FtListVideo.vue b/src/renderer/components/FtListVideo/FtListVideo.vue
new file mode 100644
index 0000000000000..fb4f7b6dfc662
--- /dev/null
+++ b/src/renderer/components/FtListVideo/FtListVideo.vue
@@ -0,0 +1,1178 @@
+<template>
+  <div
+    class="ft-list-video ft-list-item"
+    :class="{
+      list: effectiveListTypeIsList,
+      grid: !effectiveListTypeIsList,
+      [appearance]: true,
+      watched: addWatchedStyle
+    }"
+  >
+    <div
+      v-if="showGrabBar"
+      class="grabBar"
+    >
+      <FontAwesomeIcon
+        :icon="['fas', 'fa-bars']"
+      />
+    </div>
+    <div
+      class="videoThumbnail"
+      draggable="true"
+      @dragstart="onDragStart"
+    >
+      <RouterLink
+        class="thumbnailLink"
+        tabindex="-1"
+        :to="watchVideoRouterLink"
+        @click="handleWatchPageLinkClick"
+      >
+        <img
+          :src="thumbnail"
+          class="thumbnailImage"
+          :class="{ blur: blurThumbnails }"
+          alt=""
+        >
+      </RouterLink>
+      <div
+        v-if="isLive || isUpcoming || (displayDuration !== '' && displayDuration !== '0:00')"
+        class="videoDuration"
+        :class="{
+          live: isLive,
+          upcoming: isUpcoming
+        }"
+      >
+        {{ isLive ? t("Video.Live") : (isUpcoming ? t("Video.Upcoming") : displayDuration) }}
+      </div>
+      <FtIconButton
+        v-if="externalPlayer !== '' && !externalPlayerIsDefaultViewingMode"
+        :title="t('Video.External Player.OpenInTemplate', { externalPlayer })"
+        :icon="['fas', 'external-link-alt']"
+        class="externalPlayerIcon"
+        theme="base"
+        :padding="appearance === 'watchPlaylistItem' ? 6 : 7"
+        :size="appearance === 'watchPlaylistItem' ? 12 : 16"
+        draggable="true"
+        @click="handleExternalPlayer"
+        @dragstart="onDragStart"
+      />
+      <span
+        class="playlistIcons"
+        draggable="true"
+        @dragstart="onDragStart"
+      >
+        <FtIconButton
+          v-if="showPlaylists"
+          :title="t('User Playlists.Add to Playlist')"
+          :icon="['fas', 'plus']"
+          class="addToPlaylistIcon"
+          :class="alwaysShowAddToPlaylistButton ? 'alwaysVisible' : ''"
+          :padding="playlistIconPadding"
+          :size="playlistIconSize"
+          @click="togglePlaylistPrompt"
+        />
+        <FtIconButton
+          v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
+          :title="quickBookmarkIconText"
+          :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
+          class="quickBookmarkVideoIcon"
+          :class="{
+            bookmarked: isInQuickBookmarkPlaylist,
+            alwaysVisible: alwaysShowAddToPlaylistButton,
+          }"
+          :theme="quickBookmarkIconTheme"
+          :padding="playlistIconPadding"
+          :size="playlistIconSize"
+          @click="toggleQuickBookmarked"
+        />
+        <FtIconButton
+          v-if="inUserPlaylist && canMoveVideoUp"
+          :title="t('User Playlists.Move Video Up')"
+          :icon="effectiveListTypeIsList ? ['fas', 'arrow-up'] : ['fas', 'arrow-left']"
+          class="upArrowIcon"
+          :padding="playlistIconPadding"
+          :size="playlistIconSize"
+          @click="moveVideoUp"
+        />
+        <FtIconButton
+          v-if="inUserPlaylist && canMoveVideoDown"
+          :title="t('User Playlists.Move Video Down')"
+          :icon="effectiveListTypeIsList ? ['fas', 'arrow-down'] : ['fas', 'arrow-right']"
+          class="downArrowIcon"
+          :padding="playlistIconPadding"
+          :size="playlistIconSize"
+          @click="moveVideoDown"
+        />
+        <FtIconButton
+          v-if="inUserPlaylist && canRemoveFromPlaylist"
+          :title="t('User Playlists.Remove from Playlist')"
+          :icon="['fas', 'trash']"
+          class="trashIcon"
+          :padding="playlistIconPadding"
+          :size="playlistIconSize"
+          @click="removeFromPlaylist"
+        />
+      </span>
+      <div
+        v-if="addWatchedStyle"
+        class="videoWatched"
+      >
+        {{ t("Video.Watched") }}
+      </div>
+      <div
+        v-if="historyEntryExists"
+        class="watchedProgressBar"
+        :style="{ inlineSize: progressPercentage + '%' }"
+      />
+    </div>
+    <div
+      class="info"
+      draggable="true"
+      @dragstart="onDragStart"
+    >
+      <RouterLink
+        class="title"
+        :to="watchVideoRouterLink"
+        @click="handleWatchPageLinkClick"
+      >
+        <h3
+          class="h3Title"
+          dir="auto"
+        >
+          {{ displayTitle }}
+        </h3>
+      </RouterLink>
+      <div class="infoLine">
+        <component
+          :is="disableChannelLinks ? 'span' : 'router-link'"
+          v-if="channelId !== null"
+          class="channelName"
+          dir="auto"
+          :to="`/channel/${channelId}`"
+        >
+          {{ channelName }}
+        </component>
+        <bdi v-else-if="channelName !== null">
+          {{ channelName }}
+        </bdi>
+        <span
+          v-if="!isLive && !isUpcoming && !isPremium && !hideViews && viewCount != null"
+          class="viewCount"
+        >
+          <template v-if="channelId !== null || channelName !== null"> • </template>
+          {{ t('Global.Counts.View Count', { count: parsedViewCount }, viewCount) }}
+        </span>
+        <span
+          v-if="uploadedTime !== '' && !isLive"
+          class="uploadedTime"
+        > • {{ uploadedTime }}</span>
+        <span
+          v-if="isLive && !hideViews"
+          class="viewCount"
+        > • {{ t('Global.Counts.Watching Count', { count: parsedViewCount }, viewCount) }}</span>
+      </div>
+      <div
+        v-if="is4k || hasCaptions || is8k || isNew || isVr180 || isVr360 || is3D"
+        class="videoTagLine"
+      >
+        <div
+          v-if="isNew"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.New')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.New') }}
+        </div>
+        <div
+          v-if="is4k"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.4K')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.4K') }}
+        </div>
+        <div
+          v-if="is8k"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.8K')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.8K') }}
+        </div>
+        <div
+          v-if="isVr180"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.VR180')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.VR180') }}
+        </div>
+        <div
+          v-if="isVr360"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.360 Video')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.360 Video') }}
+        </div>
+        <div
+          v-if="is3D"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.3D')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.3D') }}
+        </div>
+        <div
+          v-if="hasCaptions"
+          class="videoTag"
+          :aria-label="t('Search Listing.Label.Closed Captions')"
+          role="img"
+        >
+          {{ t('Search Listing.Label.Subtitles') }}
+        </div>
+      </div>
+      <div class="buttonStack">
+        <FtIconButton
+          class="optionsButton"
+          :icon="['fas', 'ellipsis-v']"
+          :title="t('Video.More Options')"
+          theme="base-no-default"
+          :size="16"
+          :use-shadow="false"
+          dropdown-position-x="left"
+          :dropdown-options="dropdownOptions"
+          @click="handleOptionsClick"
+        />
+        <button
+          v-if="deArrowChangedContent || deArrowTogglePinned"
+          :title="deArrowToggleTitle"
+          class="optionsButton deArrowToggleButton"
+          :class="{ alwaysVisible: deArrowTogglePinned }"
+          @click="toggleDeArrow"
+        >
+          <FontAwesomeIcon
+            class="deArrowToggleIcon"
+            :icon="['far', 'dot-circle']"
+          />
+        </button>
+      </div>
+      <p
+        v-if="description && effectiveListTypeIsList && appearance === 'result'"
+        v-safer-html="description"
+        class="description"
+        dir="auto"
+      />
+      <div
+        v-if="effectiveListTypeIsList"
+        class="restArea"
+      >
+        &nbsp;
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+import FtIconButton from '../FtIconButton/FtIconButton.vue'
+import { vSaferHtml } from '../../directives/vSaferHtml.js'
+
+import store from '../../store/index'
+
+import {
+  copyToClipboard,
+  formatDurationAsTimestamp,
+  formatNumber,
+  getRelativeTimeFromDate,
+  openExternalLink,
+  showToast,
+  toDistractionFreeTitle,
+  deepCopy,
+  debounce
+} from '../../helpers/utils.js'
+import { deArrowData, deArrowThumbnail } from '../../helpers/sponsorblock.js'
+import thumbnailPlaceholder from '../../assets/img/thumbnail_placeholder.svg'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  playlistId: {
+    type: String,
+    default: null
+  },
+  playlistType: {
+    type: String,
+    default: null
+  },
+  playlistItemId: {
+    type: String,
+    default: null
+  },
+  playlistIndex: {
+    type: Number,
+    default: null
+  },
+  playlistReverse: {
+    type: Boolean,
+    default: false
+  },
+  playlistShuffle: {
+    type: Boolean,
+    default: false
+  },
+  playlistLoop: {
+    type: Boolean,
+    default: false
+  },
+  forceListType: {
+    type: String,
+    default: null
+  },
+  appearance: {
+    type: String,
+    required: true
+  },
+  showVideoWithLastViewedPlaylist: {
+    type: Boolean,
+    default: false
+  },
+  alwaysShowAddToPlaylistButton: {
+    type: Boolean,
+    default: false,
+  },
+  quickBookmarkButtonEnabled: {
+    type: Boolean,
+    default: true,
+  },
+  canMoveVideoUp: {
+    type: Boolean,
+    default: false,
+  },
+  canMoveVideoDown: {
+    type: Boolean,
+    default: false,
+  },
+  canRemoveFromPlaylist: {
+    type: Boolean,
+    default: false,
+  },
+  layout: {
+    type: String,
+    default: 'list',
+  },
+  showGrabBar: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'])
+
+const { locale, t } = useI18n()
+const route = useRoute()
+
+const id = ref('')
+const title = ref('')
+const channelName = ref(null)
+const channelId = ref(null)
+const viewCount = ref(0)
+const parsedViewCount = ref('')
+const uploadedTime = ref('')
+const lengthSeconds = ref(0)
+const duration = ref('')
+const description = ref('')
+const published = ref(undefined)
+const isLive = ref(false)
+const is4k = ref(false)
+const is8k = ref(false)
+const isNew = ref(false)
+const isVr180 = ref(false)
+const isVr360 = ref(false)
+const is3D = ref(false)
+const hasCaptions = ref(false)
+const isUpcoming = ref(false)
+const isPremium = ref(false)
+const hideViews = ref(false)
+const deArrowTogglePinned = ref(false)
+const showDeArrowTitle = ref(false)
+const showDeArrowThumbnail = ref(false)
+
+const historyEntry = computed(() => store.getters.getHistoryCacheById[id.value])
+
+const historyEntryExists = computed(() => historyEntry.value !== undefined)
+
+const watchProgress = computed(() => {
+  if (!historyEntryExists.value || !watchedProgressSavingEnabled.value) {
+    return 0
+  }
+
+  return historyEntry.value.watchProgress
+})
+
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
+const listType = computed(() => store.getters.getListType)
+
+const effectiveListTypeIsList = computed(() => {
+  return (listType.value === 'list' || props.forceListType === 'list') &&
+    props.forceListType !== 'grid'
+})
+
+/** @type {import('vue').ComputedRef<'' | 'start' | 'middle' | 'end' | 'hidden' | 'blur'>} */
+const thumbnailPreference = computed(() => store.getters.getThumbnailPreference)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const blurThumbnails = computed(() => store.getters.getBlurThumbnails)
+
+/** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
+const backendPreference = computed(() => store.getters.getBackendPreference)
+
+/** @type {import('vue').ComputedRef<string>} */
+const currentInvidiousInstanceUrl = computed(() => store.getters.getCurrentInvidiousInstanceUrl)
+
+const showPlaylists = computed(() => !store.getters.getHidePlaylists)
+
+const inHistory = computed(() => {
+  // When in the history page, showing relative dates isn't very useful.
+  // We want to show the exact date instead
+  return route.name === 'history'
+})
+
+const inSubscriptions = computed(() => route.name === 'subscriptions' || route.name === 'default')
+
+const inUserPlaylist = computed(() => playlistTypeFinal.value === 'user' || selectedUserPlaylist.value != null)
+
+/** @type {import('vue').ComputedRef<any>} */
+const selectedUserPlaylist = computed(() => {
+  if (playlistIdFinal.value == null || playlistIdFinal.value === '') { return null }
+
+  return store.getters.getPlaylist(playlistIdFinal.value)
+})
+
+const progressPercentage = computed(() => {
+  if (typeof lengthSeconds.value !== 'number' || lengthSeconds.value === 0) {
+    return 0
+  }
+
+  const percentage = (Math.ceil(watchProgress.value) / lengthSeconds.value) * 100
+  return Math.min(percentage, 100)
+})
+
+/** @type {import('vue').ComputedRef<any[]>} */
+const hiddenChannels = computed(() => JSON.parse(store.getters.getChannelsHidden))
+
+const playlistSharable = computed(() => {
+  // `playlistId` can be undefined
+  // User playlist ID should not be shared
+  return playlistIdFinal.value && playlistIdFinal.value.length > 0 && !inUserPlaylist.value
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSharingActions = computed(() => store.getters.getHideSharingActions)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showInvidiousShareOptions = computed(() => backendPreference.value === 'invidious' || store.getters.getBackendFallback)
+
+const dropdownOptions = computed(() => {
+  const options = [
+    {
+      label: historyEntryExists.value
+        ? t('Video.Remove From History')
+        : t('Video.Mark As Watched'),
+      value: 'history'
+    }
+  ]
+  if (!hideSharingActions.value) {
+    options.push(
+      {
+        type: 'divider'
+      },
+      {
+        label: t('Video.Copy YouTube Link'),
+        value: 'copyYoutube'
+      },
+      {
+        label: t('Video.Copy YouTube Embedded Player Link'),
+        value: 'copyYoutubeEmbed'
+      },
+      ...showInvidiousShareOptions.value
+        ? [{
+            label: t('Video.Copy Invidious Link'),
+            value: 'copyInvidious'
+          }]
+        : [],
+      {
+        type: 'divider'
+      },
+      {
+        label: t('Video.Open in YouTube'),
+        value: 'openYoutube'
+      },
+      {
+        label: t('Video.Open YouTube Embedded Player'),
+        value: 'openYoutubeEmbed'
+      },
+      ...showInvidiousShareOptions.value
+        ? [{
+            label: t('Video.Open in Invidious'),
+            value: 'openInvidious'
+          }]
+        : [],
+    )
+    if (channelId.value !== null) {
+      options.push(
+        {
+          type: 'divider'
+        },
+        {
+          label: t('Video.Copy YouTube Channel Link'),
+          value: 'copyYoutubeChannel'
+        },
+        ...showInvidiousShareOptions.value
+          ? [{
+              label: t('Video.Copy Invidious Channel Link'),
+              value: 'copyInvidiousChannel'
+            }]
+          : [],
+        {
+          type: 'divider'
+        },
+        {
+          label: t('Video.Open Channel in YouTube'),
+          value: 'openYoutubeChannel'
+        },
+        ...showInvidiousShareOptions.value
+          ? [{
+              label: t('Video.Open Channel in Invidious'),
+              value: 'openInvidiousChannel'
+            }]
+          : [],
+      )
+    }
+  }
+
+  if (channelId.value !== null && !inSubscriptions.value) {
+    const channelShouldBeHidden = hiddenChannels.value.some(c => c.name === channelId.value)
+
+    options.push(
+      {
+        type: 'divider'
+      },
+
+      channelShouldBeHidden
+        ? {
+            label: t('Video.Unhide Channel'),
+            value: 'unhideChannel'
+          }
+        : {
+            label: t('Video.Hide Channel'),
+            value: 'hideChannel'
+          }
+    )
+  }
+
+  return options
+})
+
+function getYoutubeEmbedUrl() {
+  return `https://www.youtube-nocookie.com/embed/${id.value}`
+}
+
+function getYoutubeChannelUrl() {
+  return `https://youtube.com/channel/${channelId.value}`
+}
+
+function getInvidiousUrl() {
+  const videoUrl = `${currentInvidiousInstanceUrl.value}/watch?v=${id.value}`
+  // `playlistId` can be undefined
+  if (playlistSharable.value) {
+    // `index` seems can be ignored
+    return videoUrl + `&list=${playlistIdFinal.value}`
+  }
+  return videoUrl
+}
+
+function getInvidiousChannelUrl() {
+  return `${currentInvidiousInstanceUrl.value}/channel/${channelId.value}`
+}
+
+/**
+ * @param {string} option
+ */
+function handleOptionsClick(option) {
+  switch (option) {
+    case 'history':
+      if (historyEntryExists.value) {
+        removeFromWatched()
+      } else {
+        markAsWatched()
+      }
+      break
+    case 'copyYoutube': {
+      let videoUrl = `https://youtu.be/${id.value}`
+
+      if (playlistSharable.value) {
+        // `index` seems can be ignored
+        videoUrl += `&list=${playlistIdFinal.value}`
+      }
+
+      copyToClipboard(videoUrl, { messageOnSuccess: t('Share.YouTube URL copied to clipboard') })
+      break
+    }
+    case 'openYoutube': {
+      let videoUrl = `https://www.youtube.com/watch?v=${id.value}`
+
+      if (playlistSharable.value) {
+        // `index` seems can be ignored
+        videoUrl += `&list=${playlistIdFinal.value}`
+      }
+
+      openExternalLink(videoUrl)
+      break
+    }
+    case 'copyYoutubeEmbed':
+      copyToClipboard(getYoutubeEmbedUrl(), { messageOnSuccess: t('Share.YouTube Embed URL copied to clipboard') })
+      break
+    case 'openYoutubeEmbed':
+      openExternalLink(getYoutubeEmbedUrl())
+      break
+    case 'copyInvidious':
+      copyToClipboard(getInvidiousUrl(), { messageOnSuccess: t('Share.Invidious URL copied to clipboard') })
+      break
+    case 'openInvidious':
+      openExternalLink(getInvidiousUrl())
+      break
+    case 'copyYoutubeChannel':
+      copyToClipboard(getYoutubeChannelUrl(), { messageOnSuccess: t('Share.YouTube Channel URL copied to clipboard') })
+      break
+    case 'openYoutubeChannel':
+      openExternalLink(getYoutubeChannelUrl())
+      break
+    case 'copyInvidiousChannel':
+      copyToClipboard(getInvidiousChannelUrl(), { messageOnSuccess: t('Share.Invidious Channel URL copied to clipboard') })
+      break
+    case 'openInvidiousChannel':
+      openExternalLink(getInvidiousChannelUrl())
+      break
+    case 'hideChannel':
+      hideChannel(channelName.value, channelId.value)
+      break
+    case 'unhideChannel':
+      unhideChannel(channelName.value, channelId.value)
+      break
+  }
+}
+
+const thumbnail = computed(() => {
+  if (thumbnailPreference.value === 'hidden') {
+    return thumbnailPlaceholder
+  }
+
+  if (showDeArrowThumbnail.value && deArrowCache.value?.thumbnail != null) {
+    return deArrowCache.value.thumbnail
+  }
+
+  let baseUrl
+  if (backendPreference.value === 'invidious') {
+    baseUrl = currentInvidiousInstanceUrl.value
+  } else {
+    baseUrl = 'https://i.ytimg.com'
+  }
+
+  switch (thumbnailPreference.value) {
+    case 'start':
+      return `${baseUrl}/vi/${id.value}/mq1.jpg`
+    case 'middle':
+      return `${baseUrl}/vi/${id.value}/mq2.jpg`
+    case 'end':
+      return `${baseUrl}/vi/${id.value}/mq3.jpg`
+    default:
+      return `${baseUrl}/vi/${id.value}/mqdefault.jpg`
+  }
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideVideoViews = computed(() => store.getters.getHideVideoViews)
+
+const addWatchedStyle = computed(() => historyEntryExists.value && !inHistory.value)
+
+/** @type {import('vue').ComputedRef<string>} */
+const externalPlayer = computed(() => store.getters.getExternalPlayer)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const externalPlayerIsDefaultViewingMode = computed(() => {
+  return process.env.IS_ELECTRON && externalPlayer.value !== '' && store.getters.getDefaultViewingMode === 'external_player'
+})
+
+/** @type {import('vue').ComputedRef<number>} */
+const defaultPlayback = computed(() => store.getters.getDefaultPlayback)
+
+const watchedProgressSavingEnabled = computed(() => {
+  return ['auto', 'semi-auto'].includes(store.getters.getWatchedProgressSavingMode)
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const rememberHistory = computed(() => store.getters.getRememberHistory)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const saveVideoHistoryWithLastViewedPlaylist = computed(() => store.getters.getSaveVideoHistoryWithLastViewedPlaylist)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showDistractionFreeTitles = computed(() => store.getters.getShowDistractionFreeTitles)
+
+/** @type {import('vue').ComputedRef<string>} */
+const displayTitle = computed(() => {
+  let title_
+  if (showDeArrowTitle.value && deArrowCache.value?.title) {
+    title_ = deArrowCache.value.title
+  } else {
+    title_ = title.value
+  }
+
+  if (showDistractionFreeTitles.value) {
+    return toDistractionFreeTitle(title_)
+  } else {
+    return title_
+  }
+})
+
+const displayDuration = computed(() => {
+  if (useDeArrowTitles.value && (duration.value === '' || duration.value === '0:00') && deArrowCache.value?.videoDuration) {
+    return formatDurationAsTimestamp(deArrowCache.value.videoDuration)
+  }
+
+  return duration.value
+})
+
+/** @type {import('vue').ComputedRef<{ playlistId: string | undefined, playlistType: string | undefined, playlistItemId: string | undefined } | undefined>} */
+const playlistIdTypePairFinal = computed(() => {
+  if (props.playlistId) {
+    return {
+      playlistId: props.playlistId,
+      playlistType: props.playlistType,
+      playlistItemId: props.playlistItemId,
+    }
+  }
+
+  // Get playlist ID from history ONLY if option enabled
+  if (!props.showVideoWithLastViewedPlaylist || !saveVideoHistoryWithLastViewedPlaylist.value) {
+    return
+  }
+
+  return {
+    playlistId: historyEntry.value?.lastViewedPlaylistId,
+    playlistType: historyEntry.value?.lastViewedPlaylistType,
+    playlistItemId: historyEntry.value?.lastViewedPlaylistItemId,
+  }
+})
+
+const playlistIdFinal = computed(() => playlistIdTypePairFinal.value?.playlistId)
+const playlistTypeFinal = computed(() => playlistIdTypePairFinal.value?.playlistType)
+const playlistItemIdFinal = computed(() => playlistIdTypePairFinal.value?.playlistItemId)
+
+const quickBookmarkPlaylist = computed(() => store.getters.getQuickBookmarkPlaylist)
+
+const isQuickBookmarkEnabled = computed(() => quickBookmarkPlaylist.value != null)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const isInQuickBookmarkPlaylist = computed(() => {
+  if (!isQuickBookmarkEnabled.value) { return false }
+
+  // Accessing a ref has a negligible amount of overhead,
+  // however as we know that some users have playlists that have more than 10k items in them
+  // it adds up quickly, especially as there are usually lots of FtListVideo instances active at the same time.
+  // So create a temporary variable outside of the array, so we only have to do it once.
+  // Also the search is retriggered every time any playlist is modified.
+  const id_ = id.value
+
+  return quickBookmarkPlaylist.value.videos.some((video) => {
+    return video.videoId === id_
+  })
+})
+
+const quickBookmarkIconText = computed(() => {
+  if (!isQuickBookmarkEnabled.value) { return '' }
+
+  const translationProperties = {
+    playlistName: quickBookmarkPlaylist.value.playlistName,
+  }
+
+  return isInQuickBookmarkPlaylist.value
+    ? t('User Playlists.Remove from Favorites', translationProperties)
+    : t('User Playlists.Add to Favorites', translationProperties)
+})
+
+const quickBookmarkIconTheme = computed(() => isInQuickBookmarkPlaylist.value ? 'base favorite' : 'base')
+
+const playlistIconPadding = computed(() => props.appearance === 'watchPlaylistItem' ? 5 : 6)
+const playlistIconSize = computed(() => props.appearance === 'watchPlaylistItem' ? 14 : 18)
+
+const watchPageLinkQuery = computed(() => {
+  const query = {}
+
+  if (playlistIdFinal.value) {
+    query.playlistId = playlistIdFinal.value
+  }
+
+  if (playlistTypeFinal.value) {
+    query.playlistType = playlistTypeFinal.value
+  }
+
+  if (playlistItemIdFinal.value) {
+    query.playlistItemId = playlistItemIdFinal.value
+  }
+
+  return query
+})
+
+const watchVideoRouterLink = computed(() => {
+  // For `router-link` attribute `to`
+  if (!externalPlayerIsDefaultViewingMode.value) {
+    return {
+      path: `/watch/${id.value}`,
+      query: watchPageLinkQuery.value,
+    }
+  } else {
+    return {}
+  }
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const useDeArrowTitles = computed(() => store.getters.getUseDeArrowTitles)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const useDeArrowThumbnails = computed(() => store.getters.getUseDeArrowThumbnails)
+
+const deArrowChangedContent = computed(() => {
+  return (useDeArrowThumbnails.value && deArrowCache.value?.thumbnail) ||
+      (useDeArrowTitles.value && deArrowCache.value?.title &&
+        props.data.title.localeCompare(deArrowCache.value.title, undefined, { sensitivity: 'accent' }) !== 0)
+})
+
+const deArrowToggleTitle = computed(() => {
+  return deArrowTogglePinned.value
+    ? t('Video.DeArrow.Show Modified Details')
+    : t('Video.DeArrow.Show Original Details')
+})
+
+const deArrowCache = computed(() => store.getters.getDeArrowCache[id.value])
+
+const disableChannelLinks = computed(() => store.getters.getDisableChannelLinks)
+
+function handleWatchPageLinkClick() {
+  if (externalPlayerIsDefaultViewingMode.value) {
+    handleExternalPlayer()
+  }
+}
+
+async function fetchDeArrowThumbnail() {
+  if (thumbnailPreference.value === 'hidden') { return }
+
+  const videoId = id.value
+  const thumbnail = await deArrowThumbnail(videoId, deArrowCache.value.thumbnailTimestamp)
+
+  if (thumbnail) {
+    const deArrowCacheClone = deepCopy(deArrowCache.value)
+    deArrowCacheClone.thumbnail = thumbnail
+    store.commit('addThumbnailToDeArrowCache', deArrowCacheClone)
+  }
+}
+
+const debounceGetDeArrowThumbnail = debounce(fetchDeArrowThumbnail, 1000)
+
+async function fetchDeArrowData() {
+  const videoId = id.value
+  const cacheData = { videoId, title: null, videoDuration: null, thumbnail: null, thumbnailTimestamp: null }
+
+  const data = await deArrowData(videoId)
+
+  if (Array.isArray(data?.titles) && data.titles.length > 0 && (data.titles[0].locked || data.titles[0].votes >= 0)) {
+    // remove dearrow formatting markers https://github.com/ajayyy/DeArrow/blob/0da266485be902fe54259214c3cd7c942f2357c5/src/titles/titleFormatter.ts#L460
+    cacheData.title = data.titles[0].title.replaceAll(/(^|\s)>(\S)/g, '$1$2').trim()
+  }
+
+  if (Array.isArray(data?.thumbnails) && data.thumbnails.length > 0 && (data.thumbnails[0].locked || data.thumbnails[0].votes >= 0)) {
+    cacheData.thumbnailTimestamp = data.thumbnails[0].timestamp
+  } else if (data?.videoDuration != null) {
+    cacheData.thumbnailTimestamp = data.videoDuration * data.randomTime
+  }
+
+  cacheData.videoDuration = data?.videoDuration ? Math.floor(data.videoDuration) : null
+
+  // Save data to cache whether data available or not to prevent duplicate requests
+  store.commit('addVideoToDeArrowCache', cacheData)
+
+  // fetch dearrow thumbnails if enabled
+  if (showDeArrowThumbnail.value && deArrowCache.value?.thumbnail === null) {
+    debounceGetDeArrowThumbnail()
+  }
+}
+
+function toggleDeArrow() {
+  if (!deArrowChangedContent.value) {
+    return
+  }
+
+  deArrowTogglePinned.value = !deArrowTogglePinned.value
+
+  if (useDeArrowTitles.value) {
+    showDeArrowTitle.value = !showDeArrowTitle.value
+  }
+
+  if (useDeArrowThumbnails.value) {
+    showDeArrowThumbnail.value = !showDeArrowThumbnail.value
+  }
+}
+
+function handleExternalPlayer() {
+  emit('pause-player')
+
+  const payload = {
+    videoId: id.value,
+    playlistId: playlistIdFinal.value,
+    startTime: watchProgress.value,
+    playbackRate: defaultPlayback.value,
+    playlistIndex: props.playlistIndex,
+    playlistReverse: props.playlistReverse,
+    playlistShuffle: props.playlistShuffle,
+    playlistLoop: props.playlistLoop,
+  }
+  // Only play video in non playlist mode when user playlist detected
+  if (inUserPlaylist.value) {
+    Object.assign(payload, {
+      playlistId: null,
+      playlistIndex: null,
+      playlistReverse: null,
+      playlistShuffle: null,
+      playlistLoop: null,
+    })
+  }
+
+  if (process.env.IS_ELECTRON) {
+    window.ftElectron.openInExternalPlayer(payload)
+  }
+
+  if (rememberHistory.value) {
+    markAsWatched()
+  }
+}
+
+function parseVideoData() {
+  id.value = props.data.videoId
+  title.value = props.data.title
+
+  channelName.value = props.data.author ?? null
+  channelId.value = props.data.authorId ?? null
+
+  if ((props.data.lengthSeconds === '' || props.data.lengthSeconds === '0:00') && historyEntryExists.value) {
+    lengthSeconds.value = historyEntry.value.lengthSeconds
+    duration.value = formatDurationAsTimestamp(historyEntry.value.lengthSeconds)
+  } else {
+    lengthSeconds.value = props.data.lengthSeconds
+    duration.value = formatDurationAsTimestamp(props.data.lengthSeconds)
+  }
+
+  description.value = props.data.description
+  isLive.value = props.data.liveNow || props.data.lengthSeconds === undefined
+  isUpcoming.value = props.data.isUpcoming || props.data.premiere
+  is4k.value = props.data.is4k
+  is8k.value = props.data.is8k
+  isNew.value = props.data.isNew
+  isVr180.value = props.data.isVr180
+  isVr360.value = props.data.isVr360
+  is3D.value = props.data.is3d
+  hasCaptions.value = props.data.hasCaptions
+  isPremium.value = props.data.premium || false
+  viewCount.value = props.data.viewCount
+
+  if (props.data.premiereDate !== undefined) {
+    let premiereDate = props.data.premiereDate
+
+    // premiereDate will be a string when the subscriptions are restored from the cache
+    if (typeof premiereDate === 'string') {
+      premiereDate = new Date(premiereDate)
+    }
+    uploadedTime.value = premiereDate.toLocaleString([locale.value, 'en'])
+    published.value = premiereDate.getTime()
+  } else if (props.data.premiereTimestamp !== undefined) {
+    uploadedTime.value = new Date(props.data.premiereTimestamp * 1000).toLocaleString([locale.value, 'en'])
+    published.value = props.data.premiereTimestamp * 1000
+  } else if (typeof props.data.published === 'number' && !isLive.value) {
+    published.value = props.data.published
+
+    if (inHistory.value) {
+      uploadedTime.value = new Date(props.data.published).toLocaleDateString([locale.value, 'en'])
+    } else {
+      // Use 30 days per month, just like calculatePublishedDate
+      uploadedTime.value = getRelativeTimeFromDate(props.data.published, false)
+    }
+  }
+
+  if (hideVideoViews.value) {
+    hideViews.value = true
+  } else if (props.data.viewCount !== undefined && props.data.viewCount !== null) {
+    parsedViewCount.value = formatNumber(props.data.viewCount)
+  } else if (props.data.viewCountText !== undefined) {
+    parsedViewCount.value = props.data.viewCountText.replace(' views', '')
+  } else {
+    hideViews.value = true
+  }
+}
+
+function markAsWatched() {
+  const videoData = {
+    videoId: id.value,
+    title: title.value,
+    author: channelName.value,
+    authorId: channelId.value,
+    published: published.value,
+    description: description.value,
+    viewCount: viewCount.value,
+    lengthSeconds: props.data.lengthSeconds,
+    watchProgress: 0,
+    timeWatched: Date.now(),
+    isLive: false,
+    type: 'video'
+  }
+
+  store.dispatch('updateHistory', videoData)
+
+  if (!historyEntryExists.value) {
+    showToast(t('Video.Video has been marked as watched'))
+  }
+}
+
+function removeFromWatched() {
+  store.dispatch('removeFromHistory', id.value)
+
+  showToast(t('Video.Video has been removed from your history'))
+}
+
+function togglePlaylistPrompt() {
+  const videoData = {
+    videoId: id.value,
+    title: title.value,
+    author: channelName.value,
+    authorId: channelId.value,
+    description: description.value,
+    viewCount: viewCount.value,
+    lengthSeconds: props.data.lengthSeconds,
+    published: published.value,
+    premiereDate: props.data.premiereDate,
+    premiereTimestamp: props.data.premiereTimestamp,
+  }
+
+  store.dispatch('showAddToPlaylistPromptForManyVideos', { videos: [videoData] })
+}
+
+/**
+ * @param {string} channelName
+ * @param {string} channelId
+ */
+function hideChannel(channelName, channelId) {
+  const newHiddenChannels = [...hiddenChannels.value, { name: channelId, preferredName: channelName }]
+
+  store.dispatch('updateChannelsHidden', JSON.stringify(newHiddenChannels))
+
+  showToast(t('Channel Hidden', { channel: channelName }))
+}
+
+/**
+ * @param {string} channelName
+ * @param {string} channelId
+ */
+function unhideChannel(channelName, channelId) {
+  store.dispatch('updateChannelsHidden', JSON.stringify(hiddenChannels.value.filter(c => c.name !== channelId)))
+
+  showToast(t('Channel Unhidden', { channel: channelName }))
+}
+
+function toggleQuickBookmarked() {
+  if (!isQuickBookmarkEnabled.value) {
+    // This should be prevented by UI
+    return
+  }
+
+  if (isInQuickBookmarkPlaylist.value) {
+    removeFromQuickBookmarkPlaylist()
+  } else {
+    addToQuickBookmarkPlaylist()
+  }
+}
+
+function addToQuickBookmarkPlaylist() {
+  const videoData = {
+    videoId: id.value,
+    title: title.value,
+    author: channelName.value,
+    authorId: channelId.value,
+    lengthSeconds: props.data.lengthSeconds,
+    published: published.value,
+    premiereDate: props.data.premiereDate,
+    premiereTimestamp: props.data.premiereTimestamp,
+  }
+
+  store.dispatch('addVideo', {
+    _id: quickBookmarkPlaylist.value._id,
+    videoData,
+  })
+
+  // TODO: Maybe show playlist name
+  showToast(t('Video.Video has been saved'))
+}
+
+function removeFromQuickBookmarkPlaylist() {
+  store.dispatch('removeVideo', {
+    _id: quickBookmarkPlaylist.value._id,
+    // Remove all playlist items with same videoId
+    videoId: id.value,
+  })
+
+  // TODO: Maybe show playlist name
+  showToast(t('Video.Video has been removed from your saved list'))
+}
+
+function moveVideoUp() {
+  emit('move-video-up', id.value, props.playlistItemId)
+}
+
+function moveVideoDown() {
+  emit('move-video-down', id.value, props.playlistItemId)
+}
+
+function removeFromPlaylist() {
+  emit('remove-from-playlist', id.value, props.playlistItemId)
+}
+
+/**
+ * @param {DragEvent} event
+ */
+function onDragStart(event) {
+  // Prevent drag event except links
+  if (event.target.tagName !== 'A') {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+}
+
+parseVideoData()
+
+showDeArrowTitle.value = useDeArrowTitles.value
+showDeArrowThumbnail.value = useDeArrowThumbnails.value
+
+if ((showDeArrowTitle.value || showDeArrowThumbnail.value) && !deArrowCache.value) {
+  fetchDeArrowData()
+}
+
+if (showDeArrowThumbnail.value && deArrowCache.value && deArrowCache.value.thumbnail == null) {
+  debounceGetDeArrowThumbnail()
+}
+</script>
+
+<style scoped src="./FtListVideo.scss" lang="scss" />
diff --git a/src/renderer/components/FtListVideoLazy.vue b/src/renderer/components/FtListVideoLazy.vue
index e3bec8a070d0f..4251c59299e2e 100644
--- a/src/renderer/components/FtListVideoLazy.vue
+++ b/src/renderer/components/FtListVideoLazy.vue
@@ -33,7 +33,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 
-import FtListVideo from './ft-list-video/ft-list-video.vue'
+import FtListVideo from './FtListVideo/FtListVideo.vue'
 
 import store from '../store/index'
 
diff --git a/src/renderer/components/FtListVideoNumbered/FtListVideoNumbered.vue b/src/renderer/components/FtListVideoNumbered/FtListVideoNumbered.vue
index 5865ba7719c26..3289420e1f452 100644
--- a/src/renderer/components/FtListVideoNumbered/FtListVideoNumbered.vue
+++ b/src/renderer/components/FtListVideoNumbered/FtListVideoNumbered.vue
@@ -70,7 +70,7 @@ import { computed, ref, watch } from 'vue'
 
 import { handleDragAndDrop } from '../../helpers/dragAndDrop'
 
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListVideo from '../FtListVideo/FtListVideo.vue'
 
 const props = defineProps({
   data: {
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
deleted file mode 100644
index 4849f2e570f4c..0000000000000
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ /dev/null
@@ -1,935 +0,0 @@
-import { defineComponent } from 'vue'
-import FtIconButton from '../FtIconButton/FtIconButton.vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { useI18n } from 'vue-i18n'
-import { mapActions } from 'vuex'
-import {
-  copyToClipboard,
-  formatDurationAsTimestamp,
-  formatNumber,
-  getRelativeTimeFromDate,
-  openExternalLink,
-  showToast,
-  toDistractionFreeTitle,
-  deepCopy,
-  debounce
-} from '../../helpers/utils'
-import { deArrowData, deArrowThumbnail } from '../../helpers/sponsorblock'
-import thumbnailPlaceholder from '../../assets/img/thumbnail_placeholder.svg'
-import { vSaferHtml } from '../../directives/vSaferHtml.js'
-
-export default defineComponent({
-  name: 'FtListVideo',
-  components: {
-    'ft-icon-button': FtIconButton,
-    'ft-awesome-icon': FontAwesomeIcon,
-  },
-  directives: {
-    'safer-html': vSaferHtml
-  },
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    playlistId: {
-      type: String,
-      default: null
-    },
-    playlistType: {
-      type: String,
-      default: null
-    },
-    playlistItemId: {
-      type: String,
-      default: null
-    },
-    playlistIndex: {
-      type: Number,
-      default: null
-    },
-    playlistReverse: {
-      type: Boolean,
-      default: false
-    },
-    playlistShuffle: {
-      type: Boolean,
-      default: false
-    },
-    playlistLoop: {
-      type: Boolean,
-      default: false
-    },
-    forceListType: {
-      type: String,
-      default: null
-    },
-    appearance: {
-      type: String,
-      required: true
-    },
-    showVideoWithLastViewedPlaylist: {
-      type: Boolean,
-      default: false
-    },
-    alwaysShowAddToPlaylistButton: {
-      type: Boolean,
-      default: false,
-    },
-    quickBookmarkButtonEnabled: {
-      type: Boolean,
-      default: true,
-    },
-    canMoveVideoUp: {
-      type: Boolean,
-      default: false,
-    },
-    canMoveVideoDown: {
-      type: Boolean,
-      default: false,
-    },
-    canRemoveFromPlaylist: {
-      type: Boolean,
-      default: false,
-    },
-    layout: {
-      type: String,
-      default: 'list',
-    },
-    showGrabBar: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'],
-  setup: function () {
-    const { t, locale } = useI18n()
-
-    return { t, currentLocale: locale }
-  },
-  data: function () {
-    return {
-      id: '',
-      title: '',
-      channelName: null,
-      channelId: null,
-      viewCount: 0,
-      parsedViewCount: '',
-      uploadedTime: '',
-      lengthSeconds: 0,
-      duration: '',
-      description: '',
-      published: undefined,
-      isLive: false,
-      is4k: false,
-      is8k: false,
-      isNew: false,
-      isVr180: false,
-      isVr360: false,
-      is3D: false,
-      hasCaptions: false,
-      isUpcoming: false,
-      isPremium: false,
-      hideViews: false,
-      addToPlaylistPromptCloseCallback: null,
-      debounceGetDeArrowThumbnail: null,
-      deArrowTogglePinned: false,
-      showDeArrowTitle: false,
-      showDeArrowThumbnail: false,
-    }
-  },
-  computed: {
-    historyEntry: function () {
-      return this.$store.getters.getHistoryCacheById[this.id]
-    },
-
-    historyEntryExists: function () {
-      return typeof this.historyEntry !== 'undefined'
-    },
-
-    watchProgress: function () {
-      if (!this.historyEntryExists || !this.watchedProgressSavingEnabled) {
-        return 0
-      }
-
-      return this.historyEntry.watchProgress
-    },
-
-    listType: function () {
-      return this.$store.getters.getListType
-    },
-
-    effectiveListTypeIsList: function () {
-      return (this.listType === 'list' || this.forceListType === 'list') && this.forceListType !== 'grid'
-    },
-
-    thumbnailPreference: function () {
-      return this.$store.getters.getThumbnailPreference
-    },
-
-    blurThumbnails: function () {
-      return this.$store.getters.getBlurThumbnails
-    },
-
-    blurThumbnailsStyle: function () {
-      return this.blurThumbnails ? 'blur(20px)' : null
-    },
-
-    backendPreference: function () {
-      return this.$store.getters.getBackendPreference
-    },
-
-    currentInvidiousInstanceUrl: function () {
-      return this.$store.getters.getCurrentInvidiousInstanceUrl
-    },
-
-    showPlaylists: function () {
-      return !this.$store.getters.getHidePlaylists
-    },
-
-    inHistory: function () {
-      // When in the history page, showing relative dates isn't very useful.
-      // We want to show the exact date instead
-      return this.$route.name === 'history'
-    },
-
-    inSubscriptions: function () {
-      return this.$route.name === 'subscriptions' || this.$route.name === 'default'
-    },
-
-    inUserPlaylist: function () {
-      return this.playlistTypeFinal === 'user' || this.selectedUserPlaylist != null
-    },
-
-    selectedUserPlaylist: function () {
-      if (this.playlistIdFinal == null) { return null }
-      if (this.playlistIdFinal === '') { return null }
-
-      return this.$store.getters.getPlaylist(this.playlistIdFinal)
-    },
-
-    playlistSharable() {
-      // `playlistId` can be undefined
-      // User playlist ID should not be shared
-      return this.playlistIdFinal && this.playlistIdFinal.length !== 0 && !this.inUserPlaylist
-    },
-
-    invidiousUrl: function () {
-      let videoUrl = `${this.currentInvidiousInstanceUrl}/watch?v=${this.id}`
-      // `playlistId` can be undefined
-      if (this.playlistSharable) {
-        // `index` seems can be ignored
-        videoUrl += `&list=${this.playlistIdFinal}`
-      }
-      return videoUrl
-    },
-
-    invidiousChannelUrl: function () {
-      return `${this.currentInvidiousInstanceUrl}/channel/${this.channelId}`
-    },
-
-    youtubeUrl: function () {
-      let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
-      if (this.playlistSharable) {
-        // `index` seems can be ignored
-        videoUrl += `&list=${this.playlistIdFinal}`
-      }
-      return videoUrl
-    },
-
-    youtubeShareUrl: function () {
-      const videoUrl = `https://youtu.be/${this.id}`
-      if (this.playlistSharable) {
-        // `index` seems can be ignored
-        return `${videoUrl}?list=${this.playlistIdFinal}`
-      }
-      return videoUrl
-    },
-
-    youtubeChannelUrl: function () {
-      return `https://youtube.com/channel/${this.channelId}`
-    },
-
-    youtubeEmbedUrl: function () {
-      return `https://www.youtube-nocookie.com/embed/${this.id}`
-    },
-
-    progressPercentage: function () {
-      if (typeof this.lengthSeconds !== 'number' || this.lengthSeconds === 0) {
-        return 0
-      }
-      const percentage = (Math.ceil(this.watchProgress) / this.lengthSeconds) * 100
-      return Math.min(percentage, 100)
-    },
-
-    hideSharingActions: function() {
-      return this.$store.getters.getHideSharingActions
-    },
-
-    showInvidiousShareOptions: function () {
-      return this.backendPreference === 'invidious' || this.$store.getters.getBackendFallback
-    },
-
-    dropdownOptions: function () {
-      const options = [
-        {
-          label: this.historyEntryExists
-            ? this.t('Video.Remove From History')
-            : this.t('Video.Mark As Watched'),
-          value: 'history'
-        }
-      ]
-      if (!this.hideSharingActions) {
-        options.push(
-          {
-            type: 'divider'
-          },
-          {
-            label: this.t('Video.Copy YouTube Link'),
-            value: 'copyYoutube'
-          },
-          {
-            label: this.t('Video.Copy YouTube Embedded Player Link'),
-            value: 'copyYoutubeEmbed'
-          },
-          ...this.showInvidiousShareOptions
-            ? [{
-                label: this.t('Video.Copy Invidious Link'),
-                value: 'copyInvidious'
-              }]
-            : [],
-          {
-            type: 'divider'
-          },
-          {
-            label: this.t('Video.Open in YouTube'),
-            value: 'openYoutube'
-          },
-          {
-            label: this.t('Video.Open YouTube Embedded Player'),
-            value: 'openYoutubeEmbed'
-          },
-          ...this.showInvidiousShareOptions
-            ? [{
-                label: this.t('Video.Open in Invidious'),
-                value: 'openInvidious'
-              }]
-            : [],
-        )
-        if (this.channelId !== null) {
-          options.push(
-            {
-              type: 'divider'
-            },
-            {
-              label: this.t('Video.Copy YouTube Channel Link'),
-              value: 'copyYoutubeChannel'
-            },
-            ...this.showInvidiousShareOptions
-              ? [{
-                  label: this.t('Video.Copy Invidious Channel Link'),
-                  value: 'copyInvidiousChannel'
-                }]
-              : [],
-            {
-              type: 'divider'
-            },
-            {
-              label: this.t('Video.Open Channel in YouTube'),
-              value: 'openYoutubeChannel'
-            },
-            ...this.showInvidiousShareOptions
-              ? [{
-                  label: this.t('Video.Open Channel in Invidious'),
-                  value: 'openInvidiousChannel'
-                }]
-              : [],
-          )
-        }
-      }
-
-      if (this.channelId !== null && !this.inSubscriptions) {
-        const hiddenChannels = JSON.parse(this.$store.getters.getChannelsHidden)
-        const channelShouldBeHidden = hiddenChannels.some(c => c.name === this.channelId)
-
-        options.push(
-          {
-            type: 'divider'
-          },
-
-          channelShouldBeHidden
-            ? {
-                label: this.t('Video.Unhide Channel'),
-                value: 'unhideChannel'
-              }
-            : {
-                label: this.t('Video.Hide Channel'),
-                value: 'hideChannel'
-              }
-        )
-      }
-
-      return options
-    },
-
-    thumbnail: function () {
-      if (this.thumbnailPreference === 'hidden') {
-        return thumbnailPlaceholder
-      }
-
-      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail != null) {
-        return this.deArrowCache.thumbnail
-      }
-
-      let baseUrl
-      if (this.backendPreference === 'invidious') {
-        baseUrl = this.currentInvidiousInstanceUrl
-      } else {
-        baseUrl = 'https://i.ytimg.com'
-      }
-
-      switch (this.thumbnailPreference) {
-        case 'start':
-          return `${baseUrl}/vi/${this.id}/mq1.jpg`
-        case 'middle':
-          return `${baseUrl}/vi/${this.id}/mq2.jpg`
-        case 'end':
-          return `${baseUrl}/vi/${this.id}/mq3.jpg`
-        default:
-          return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
-      }
-    },
-
-    hideVideoViews: function () {
-      return this.$store.getters.getHideVideoViews
-    },
-
-    addWatchedStyle: function () {
-      return this.historyEntryExists && !this.inHistory
-    },
-
-    externalPlayer: function () {
-      return this.$store.getters.getExternalPlayer
-    },
-
-    externalPlayerIsDefaultViewingMode: function () {
-      return process.env.IS_ELECTRON && this.externalPlayer !== '' && this.$store.getters.getDefaultViewingMode === 'external_player'
-    },
-
-    defaultPlayback: function () {
-      return this.$store.getters.getDefaultPlayback
-    },
-
-    watchedProgressSavingEnabled: function () {
-      return ['auto', 'semi-auto'].includes(this.$store.getters.getWatchedProgressSavingMode)
-    },
-    rememberHistory: function () {
-      return this.$store.getters.getRememberHistory
-    },
-
-    saveVideoHistoryWithLastViewedPlaylist: function () {
-      return this.$store.getters.getSaveVideoHistoryWithLastViewedPlaylist
-    },
-
-    showDistractionFreeTitles: function () {
-      return this.$store.getters.getShowDistractionFreeTitles
-    },
-
-    displayTitle: function () {
-      let title
-      if (this.showDeArrowTitle && this.deArrowCache?.title) {
-        title = this.deArrowCache.title
-      } else {
-        title = this.title
-      }
-
-      if (this.showDistractionFreeTitles) {
-        return toDistractionFreeTitle(title)
-      } else {
-        return title
-      }
-    },
-
-    displayDuration: function () {
-      if (this.useDeArrowTitles && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
-        return formatDurationAsTimestamp(this.deArrowCache.videoDuration)
-      }
-      return this.duration
-    },
-
-    playlistIdTypePairFinal() {
-      if (this.playlistId) {
-        return {
-          playlistId: this.playlistId,
-          playlistType: this.playlistType,
-          playlistItemId: this.playlistItemId,
-        }
-      }
-
-      // Get playlist ID from history ONLY if option enabled
-      if (!this.showVideoWithLastViewedPlaylist) { return }
-      if (!this.saveVideoHistoryWithLastViewedPlaylist) { return }
-
-      return {
-        playlistId: this.historyEntry?.lastViewedPlaylistId,
-        playlistType: this.historyEntry?.lastViewedPlaylistType,
-        playlistItemId: this.historyEntry?.lastViewedPlaylistItemId,
-      }
-    },
-
-    playlistIdFinal: function () {
-      return this.playlistIdTypePairFinal?.playlistId
-    },
-    playlistTypeFinal: function () {
-      return this.playlistIdTypePairFinal?.playlistType
-    },
-    playlistItemIdFinal: function () {
-      return this.playlistIdTypePairFinal?.playlistItemId
-    },
-
-    quickBookmarkPlaylist() {
-      return this.$store.getters.getQuickBookmarkPlaylist
-    },
-    isQuickBookmarkEnabled() {
-      return this.quickBookmarkPlaylist != null
-    },
-    isInQuickBookmarkPlaylist: function () {
-      if (!this.isQuickBookmarkEnabled) { return false }
-
-      // Accessing a reactive property has a negligible amount of overhead,
-      // however as we know that some users have playlists that have more than 10k items in them
-      // it adds up quickly, especially as there are usually lots of ft-list-video instances active at the same time.
-      // So create a temporary variable outside of the array, so we only have to do it once.
-      // Also the search is retriggered every time any playlist is modified.
-      const id = this.id
-
-      return this.quickBookmarkPlaylist.videos.some((video) => {
-        return video.videoId === id
-      })
-    },
-    quickBookmarkIconText: function () {
-      if (!this.isQuickBookmarkEnabled) { return false }
-
-      const translationProperties = {
-        playlistName: this.quickBookmarkPlaylist.playlistName,
-      }
-      return this.isInQuickBookmarkPlaylist
-        ? this.t('User Playlists.Remove from Favorites', translationProperties)
-        : this.t('User Playlists.Add to Favorites', translationProperties)
-    },
-    quickBookmarkIconTheme: function () {
-      return this.isInQuickBookmarkPlaylist ? 'base favorite' : 'base'
-    },
-
-    watchVideoRouterLink() {
-    // For `router-link` attribute `to`
-      if (!this.externalPlayerIsDefaultViewingMode) {
-        return {
-          path: `/watch/${this.id}`,
-          query: this.watchPageLinkQuery,
-        }
-      } else {
-        return {}
-      }
-    },
-
-    watchPageLinkQuery() {
-      const query = {}
-      if (this.playlistIdFinal) { query.playlistId = this.playlistIdFinal }
-      if (this.playlistTypeFinal) { query.playlistType = this.playlistTypeFinal }
-      if (this.playlistItemIdFinal) { query.playlistItemId = this.playlistItemIdFinal }
-      return query
-    },
-
-    useDeArrowTitles: function () {
-      return this.$store.getters.getUseDeArrowTitles
-    },
-    useDeArrowThumbnails: function () {
-      return this.$store.getters.getUseDeArrowThumbnails
-    },
-    deArrowChangedContent: function () {
-      return (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
-        (this.useDeArrowTitles && this.deArrowCache?.title &&
-          this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
-    },
-
-    deArrowToggleTitle: function() {
-      return this.deArrowTogglePinned
-        ? this.t('Video.DeArrow.Show Modified Details')
-        : this.t('Video.DeArrow.Show Original Details')
-    },
-
-    deArrowCache: function () {
-      return this.$store.getters.getDeArrowCache[this.id]
-    },
-
-    disableChannelLinks: function () {
-      return this.$store.getters.getDisableChannelLinks
-    },
-  },
-  watch: {
-    showAddToPlaylistPrompt(value) {
-      if (value) { return }
-      // Execute on prompt close
-
-      if (this.addToPlaylistPromptCloseCallback == null) { return }
-      this.addToPlaylistPromptCloseCallback()
-    },
-  },
-  created: function () {
-    this.parseVideoData()
-
-    this.showDeArrowTitle = this.useDeArrowTitles
-    this.showDeArrowThumbnail = this.useDeArrowThumbnails
-
-    if ((this.showDeArrowTitle || this.showDeArrowThumbnail) && !this.deArrowCache) {
-      this.fetchDeArrowData()
-    }
-
-    if (this.showDeArrowThumbnail && this.deArrowCache && this.deArrowCache.thumbnail == null) {
-      if (this.debounceGetDeArrowThumbnail == null) {
-        this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
-      }
-
-      this.debounceGetDeArrowThumbnail()
-    }
-  },
-  methods: {
-    handleWatchPageLinkClick: function() {
-      if (this.externalPlayerIsDefaultViewingMode) {
-        this.handleExternalPlayer()
-      }
-    },
-    fetchDeArrowThumbnail: async function() {
-      if (this.thumbnailPreference === 'hidden') { return }
-      const videoId = this.id
-      const thumbnail = await deArrowThumbnail(videoId, this.deArrowCache.thumbnailTimestamp)
-      if (thumbnail) {
-        const deArrowCacheClone = deepCopy(this.deArrowCache)
-        deArrowCacheClone.thumbnail = thumbnail
-        this.$store.commit('addThumbnailToDeArrowCache', deArrowCacheClone)
-      }
-    },
-    fetchDeArrowData: async function() {
-      const videoId = this.id
-      const data = await deArrowData(this.id)
-      const cacheData = { videoId, title: null, videoDuration: null, thumbnail: null, thumbnailTimestamp: null }
-      if (Array.isArray(data?.titles) && data.titles.length > 0 && (data.titles[0].locked || data.titles[0].votes >= 0)) {
-        // remove dearrow formatting markers https://github.com/ajayyy/DeArrow/blob/0da266485be902fe54259214c3cd7c942f2357c5/src/titles/titleFormatter.ts#L460
-        cacheData.title = data.titles[0].title.replaceAll(/(^|\s)>(\S)/g, '$1$2').trim()
-      }
-      if (Array.isArray(data?.thumbnails) && data.thumbnails.length > 0 && (data.thumbnails[0].locked || data.thumbnails[0].votes >= 0)) {
-        cacheData.thumbnailTimestamp = data.thumbnails.at(0).timestamp
-      } else if (data?.videoDuration != null) {
-        cacheData.thumbnailTimestamp = data.videoDuration * data.randomTime
-      }
-      cacheData.videoDuration = data?.videoDuration ? Math.floor(data.videoDuration) : null
-
-      // Save data to cache whether data available or not to prevent duplicate requests
-      this.$store.commit('addVideoToDeArrowCache', cacheData)
-
-      // fetch dearrow thumbnails if enabled
-      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail === null) {
-        if (this.debounceGetDeArrowThumbnail == null) {
-          this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
-        }
-
-        this.debounceGetDeArrowThumbnail()
-      }
-    },
-    toggleDeArrow() {
-      if (!this.deArrowChangedContent) {
-        return
-      }
-
-      this.deArrowTogglePinned = !this.deArrowTogglePinned
-
-      if (this.useDeArrowTitles) {
-        this.showDeArrowTitle = !this.showDeArrowTitle
-      }
-      if (this.useDeArrowThumbnails) {
-        this.showDeArrowThumbnail = !this.showDeArrowThumbnail
-      }
-    },
-
-    handleExternalPlayer: function () {
-      this.$emit('pause-player')
-
-      const payload = {
-        videoId: this.id,
-        playlistId: this.playlistIdFinal,
-        startTime: this.watchProgress,
-        playbackRate: this.defaultPlayback,
-        playlistIndex: this.playlistIndex,
-        playlistReverse: this.playlistReverse,
-        playlistShuffle: this.playlistShuffle,
-        playlistLoop: this.playlistLoop,
-      }
-      // Only play video in non playlist mode when user playlist detected
-      if (this.inUserPlaylist) {
-        Object.assign(payload, {
-          playlistId: null,
-          playlistIndex: null,
-          playlistReverse: null,
-          playlistShuffle: null,
-          playlistLoop: null,
-        })
-      }
-      if (process.env.IS_ELECTRON) {
-        window.ftElectron.openInExternalPlayer(payload)
-      }
-
-      if (this.rememberHistory) {
-        this.markAsWatched()
-      }
-    },
-
-    handleOptionsClick: function (option) {
-      switch (option) {
-        case 'history':
-          if (this.historyEntryExists) {
-            this.removeFromWatched()
-          } else {
-            this.markAsWatched()
-          }
-          break
-        case 'copyYoutube':
-          copyToClipboard(this.youtubeShareUrl, { messageOnSuccess: this.t('Share.YouTube URL copied to clipboard') })
-          break
-        case 'openYoutube':
-          openExternalLink(this.youtubeUrl)
-          break
-        case 'copyYoutubeEmbed':
-          copyToClipboard(this.youtubeEmbedUrl, { messageOnSuccess: this.t('Share.YouTube Embed URL copied to clipboard') })
-          break
-        case 'openYoutubeEmbed':
-          openExternalLink(this.youtubeEmbedUrl)
-          break
-        case 'copyInvidious':
-          copyToClipboard(this.invidiousUrl, { messageOnSuccess: this.t('Share.Invidious URL copied to clipboard') })
-          break
-        case 'openInvidious':
-          openExternalLink(this.invidiousUrl)
-          break
-        case 'copyYoutubeChannel':
-          copyToClipboard(this.youtubeChannelUrl, { messageOnSuccess: this.t('Share.YouTube Channel URL copied to clipboard') })
-          break
-        case 'openYoutubeChannel':
-          openExternalLink(this.youtubeChannelUrl)
-          break
-        case 'copyInvidiousChannel':
-          copyToClipboard(this.invidiousChannelUrl, { messageOnSuccess: this.t('Share.Invidious Channel URL copied to clipboard') })
-          break
-        case 'openInvidiousChannel':
-          openExternalLink(this.invidiousChannelUrl)
-          break
-        case 'hideChannel':
-          this.hideChannel(this.channelName, this.channelId)
-          break
-        case 'unhideChannel':
-          this.unhideChannel(this.channelName, this.channelId)
-          break
-      }
-    },
-
-    parseVideoData: function () {
-      this.id = this.data.videoId
-      this.title = this.data.title
-      // this.thumbnail = this.data.videoThumbnails[4].url
-
-      this.channelName = this.data.author ?? null
-      this.channelId = this.data.authorId ?? null
-
-      if ((this.data.lengthSeconds === '' || this.data.lengthSeconds === '0:00') && this.historyEntryExists) {
-        this.lengthSeconds = this.historyEntry.lengthSeconds
-        this.duration = formatDurationAsTimestamp(this.historyEntry.lengthSeconds)
-      } else {
-        this.lengthSeconds = this.data.lengthSeconds
-        this.duration = formatDurationAsTimestamp(this.data.lengthSeconds)
-      }
-
-      this.description = this.data.description
-      this.isLive = this.data.liveNow || this.data.lengthSeconds === 'undefined'
-      this.isUpcoming = this.data.isUpcoming || this.data.premiere
-      this.is4k = this.data.is4k
-      this.is8k = this.data.is8k
-      this.isNew = this.data.isNew
-      this.isVr180 = this.data.isVr180
-      this.isVr360 = this.data.isVr360
-      this.is3D = this.data.is3d
-      this.hasCaptions = this.data.hasCaptions
-      this.isPremium = this.data.premium || false
-      this.viewCount = this.data.viewCount
-
-      if (typeof this.data.premiereDate !== 'undefined') {
-        let premiereDate = this.data.premiereDate
-
-        // premiereDate will be a string when the subscriptions are restored from the cache
-        if (typeof premiereDate === 'string') {
-          premiereDate = new Date(premiereDate)
-        }
-        this.uploadedTime = premiereDate.toLocaleString([this.currentLocale, 'en'])
-        this.published = premiereDate.getTime()
-      } else if (typeof (this.data.premiereTimestamp) !== 'undefined') {
-        this.uploadedTime = new Date(this.data.premiereTimestamp * 1000).toLocaleString([this.currentLocale, 'en'])
-        this.published = this.data.premiereTimestamp * 1000
-      } else if (typeof this.data.published === 'number' && !this.isLive) {
-        this.published = this.data.published
-
-        if (this.inHistory) {
-          this.uploadedTime = new Date(this.data.published).toLocaleDateString([this.currentLocale, 'en'])
-        } else {
-          // Use 30 days per month, just like calculatePublishedDate
-          this.uploadedTime = getRelativeTimeFromDate(this.data.published, false)
-        }
-      }
-
-      if (this.hideVideoViews) {
-        this.hideViews = true
-      } else if (typeof (this.data.viewCount) !== 'undefined' && this.data.viewCount !== null) {
-        this.parsedViewCount = formatNumber(this.data.viewCount)
-      } else if (typeof (this.data.viewCountText) !== 'undefined') {
-        this.parsedViewCount = this.data.viewCountText.replace(' views', '')
-      } else {
-        this.hideViews = true
-      }
-    },
-
-    markAsWatched: function () {
-      const videoData = {
-        videoId: this.id,
-        title: this.title,
-        author: this.channelName,
-        authorId: this.channelId,
-        published: this.published,
-        description: this.description,
-        viewCount: this.viewCount,
-        lengthSeconds: this.data.lengthSeconds,
-        watchProgress: 0,
-        timeWatched: Date.now(),
-        isLive: false,
-        type: 'video'
-      }
-      this.updateHistory(videoData)
-
-      if (!this.historyEntryExists) {
-        showToast(this.t('Video.Video has been marked as watched'))
-      }
-    },
-
-    removeFromWatched: function () {
-      this.removeFromHistory(this.id)
-
-      showToast(this.t('Video.Video has been removed from your history'))
-    },
-
-    togglePlaylistPrompt: function () {
-      const videoData = {
-        videoId: this.id,
-        title: this.title,
-        author: this.channelName,
-        authorId: this.channelId,
-        description: this.description,
-        viewCount: this.viewCount,
-        lengthSeconds: this.data.lengthSeconds,
-        published: this.published,
-        premiereDate: this.data.premiereDate,
-        premiereTimestamp: this.data.premiereTimestamp,
-      }
-
-      this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
-
-      // Focus when prompt closed
-      this.addToPlaylistPromptCloseCallback = () => {
-        // Run once only
-        this.addToPlaylistPromptCloseCallback = null
-      }
-    },
-
-    hideChannel: function(channelName, channelId) {
-      const hiddenChannels = JSON.parse(this.$store.getters.getChannelsHidden)
-      hiddenChannels.push({ name: channelId, preferredName: channelName })
-      this.updateChannelsHidden(JSON.stringify(hiddenChannels))
-
-      showToast(this.t('Channel Hidden', { channel: channelName }))
-    },
-
-    unhideChannel: function(channelName, channelId) {
-      const hiddenChannels = JSON.parse(this.$store.getters.getChannelsHidden)
-      this.updateChannelsHidden(JSON.stringify(hiddenChannels.filter(c => c.name !== channelId)))
-
-      showToast(this.t('Channel Unhidden', { channel: channelName }))
-    },
-
-    toggleQuickBookmarked() {
-      if (!this.isQuickBookmarkEnabled) {
-        // This should be prevented by UI
-        return
-      }
-
-      if (this.isInQuickBookmarkPlaylist) {
-        this.removeFromQuickBookmarkPlaylist()
-      } else {
-        this.addToQuickBookmarkPlaylist()
-      }
-    },
-    addToQuickBookmarkPlaylist() {
-      const videoData = {
-        videoId: this.id,
-        title: this.title,
-        author: this.channelName,
-        authorId: this.channelId,
-        lengthSeconds: this.data.lengthSeconds,
-        published: this.published,
-        premiereDate: this.data.premiereDate,
-        premiereTimestamp: this.data.premiereTimestamp,
-      }
-
-      this.addVideo({
-        _id: this.quickBookmarkPlaylist._id,
-        videoData,
-      })
-
-      // TODO: Maybe show playlist name
-      showToast(this.t('Video.Video has been saved'))
-    },
-    removeFromQuickBookmarkPlaylist() {
-      this.removeVideo({
-        _id: this.quickBookmarkPlaylist._id,
-        // Remove all playlist items with same videoId
-        videoId: this.id,
-      })
-
-      // TODO: Maybe show playlist name
-      showToast(this.t('Video.Video has been removed from your saved list'))
-    },
-    moveVideoUp: function() {
-      this.$emit('move-video-up', this.id, this.playlistItemId)
-    },
-
-    moveVideoDown: function() {
-      this.$emit('move-video-down', this.id, this.playlistItemId)
-    },
-
-    removeFromPlaylist: function() {
-      this.$emit('remove-from-playlist', this.id, this.playlistItemId)
-    },
-
-    onDragStart(event) {
-      // Prevent drag event except links
-      if (event.target.nodeName === 'A') { return }
-
-      event.preventDefault()
-      event.stopPropagation()
-    },
-
-    ...mapActions([
-      'updateHistory',
-      'removeFromHistory',
-      'updateChannelsHidden',
-      'showAddToPlaylistPromptForManyVideos',
-      'addVideo',
-      'removeVideo',
-    ])
-  }
-})
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
deleted file mode 100644
index 8620f3e492a4d..0000000000000
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<template>
-  <div
-    class="ft-list-video ft-list-item"
-    :class="{
-      list: effectiveListTypeIsList,
-      grid: !effectiveListTypeIsList,
-      [appearance]: true,
-      watched: addWatchedStyle
-    }"
-  >
-    <div
-      v-if="showGrabBar"
-      class="grabBar"
-    >
-      <font-awesome-icon
-        :icon="['fas', 'fa-bars']"
-      />
-    </div>
-    <div
-      class="videoThumbnail"
-      draggable="true"
-      @dragstart="onDragStart"
-    >
-      <router-link
-        class="thumbnailLink"
-        tabindex="-1"
-        :to="watchVideoRouterLink"
-        @click="handleWatchPageLinkClick"
-      >
-        <img
-          :src="thumbnail"
-          class="thumbnailImage"
-          alt=""
-          :style="{filter: blurThumbnailsStyle}"
-        >
-      </router-link>
-      <div
-        v-if="isLive || isUpcoming || (displayDuration !== '' && displayDuration !== '0:00')"
-        class="videoDuration"
-        :class="{
-          live: isLive,
-          upcoming: isUpcoming
-        }"
-      >
-        {{ isLive ? $t("Video.Live") : (isUpcoming ? $t("Video.Upcoming") : displayDuration) }}
-      </div>
-      <ft-icon-button
-        v-if="externalPlayer !== '' && !externalPlayerIsDefaultViewingMode"
-        :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
-        :icon="['fas', 'external-link-alt']"
-        class="externalPlayerIcon"
-        theme="base"
-        :padding="appearance === `watchPlaylistItem` ? 6 : 7"
-        :size="appearance === `watchPlaylistItem` ? 12 : 16"
-        draggable="true"
-        @click="handleExternalPlayer"
-        @dragstart="onDragStart"
-      />
-      <span
-        class="playlistIcons"
-        draggable="true"
-        @dragstart="onDragStart"
-      >
-        <ft-icon-button
-          v-if="showPlaylists"
-          :title="$t('User Playlists.Add to Playlist')"
-          :icon="['fas', 'plus']"
-          class="addToPlaylistIcon"
-          :class="alwaysShowAddToPlaylistButton ? 'alwaysVisible' : ''"
-          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
-          :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="togglePlaylistPrompt"
-        />
-        <ft-icon-button
-          v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
-          :title="quickBookmarkIconText"
-          :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
-          class="quickBookmarkVideoIcon"
-          :class="{
-            bookmarked: isInQuickBookmarkPlaylist,
-            alwaysVisible: alwaysShowAddToPlaylistButton,
-          }"
-          :theme="quickBookmarkIconTheme"
-          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
-          :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="toggleQuickBookmarked"
-        />
-        <ft-icon-button
-          v-if="inUserPlaylist && canMoveVideoUp"
-          :title="$t('User Playlists.Move Video Up')"
-          :icon="effectiveListTypeIsList ? ['fas', 'arrow-up'] : ['fas', 'arrow-left']"
-          class="upArrowIcon"
-          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
-          :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="moveVideoUp"
-        />
-        <ft-icon-button
-          v-if="inUserPlaylist && canMoveVideoDown"
-          :title="$t('User Playlists.Move Video Down')"
-          :icon="effectiveListTypeIsList ? ['fas', 'arrow-down'] : ['fas', 'arrow-right']"
-          class="downArrowIcon"
-          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
-          :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="moveVideoDown"
-        />
-        <ft-icon-button
-          v-if="inUserPlaylist && canRemoveFromPlaylist"
-          :title="$t('User Playlists.Remove from Playlist')"
-          :icon="['fas', 'trash']"
-          class="trashIcon"
-          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
-          :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="removeFromPlaylist"
-        />
-      </span>
-      <div
-        v-if="addWatchedStyle"
-        class="videoWatched"
-      >
-        {{ $t("Video.Watched") }}
-      </div>
-      <div
-        v-if="historyEntryExists"
-        class="watchedProgressBar"
-        :style="{inlineSize: progressPercentage + '%'}"
-      />
-    </div>
-    <div
-      class="info"
-      draggable="true"
-      @dragstart="onDragStart"
-    >
-      <router-link
-        class="title"
-        :to="watchVideoRouterLink"
-        @click="handleWatchPageLinkClick"
-      >
-        <h3
-          class="h3Title"
-          dir="auto"
-        >
-          {{ displayTitle }}
-        </h3>
-      </router-link>
-      <div class="infoLine">
-        <component
-          :is="disableChannelLinks ? 'span' : 'router-link'"
-          v-if="channelId !== null"
-          class="channelName"
-          dir="auto"
-          :to="`/channel/${channelId}`"
-        >
-          {{ channelName }}
-        </component>
-        <bdi v-else-if="channelName !== null">
-          {{ channelName }}
-        </bdi>
-        <span
-          v-if="!isLive && !isUpcoming && !isPremium && !hideViews && viewCount != null"
-          class="viewCount"
-        >
-          <template v-if="channelId !== null || channelName !== null"> • </template>
-          {{ $t('Global.Counts.View Count', {count: parsedViewCount}, viewCount) }}
-        </span>
-        <span
-          v-if="uploadedTime !== '' && !isLive"
-          class="uploadedTime"
-        > • {{ uploadedTime }}</span>
-        <span
-          v-if="isLive && !hideViews"
-          class="viewCount"
-        > • {{ $t('Global.Counts.Watching Count', {count: parsedViewCount}, viewCount) }}</span>
-      </div>
-      <div
-        v-if="is4k || hasCaptions || is8k || isNew || isVr180 || isVr360 || is3D"
-        class="videoTagLine"
-      >
-        <div
-          v-if="isNew"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.New')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.New') }}
-        </div>
-        <div
-          v-if="is4k"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.4K')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.4K') }}
-        </div>
-        <div
-          v-if="is8k"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.8K')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.8K') }}
-        </div>
-        <div
-          v-if="isVr180"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.VR180')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.VR180') }}
-        </div>
-        <div
-          v-if="isVr360"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.360 Video')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.360 Video') }}
-        </div>
-        <div
-          v-if="is3D"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.3D')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.3D') }}
-        </div>
-        <div
-          v-if="hasCaptions"
-          class="videoTag"
-          :aria-label="$t('Search Listing.Label.Closed Captions')"
-          role="img"
-        >
-          {{ $t('Search Listing.Label.Subtitles') }}
-        </div>
-      </div>
-      <div class="buttonStack">
-        <ft-icon-button
-          class="optionsButton"
-          :icon="['fas', 'ellipsis-v']"
-          :title="$t('Video.More Options')"
-          theme="base-no-default"
-          :size="16"
-          :use-shadow="false"
-          dropdown-position-x="left"
-          :dropdown-options="dropdownOptions"
-          @click="handleOptionsClick"
-        />
-        <button
-          v-if="deArrowChangedContent || deArrowTogglePinned"
-          :title="deArrowToggleTitle"
-          class="optionsButton deArrowToggleButton"
-          :class="{ alwaysVisible: deArrowTogglePinned }"
-          @click="toggleDeArrow"
-        >
-          <font-awesome-icon
-            class="deArrowToggleIcon"
-            :icon="['far', 'dot-circle']"
-          />
-        </button>
-      </div>
-      <p
-        v-if="description && effectiveListTypeIsList && appearance === 'result'"
-        v-safer-html="description"
-        class="description"
-        dir="auto"
-      />
-      <div
-        v-if="effectiveListTypeIsList"
-        class="restArea"
-      >
-        &nbsp;
-      </div>
-    </div>
-  </div>
-</template>
-
-<script src="./ft-list-video.js" />
-<style scoped src="./ft-list-video.scss" lang="scss" />