1.1.13 (what is a descriptive commit message?)

app/client/src/components/PlaylistPopup.vue

@@ -2,9 +2,10 @@
 <div>
 
     <!-- Create playlist -->
-    <v-card class='text-center pa-2' v-if='!addToPlaylist'> 
+    <v-card class='text-center pa-2' v-if='edit || !addToPlaylist'> 
         <v-card-text>
-            <p primary-title class='display-1'>{{$t("Create playlist")}}</p>
+            <p v-if='!edit' primary-title class='display-1'>{{$t("Create playlist")}}</p>
+            <p v-if='edit' primary-title class='display-1'>{{$t("Edit playlist")}}</p>
             <v-text-field label='Title' class='ma-2' v-model='title'></v-text-field>
             <v-textarea class='mx-2' v-model='description' label='Description' rows='1' auto-grow></v-textarea>
             <v-select class='mx-2' v-model='type' :items='types' label='Type'></v-select>
@@ -12,12 +13,15 @@
 
         <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn class='primary' :loading='createLoading' @click='create'>{{$t("Create")}}</v-btn>
+            <v-btn class='primary' :loading='createLoading' @click='create'>
+                <div v-if='!edit'>{{$t("Create")}}</div>
+                <div v-if='edit'>{{$t("Save")}}</div>
+            </v-btn>
         </v-card-actions>
     </v-card>
 
     <!-- Add to playlist -->
-    <v-card class='text-center pa-2' v-if='addToPlaylist'>
+    <v-card class='text-center pa-2' v-if='addToPlaylist && !edit'>
         <v-card-text>
             <p primary-title class='display-1'>{{$t("Add to playlist")}}</p>
             <v-btn block class='mb-1' @click='addToPlaylist = false'>
