Implemented the remainder of playlist functions and add the playlist creator to the add video to playlist dialog

src/components/Playlist/VideoPlaylistOperationsA.vue

@@ -0,0 +1,72 @@
+<template>
+    <v-dialog max-width="720" :value="dialogOpen" @input="$emit('input', $event)">
+        <v-progress-linear indeterminate v-if="!loaded" />
+        <v-card v-else>
+            <v-card-title>{{ $t('playlists.add_to_playlist') }}</v-card-title>
+            <v-card-text>
+                <v-select
+                        dense
+                        v-model="selectedPlaylist"
+                        :items="playlistItems"
+                />
+            </v-card-text>
+            <v-card-actions>
+                <v-btn class="mr-1" outlined @click="submit">{{ $t('playlists.confirm_addition') }}</v-btn>
+                <CreatePlaylistDialog @created="loadPlaylists" />
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import CreatePlaylistDialog from '@/components/Playlist/CreatePlaylistDialog'
+
+export default {
+	name: 'VideoPlaylistOperationsA',
+	components: {
+		CreatePlaylistDialog
+	},
+	props: ['videoId', 'dialogOpen'],
+	data: () => ({
+		loaded: false,
+		selectedPlaylist: null,
+		playlistItems: {}
+	}),
+	mounted () {
+		return this.loadPlaylists()
+	},
+	watch: {
+		dialogOpen (next) {
+			if (next === true) {
+				this.loadPlaylists()
+			}
+		}
+	},
+	methods: {
+		async loadPlaylists () {
+			this.playlistItems = (await this.$store.dispatch('auth/makeRequest', {
+				method: 'GET',
+				path: '/user/playlists'
+			})).map(item => {
+				return {
+					text: item.name,
+					value: item.id
+				}
+			})
+			this.loaded = true
+		},
+
+		async submit () {
+			await this.$store.dispatch('auth/makeRequest', {
+				method: 'POST',
+				path: '/user/playlists/add',
+				data: {
+					playlistId: this.selectedPlaylist,
+					videoId: this.videoId
+				}
+			})
+			this.$emit('input', false)
+		}
+	}
+}
+</script>

src/components/Video/VideoPlaylistOperationsA.vue

@@ -1,53 +0,0 @@
-<template>
-    <v-progress-linear indeterminate v-if="!loaded" />
-    <v-card v-else>
-        <v-card-title>{{ $t('playlists.add_to_playlist') }}</v-card-title>
-        <v-card-text>
-            <v-select
-                dense
-                v-model="selectedPlaylist"
-                :items="playlistItems"
-            />
-        </v-card-text>
-        <v-card-actions>
-            <v-btn outlined @click="submit">{{ $t('playlists.confirm_addition') }}</v-btn>
-        </v-card-actions>
-    </v-card>
-</template>
-
-<script>
-export default {
-	name: 'VideoPlaylistOperationsA',
-	props: ['videoId'],
-	data: () => ({
-		loaded: false,
-		selectedPlaylist: null,
-		playlistItems: {}
-	}),
-	async mounted () {
-		this.playlistItems = (await this.$store.dispatch('auth/makeRequest', {
-			method: 'GET',
-			path: '/user/playlists'
-		})).map(item => {
-			return {
-				text: item.name,
-				value: item.id
-			}
-		})
-		this.loaded = true
-	},
-	methods: {
-		async submit () {
-			await this.$store.dispatch('auth/makeRequest', {
-				method: 'POST',
-				path: '/user/playlists/add',
-				data: {
-					playlistId: this.selectedPlaylist,
-					videoId: this.videoId
-				}
-			})
-			this.$emit('input', false)
-		}
-	}
-}
-</script>

src/routes/PlaylistPage.vue

@@ -28,6 +28,12 @@
                         <v-btn icon x-large link :href="youtubeURL">
                             <v-icon x-large>{{ mdiYoutube }}</v-icon>
                         </v-btn>
+                        <v-btn v-if="isAdmin" @click="deleteSelf" outlined>
+                            {{ $t('playlists.delete_self') }}
+                        </v-btn>
+                        <v-btn v-if="isAdmin" @click="renameSelf" outlined>
+                            {{ $t('playlists.rename_self') }}
+                        </v-btn>
                     </v-card-actions>
                 </v-card>
 
@@ -36,8 +42,13 @@
                         <VideoItem :video="video" max-height>
                             <template v-slot:bottom>
                                 <v-card-actions v-if="isAdmin">
