forked from FreeTubeApp/FreeTube
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
$ Create component quick bookmark button to avoid duplicate code
- Loading branch information
1 parent
5e924c9
commit 978f30e
Showing
6 changed files
with
205 additions
and
193 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
165 changes: 165 additions & 0 deletions
165
...enderer/components/ft-playlist-quick-bookmark-button/ft-playlist-quick-bookmark-button.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import { defineComponent } from 'vue' | ||
| import { mapActions } from 'vuex' | ||
| import FtIconButton from '../ft-icon-button/ft-icon-button.vue' | ||
| import { showToast } from '../../helpers/utils' | ||
|
|
||
| export default defineComponent({ | ||
| name: 'FtPlaylistQuickBookmarkButton', | ||
| components: { | ||
| 'ft-icon-button': FtIconButton, | ||
| }, | ||
| props: { | ||
| id: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| title: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| channelId: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| channelName: { | ||
| type: String, | ||
| required: true | ||
| }, | ||
| viewCount: { | ||
| type: Number, | ||
| required: true | ||
| }, | ||
| lengthSeconds: { | ||
| type: Number, | ||
| required: true | ||
| }, | ||
| padding: { | ||
| type: Number, | ||
| default: 10 | ||
| }, | ||
| size: { | ||
| type: Number, | ||
| default: 20 | ||
| }, | ||
| alwaysVisible: { | ||
| type: Boolean, | ||
| default: false | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| selectQuickBookmarkTargetPromptCloseCallback: null, | ||
| } | ||
| }, | ||
| computed: { | ||
| quickBookmarkPlaylistId() { | ||
| return this.$store.getters.getQuickBookmarkTargetPlaylistId | ||
| }, | ||
| quickBookmarkPlaylist() { | ||
| return this.$store.getters.getPlaylist(this.quickBookmarkPlaylistId) | ||
| }, | ||
| isQuickBookmarkEnabled() { | ||
| return this.quickBookmarkPlaylist != null | ||
| }, | ||
| isInQuickBookmarkPlaylist: function () { | ||
| if (!this.isQuickBookmarkEnabled) { return false } | ||
|
|
||
| return this.quickBookmarkPlaylist.videos.some((video) => { | ||
| return video.videoId === this.id | ||
| }) | ||
| }, | ||
| quickBookmarkIconText: function () { | ||
| if (!this.isQuickBookmarkEnabled) { return this.$t('User Playlists.Add to Playlist') } | ||
|
|
||
| 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' | ||
| }, | ||
| selectQuickBookmarkTargetPromptShown() { | ||
| return this.$store.getters.getShowSelectQuickBookmarkTargetPrompt | ||
| }, | ||
| }, | ||
| watch: { | ||
| selectQuickBookmarkTargetPromptShown(value) { | ||
| if (value) { return } | ||
| // Execute on prompt close | ||
|
|
||
| if (this.selectQuickBookmarkTargetPromptCloseCallback == null) { return } | ||
| this.selectQuickBookmarkTargetPromptCloseCallback() | ||
| }, | ||
| }, | ||
| methods: { | ||
| toggleQuickBookmarked() { | ||
| if (!this.isQuickBookmarkEnabled) { | ||
| showToast(this.$t('User Playlists["Quick Bookmark Disabled. Pick a Playlist as Quick Bookmark Target"]')) | ||
| this.selectQuickBookmarkTargetPromptCloseCallback = () => { | ||
| // Run once only | ||
| this.selectQuickBookmarkTargetPromptCloseCallback = null | ||
|
|
||
| // Auto add this video to quick bookmark target if target set in prompt | ||
| if (!this.isQuickBookmarkEnabled) { return } | ||
|
|
||
| // Users don't know the video is in target playlist or not | ||
| // Assuming they want to add the video | ||
| // Add it only if not already present in target playlist | ||
| if (!this.isInQuickBookmarkPlaylist) { | ||
| this.addToQuickBookmarkPlaylist() | ||
| } | ||
| } | ||
| this.showSelectQuickBookmarkTargetPrompt() | ||
| return | ||
| } | ||
|
|
||
| if (this.isInQuickBookmarkPlaylist) { | ||
| this.removeFromQuickBookmarkPlaylist() | ||
| } else { | ||
| this.addToQuickBookmarkPlaylist() | ||
| } | ||
| }, | ||
| addToQuickBookmarkPlaylist() { | ||
| const videoData = { | ||
| videoId: this.id, | ||
| title: this.title, | ||
| author: this.channelName, | ||
| authorId: this.channelId, | ||
| viewCount: this.viewCount, | ||
| lengthSeconds: this.lengthSeconds, | ||
| } | ||
|
|
||
| this.addVideos({ | ||
| _id: this.quickBookmarkPlaylist._id, | ||
| videos: [videoData], | ||
| }) | ||
| // Update playlist's `lastUpdatedAt` | ||
| this.updatePlaylist({ _id: this.quickBookmarkPlaylist._id }) | ||
|
|
||
| // 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, | ||
| }) | ||
| // Update playlist's `lastUpdatedAt` | ||
| this.updatePlaylist({ _id: this.quickBookmarkPlaylist._id }) | ||
|
|
||
| // TODO: Maybe show playlist name | ||
| showToast(this.$t('Video.Video has been removed from your saved list')) | ||
| }, | ||
|
|
||
| ...mapActions([ | ||
| 'showSelectQuickBookmarkTargetPrompt', | ||
| 'addVideos', | ||
| 'updatePlaylist', | ||
| 'removeVideo', | ||
| ]) | ||
| } | ||
| }) |
17 changes: 17 additions & 0 deletions
17
...nderer/components/ft-playlist-quick-bookmark-button/ft-playlist-quick-bookmark-button.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <template> | ||
| <ft-icon-button | ||
| :title="quickBookmarkIconText" | ||
| :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']" | ||
| class="quickBookmarkVideoIcon" | ||
| :class="{ | ||
| bookmarked: isInQuickBookmarkPlaylist, | ||
| alwaysVisible: alwaysVisible, | ||
| }" | ||
| :theme="quickBookmarkIconTheme" | ||
| :padding="padding" | ||
| :size="size" | ||
| @click="toggleQuickBookmarked" | ||
| /> | ||
| </template> | ||
|
|
||
| <script src="./ft-playlist-quick-bookmark-button.js" /> |
Oops, something went wrong.