@@ -54,10 +58,10 @@ export default {
             //Make mutable
             addToPlaylist: this.track?true:false,
 
-            title: '',
+            title: this.playlist ? this.playlist.title : '',
-            description: '',
+            description: this.playlist ? this.playlist.description : '',
-            type: 'Private',
+            type: this.$t('Private'),
-            types: ['Private', 'Public'],
+            types: [this.$t('Public'), this.$t('Private'), this.$t('Collaborative')],
             createLoading: false,
             
             loading: false,
@@ -68,24 +72,44 @@ export default {
         track: {
             type: Object,
             default: null
+        },
+        //If editing playlist
+        edit: {
+            type: Boolean,
+            default: false
+        },
+        //For editting
+        playlist: {
+            type: Object,
+            default: null
         }
     },
     methods: {
         //Create playlist
         async create() {
             this.createLoading = true;
-
+            if (this.edit) {
-            await this.$axios.post('/playlist', {
+                await this.$axios.put('/playlist/' + this.playlist.id, {
-                description: this.description,
+                    description: this.description,
-                title: this.title,
+                    title: this.title,
-                type: this.type.toLowerCase(),
+                    type: this.types.indexOf(this.type),
-                track: this.track ? this.track.id : null
+                });
-            });
+            } else {
+                await this.$axios.post('/playlist', {
+                    description: this.description,
+                    title: this.title,
+                    type: this.types.indexOf(this.type),
+                    track: this.track ? this.track.id : null
+                });
+            }
 
             this.createLoading = false;
             this.$emit('created');
             this.$emit('close');
-            this.$root.globalSnackbar = this.$t('Added to playlist!');
+            if (this.edit)
+                this.$emit("edit");
+            else
+                this.$root.globalSnackbar = this.$t('Added to playlist!');
         },
         //Add track to playlist
         async addTrack(playlist) {

app/client/src/locales/en.json

@@ -140,5 +140,11 @@
   "New update available:": "New update available:",
   "Shuffle": "Shuffle",
   "Download album cover": "Download album cover",
-  "Art Resolution": "Art Resolution"
+  "Art Resolution": "Art Resolution",
+  "Public": "Public",
+  "Private": "Private",
+  "Collaborative": "Collaborative",
+  "Edit playlist": "Edit playlist",
+  "Save": "Save",
+  "Edit": "Edit"
 }

app/client/src/views/PlaylistPage.vue

@@ -13,7 +13,12 @@
             <v-overlay absolute :value="loading" z-index="3" opacity='0.9'>
                 <v-progress-circular indeterminate></v-progress-circular>
             </v-overlay>
-            <h1>{{playlist.title}}</h1>
+            <h1>
+                {{playlist.title}}
+                <v-icon v-if='playlist.type == "private"' class='ml-2 mb-2'>mdi-lock</v-icon>
+                <v-icon v-if='playlist.type == "public"' class='ml-2 mb-2'>mdi-earth</v-icon>
+                <v-icon v-if='playlist.type == "collaborative"' class='ml-2 mb-2'>mdi-account-edit</v-icon>
+            </h1>
             <h3>{{playlist.user.name}}</h3>
             <h5>{{playlist.description}}</h5>
             <div class='mt-2' v-if='!loading'>
@@ -45,6 +50,10 @@
                     <v-icon left>mdi-delete</v-icon>
                     {{$t('Delete')}}
                 </v-btn>
+                <v-btn color='red' class='mx-1' v-if='isOwn' @click='editDialog = true'>
+                    <v-icon left>mdi-pencil</v-icon>
+                    {{$t('Edit')}}
+                </v-btn>
                 <div class='mx-2' dense stlye='max-width: 120px;'>
                     <v-select class='px-2' dense solo :items='sortTypes' @change='sort' :label='$t("Sort by")'>
                     </v-select>
@@ -94,17 +103,24 @@
         </v-card>
     </v-dialog>
 
+    <!-- Edit playlist -->
+    <v-dialog v-model='editDialog' max-width='400px'>
+        <PlaylistPopup edit :playlist='this.playlist' @edit='refresh()' v-if='editDialog'></PlaylistPopup>
+    </v-dialog>
+
+
 </v-list>
 </template>
 
 <script>
 import TrackTile from '@/components/TrackTile.vue';
 import DownloadDialog from '@/components/DownloadDialog.vue';
+import PlaylistPopup from '@/components/PlaylistPopup.vue';
 
 export default {
     name: 'PlaylistTile',
     components: {
-        TrackTile, DownloadDialog
+        TrackTile, DownloadDialog, PlaylistPopup
     },
     props: {
         playlistData: Object,
@@ -120,6 +136,7 @@ export default {
             libraryLoading: false,
             downloadDialog: false,
             deleteDialog: false,
+            editDialog: false,
             
             //Sort
             sortTypes: [
@@ -199,7 +216,20 @@ export default {
             }
             this.libraryLoading = false;
         },
-
+        //Refresh metadata
+        async refresh() {
+            this.editDialog = false;
+            this.loading = true;
+            let data = await this.$axios.get(`/playlist/${this.playlist.id}?start=0`);
+            if (data && data.data) {
+                let tracks = this.playlist.tracks;
+                let library = this.playlist.library;
+                this.playlist = data.data;
+                this.playlist.tracks = tracks;
+                this.playlist.library = library;
+            }
+            this.loading = false;
+        },
         async initialLoad() {
             //Load meta and intial tracks
             if (this.playlist.tracks.length < this.playlist.trackCount) {

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "",
   "main": "background.js",
   "scripts": {

app/src/definitions.js

@@ -100,6 +100,17 @@ class Playlist {
         );
         this.tracks = tracksJson.data.map((t) => new Track(t));
         this.library = library;
+        switch (json.STATUS) {
+            case 0:
+                this.type = 'public';
+                break;
+            case 1:
+                this.type = 'private';
+                break;
+            case 2:
+                this.type = 'collaborative'
+                break;
+        }
     }
 
     //Extend tracks

app/src/server.js

@@ -128,20 +128,31 @@ app.delete('/playlist/:id', async (req, res) => {
 // {
 //     desciption,
 //     title,
-//     type: 'public' || 'private',
+//     type: 0, 1, 2 = public, private, collab
 //     track: trackID
 // }
 app.post('/playlist', async (req, res) => {
     await deezer.callApi('playlist.create', {
         description: req.body.description,
         title: req.body.title,
-        status: req.body.type == 'public' ? 2 : 1,
+        status: req.body.type,
         songs: req.body.track ? [[req.body.track, 0]] : []
     });
 
     res.sendStatus(200);
 });
 
+//PUT edit playlist, see above create
+app.put('/playlist/:id', async (req, res) => {
+    await deezer.callApi('playlist.update', {
+        description: req.body.description,
+        title: req.body.title,
+        status: req.body.type,
+        playlist_id: parseInt(req.params.id.toString(), 10)
+    });
+    res.sendStatus(200);
+});
+
 //POST track to playlist
 //Body {"track": "trackId"}
 app.post('/playlist/:id/tracks', async (req, res) => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "",
   "scripts": {
     "pack": "electron-builder --dir",