-                                    <v-btn outlined color="error" @click.prevent="removeVideo(video)">
-                                        Delete this video
+                                    <v-btn
+                                            outlined
+                                            color="secondary"
+                                            @click.prevent="removeVideo(video)"
+                                            class="pm-breakable-button"
+                                    >
+                                        {{ $t('playlists.remove_video')}}
                                     </v-btn>
                                 </v-card-actions>
                             </template>
@@ -122,6 +133,30 @@ export default {
 				}
 			})
 			await this.getPlaylistData()
+		},
+
+		async deleteSelf () {
+			await this.$store.dispatch('auth/makeRequest', {
+				path: '/user/playlists/delete',
+				method: 'POST',
+				data: {
+					playlistId: this.playlistID
+				}
+			})
+			await this.$router.replace('/playlists')
+		},
+
+		async renameSelf () {
+			const newName = window.prompt(this.$t('playlists.new_name_msg'))
+			await this.$store.dispatch('auth/makeRequest', {
+				path: '/user/playlists/rename',
+				method: 'POST',
+				data: {
+					playlistId: this.playlistID,
+					newName
+				}
+			})
+			await this.getPlaylistData()
 		}
 	},
 	components: {

src/routes/WatchVideo.vue

@@ -16,9 +16,11 @@
         <v-dialog max-width="720" v-model="sharingPanelOpen">
             <VideoSharingPanel @input="sharingPanelOpen = $event" :current-time="currentTime" :video-id="videoId" />
         </v-dialog>
-        <v-dialog max-width="720" v-model="playlistAddDialogOpen">
-            <VideoPlaylistOperationsA @input="playlistAddDialogOpen = $event" :video-id="videoId" />
-        </v-dialog>
+        <VideoPlaylistOperationsA
+                :dialog-open="playlistAddDialogOpen"
+                @input="playlistAddDialogOpen = $event"
+                :video-id="videoId"
+        />
         <!-- <v-dialog max-width="720" v-model="playlistRemoveDialogOpen">
             <VideoSharingPanel @input="sharingPanelOpen = $event" :current-time="currentTime" :video-id="videoId" />
         </v-dialog> -->
@@ -160,7 +162,7 @@ import VideoItem from '@/components/Video/VideoItem.vue'
 import VideoComment from '@/components/Video/VideoComment'
 import VideoChapters from '@/components/Video/VideoChapters'
 import VideoSharingPanel from '@/components/Video/VideoSharingPanel'
-import VideoPlaylistOperationsA from '@/components/Video/VideoPlaylistOperationsA'
+import VideoPlaylistOperationsA from '@/components/Playlist/VideoPlaylistOperationsA'
 
 export default {
 	name: 'WatchVideo',

src/styles/main.scss

@@ -54,3 +54,13 @@
   max-width: 100vw;
   overflow: hidden;
 }
+
+.pm-breakable-button {
+  max-width: 100%;
+  height: unset !important;
+
+  > .v-btn__content {
+    max-width: 100%;
+    white-space: normal;
+  }
+}

src/translations/bn-Beng.json

@@ -20,7 +20,11 @@
         "add_to_playlist": "video টি কি তালিকা তে যোগ করবেন?",
         "confirm_addition": "ঠিক তো?",
         "create_playlist": "নতুন তালিকা বানাবেন?",
-        "playlist_field_name": "তালিকার নাম"
+        "playlist_field_name": "তালিকার নাম",
+        "remove_video": "আপনি কি এই videoটি এই তালিকা থেকে বাদ দিতে চান?",
+        "delete_self": "আপনি কি এই তালিকা কে মুছে দিতে চান?",
+        "rename_self": "আপনি কি এই তালিকা কে নতুন নাম দিতে চান?",
+        "new_name_msg": "তালিকার নতুন নাম কি হবে?"
     },
     "misc": {
         "searchBarLabel": "কি সন্ধান করছেন বলুন?",

src/translations/en.json

@@ -20,7 +20,11 @@
         "add_to_playlist": "Add to Playlist",
         "confirm_addition": "Confirm addition",
         "create_playlist": "Create Playlist",
-        "playlist_field_name": "Playlist Name"
+        "playlist_field_name": "Playlist Name",
+        "remove_video": "Remove this video from the playlist",
+        "delete_self": "Delete",
+        "rename_self": "Rename",
+        "new_name_msg": "What do you want the new name to be?"
     },
     "misc": {
         "searchBarLabel": "What are you looking for?",