updated the code according to suggested changes

FreeTubeApp · Oct 11, 2024 · c9ea6c7 · c9ea6c7
1 parent dd1ce22
commit c9ea6c7
Show file tree

Hide file tree

Showing 11 changed files with 2,072 additions and 20,585 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/renderer/components/FtElementList/FtElementList.vue b/src/renderer/components/FtElementList/FtElementList.vue
@@ -24,7 +24,7 @@
       :playlist-item-id="result.playlistItemId"
       @move-video-up="moveVideoUp(result.videoId, result.playlistItemId)"
       @move-video-down="moveVideoDown(result.videoId, result.playlistItemId)"
-      @remove-from-playlist="removeFromPlaylist(result.videoId, result.playlistItemId)"
+      @remove-from-playlist="removeFromPlaylist(result)"
     />
   </FtAutoGrid>
 </template>
@@ -129,11 +129,10 @@ function moveVideoDown(videoId, playlistItemId) {
 }
 
 /**
- * @param {string} videoId
- * @param {string} playlistItemId
+ * @param {string} result
  */
-function removeFromPlaylist(videoId, playlistItemId) {
-  emit('remove-from-playlist', videoId, playlistItemId)
+function removeFromPlaylist(result) {
+  emit('remove-from-playlist', result)
 }
 </script>
 

diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -172,7 +172,6 @@ export default defineComponent({
 
     enableQuickBookmarkForThisPlaylist: function () {
       const currentQuickBookmarkTargetPlaylist = this.$store.getters.getQuickBookmarkPlaylist
-
       this.updateQuickBookmarkTargetPlaylistId(this.playlistId)
       if (currentQuickBookmarkTargetPlaylist != null) {
         showToast(

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
@@ -42,16 +42,3 @@
   transition: visibility 0s linear 300ms, opacity 300ms;
 }
 
-.action-button {
-  background-color: #2196f3; /* Blue background */
-  padding-block: 5px 10px; /* Padding for the button */
-  margin-inline-start: 10px; /* Space between message and button */
-  border-radius: 10px; /* Rounded corners */
-  cursor: pointer; /* Pointer cursor on hover */
-  transition: background-color 0.3s; /* Smooth background color transition */
-  pointer-events: auto; /* Ensure it can be interacted with */
-}
-
-.action-button:hover {
-  background-color: #1976d2; /* Darker blue on hover */
-}
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
@@ -29,14 +29,13 @@ export default defineComponent({
 
       toast.isOpen = false
     },
-    open: function ({ detail: { message, time, action , btnName } }) {
+    open: function ({ detail: { message, time, action } }) {
       const toast = {
         message: message,
         action: action || (() => { }),
         isOpen: false,
         timeout: null,
         id: id++,
-        btnName:btnName
       }
       toast.timeout = setTimeout(this.close, time || 3000, toast)
       nextTick(() => { toast.isOpen = true })

diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
@@ -7,18 +7,13 @@
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
       tabindex="0"
       role="status"
+      @click="performAction(toast.id)"
+      @keydown.enter.prevent="performAction(toast.id)"
+      @keydown.space.prevent="performAction(toast.id)"
     >
       <p class="message">
         {{ toast.message }}
       </p>
-      <!-- Action Button (display only if there is an action) -->
-      <button
-        v-if="toast.btnName"
-        class="action-button"
-        @click.prevent="performAction(toast.id)"
-      >
-        {{ toast.btnName }}
-      </button>
     </div>
   </div>
 </template>

diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
@@ -249,13 +249,12 @@ export function buildVTTFileLocally(storyboard, videoLengthSeconds) {
   return vttString
 }
 
-export function showToast(message, time = null, action = null, btnName = null) {
+export function showToast(message, time = null, action = null) {
   FtToastEvents.dispatchEvent(new CustomEvent('toast-open', {
     detail: {
       message,
       time,
       action,
-      btnName,
     }
   }))
 }

diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
@@ -542,37 +542,35 @@ export default defineComponent({
           _id: this.playlistId,
           videoData: videoData
         });
+
         // Update playlist's `lastUpdatedAt`
         this.updatePlaylist({ _id: this.playlistId });
-        showToast('Video has been added back to playlist', 3000);
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Video has been added back to playlist'), 3000);
       } catch (e) {
-        showToast('There was a problem with adding this video back to playlist');
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.There was a problem with adding this video back to playlist'));
         console.error(e);
       }
     },
 
-    removeVideoFromPlaylist: function (videoId) {
+    removeVideoFromPlaylist: function (videoData) {
       try {
+		this.removeVideo({
+		  _id: this.playlistId,
+		  videoId: videoData.videoId,
+		  playlistItemId: videoData.playlistItemId,
+		})
+
+		// Update playlist's `lastUpdatedAt`
+		this.updatePlaylist({ _id: this.playlistId })
+		showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Video has been removed. Click here to undo."]'), 3000, () => {
+		  this.addVideoBackToPlaylist(videoData);
+		}
+	      );
+	      } catch (e) {
+		showToast(this.$t('User Playlists.SinglePlaylistView.Toast.There was a problem with removing this video'))
+		console.error(e)
+	      }
 
-        const videoData = this.playlistItems.find((i) => i.videoId === videoId);
-
-        this.removeVideo({
-          _id: this.playlistId,
-          videoId: videoId,
-          playlistItemId: videoData.playlistItemId,
-        })
-
-        // Update playlist's `lastUpdatedAt`
-        this.updatePlaylist({ _id: this.playlistId })
-        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Video has been removed'), 3000, () => {
-          this.addVideoBackToPlaylist(videoData);
-        },
-        'Undo'
-      );
-      } catch (e) {
-        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.There was a problem with removing this video'))
-        console.error(e)
-      }
     },
 
     updatePageTitle() {

diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
@@ -107,7 +107,7 @@
               :initial-visible-state="index < 10"
               @move-video-up="moveVideoUp(item.videoId, item.playlistItemId)"
               @move-video-down="moveVideoDown(item.videoId, item.playlistItemId)"
-              @remove-from-playlist="removeVideoFromPlaylist(item.videoId)"
+              @remove-from-playlist="removeVideoFromPlaylist(item.videoId , item.playlistItemId)"
             />
           </transition-group>
           <ft-auto-load-next-page-wrapper

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -218,7 +218,11 @@ User Playlists:
       This video cannot be moved up.: This video cannot be moved up.
       This video cannot be moved down.: This video cannot be moved down.
       Video has been removed: Video has been removed
+      Video has been removed. Click here to undo.: Video has been removed. Click here to undo.
+      There was a problem with adding this video back to playlist: There was a problem with adding this video back to playlist
       There was a problem with removing this video: There was a problem with removing this video
+      Video has been added back to playlist: Video has been added back to playlist
+
 
       This playlist is already being used for quick bookmark.: This playlist is already being used for quick bookmark.
       This playlist is now used for quick bookmark: This playlist is now used for quick bookmark