Show no of playlist a video already added to on add playlist button

src/renderer/components/ft-element-list/ft-element-list.js

@@ -59,6 +59,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     playlistItemsLength: {
       type: Number,
       default: 0

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -18,6 +18,7 @@
       :can-move-video-up="canMoveVideoUp && index > 0"
       :can-move-video-down="canMoveVideoDown && index < playlistItemsLength - 1"
       :can-remove-from-playlist="canRemoveFromPlaylist"
+      :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
       :search-query-text="searchQueryText"
       :playlist-id="playlistId"
       :playlist-type="playlistType"

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -16,6 +16,10 @@ export default defineComponent({
       type: Array,
       default: () => ['fas', 'ellipsis-v']
     },
+    counterValue: {
+      type: Number,
+      default: 0,
+    },
     disabled: {
       type: Boolean,
       default: false

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -106,6 +106,26 @@
   }
 }
 
+.iconCounter {
+  // Reset
+  transform: none;
+  inset-block-start: 0;
+  inset-inline: 0 auto;
+  // Our style
+  translate: -40% -40%;
+  box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
+  font-size: 12px;
+
+  &.base {
+    background-color: var(--card-bg-color);
+    color: var(--primary-text-color);
+  }
+
+  body[dir='rtl'] & {
+    translate: 40% -40%;
+  }
+}
+
 .disabled {
   opacity: 0.5;
   pointer-events: auto;

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -1,28 +1,44 @@
 <template>
   <div class="ftIconButton">
-    <font-awesome-icon
-      ref="iconButton"
-      class="iconButton"
-      :title="title"
-      :icon="icon"
-      :class="{
-        [theme]: true,
-        shadow: useShadow,
-        disabled
-      }"
+    <font-awesome-layers
       :style="{
-        padding: padding + 'px',
-        fontSize: size + 'px'
+        width: `${size + padding * 2}px`,
+        height: `${size + padding * 2}px`,
       }"
-      tabindex="0"
-      role="button"
-      :aria-disabled="disabled"
-      :aria-expanded="dropdownShown"
-      @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
-      @keydown.enter.prevent="handleIconClick"
-      @keydown.space.prevent="handleIconClick"
-    />
+    >
+      <font-awesome-icon
+        ref="iconButton"
+        class="iconButton"
+        :title="title"
+        :icon="icon"
+        :class="{
+          [theme]: true,
+          shadow: useShadow,
+          disabled
+        }"
+        :style="{
+          padding: padding + 'px',
+          fontSize: size + 'px'
+        }"
+        tabindex="0"
+        role="button"
+        :aria-disabled="disabled"
+        :aria-expanded="dropdownShown"
+        @click="handleIconClick"
+        @mousedown="handleIconMouseDown"
+        @keydown.enter.prevent="handleIconClick"
+        @keydown.space.prevent="handleIconClick"
+      />
+      <font-awesome-layers-text
+        v-if="counterValue > 0"
+        class="iconCounter"
+        :class="{
+          [theme]: true,
+        }"
+        counter
+        :value="counterValue"
+      />
+    </font-awesome-layers>
     <template
       v-if="dropdownShown"
     >

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

@@ -84,6 +84,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   data: function () {

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -26,6 +26,7 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"
         @remove-from-playlist="removeFromPlaylist"

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js

@@ -71,6 +71,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     useChannelsHiddenPreference: {
       type: Boolean,
       default: false,

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue

@@ -23,6 +23,7 @@
       :can-move-video-up="canMoveVideoUp"
       :can-move-video-down="canMoveVideoDown"
       :can-remove-from-playlist="canRemoveFromPlaylist"
+      :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
       @pause-player="pausePlayer"
       @move-video-up="moveVideoUp"
       @move-video-down="moveVideoDown"

src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js

@@ -67,6 +67,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     videoIndex: {
       type: Number,
       default: -1

src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue

@@ -40,6 +40,7 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
         @pause-player="pausePlayer"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"

src/renderer/components/ft-list-video/ft-list-video.js

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtPlaylistAddVideoButton from '../ft-playlist-add-video-button/ft-playlist-add-video-button.vue'
 import { mapActions } from 'vuex'
 import {
   copyToClipboard,
@@ -17,7 +18,8 @@ import debounce from 'lodash.debounce'
 export default defineComponent({
   name: 'FtListVideo',
   components: {
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-playlist-add-video-button': FtPlaylistAddVideoButton,
   },
   props: {
     data: {
@@ -84,6 +86,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'],
   data: function () {
@@ -104,7 +111,6 @@ export default defineComponent({
       isUpcoming: false,
       isPremium: false,
       hideViews: false,
-      addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
     }
   },
@@ -488,13 +494,6 @@ export default defineComponent({
     historyEntry() {
       this.checkIfWatched()
     },
-    showAddToPlaylistPrompt(value) {
-      if (value) { return }
-      // Execute on prompt close
-
-      if (this.addToPlaylistPromptCloseCallback == null) { return }
-      this.addToPlaylistPromptCloseCallback()
-    },
   },
   created: function () {
     this.parseVideoData()
@@ -726,30 +725,6 @@ export default defineComponent({
       this.watchProgress = 0
     },
 
-    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,
-      }
-
-      this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
-
-      // Focus when prompt closed
-      this.addToPlaylistPromptCloseCallback = () => {
-        // Run once only
-        this.addToPlaylistPromptCloseCallback = null
-
-        // `thumbnailLink` is a `router-link`
-        // `focus()` can only be called on the actual element
-        this.$refs.addToPlaylistIcon?.$el?.focus()
-      }
-    },
-
     hideChannel: function(channelName, channelId) {
       const hiddenChannels = JSON.parse(this.$store.getters.getChannelsHidden)
       hiddenChannels.push({ name: channelId, preferredName: channelName })
@@ -825,7 +800,6 @@ export default defineComponent({
       'updateHistory',
       'removeFromHistory',
       'updateChannelsHidden',
-      'showAddToPlaylistPromptForManyVideos',
       'addVideo',
       'updatePlaylist',
       'removeVideo',

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -44,16 +44,20 @@
         @click="handleExternalPlayer"
       />
       <span class="playlistIcons">
-        <ft-icon-button
+        <ft-playlist-add-video-button
           v-if="showPlaylists"
-          ref="addToPlaylistIcon"
-          :title="$t('User Playlists.Add to Playlist')"
-          :icon="['fas', 'plus']"
           class="addToPlaylistIcon"
           :class="alwaysShowAddToPlaylistButton ? 'alwaysVisible' : ''"
+          :video-id="id"
+          :video-title="title"
+          :channel-id="channelId"
+          :channel-name="channelName"
+          :view-count="viewCount ?? null"
+          :length-seconds="lengthSeconds"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="togglePlaylistPrompt"
+          :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
+          :is-in-quick-bookmark-playlist="isInQuickBookmarkPlaylist"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"