Merge pull request #149 from Tzahi12345/player-improvements

Playlist and player improvements

backend/app.js

@@ -1858,7 +1858,8 @@ app.post('/api/tomp3', optionalJwt, async function(req, res) {
         user: req.isAuthenticated() ? req.user.uid : null
     }
 
-    const safeDownloadOverride = config_api.getConfigItem('ytdl_safe_download_override');
+    const safeDownloadOverride = config_api.getConfigItem('ytdl_safe_download_override') || config_api.globalArgsRequiresSafeDownload();
+    if (safeDownloadOverride) logger.verbose('Download is running with the safe download override.');
     const is_playlist = url.includes('playlist');
 
     let result_obj = null;
@@ -1887,8 +1888,9 @@ app.post('/api/tomp4', optionalJwt, async function(req, res) {
         ui_uid: req.body.ui_uid,
         user: req.isAuthenticated() ? req.user.uid : null
     }
-
-    const safeDownloadOverride = config_api.getConfigItem('ytdl_safe_download_override');
+    
+    const safeDownloadOverride = config_api.getConfigItem('ytdl_safe_download_override') || config_api.globalArgsRequiresSafeDownload();
+    if (safeDownloadOverride) logger.verbose('Download is running with the safe download override.');
     const is_playlist = url.includes('playlist');
 
     let result_obj = null;
@@ -2354,7 +2356,7 @@ app.post('/api/getPlaylist', optionalJwt, async (req, res) => {
     });
 });
 
-app.post('/api/updatePlaylist', optionalJwt, async (req, res) => {
+app.post('/api/updatePlaylistFiles', optionalJwt, async (req, res) => {
     let playlistID = req.body.playlistID;
     let fileNames = req.body.fileNames;
     let type = req.body.type;
@@ -2362,7 +2364,7 @@ app.post('/api/updatePlaylist', optionalJwt, async (req, res) => {
     let success = false;
     try {
         if (req.isAuthenticated()) {
-            auth_api.updatePlaylist(req.user.uid, playlistID, fileNames, type);
+            auth_api.updatePlaylistFiles(req.user.uid, playlistID, fileNames, type);
         } else {
             db.get(`playlists.${type}`)
                 .find({id: playlistID})
@@ -2380,6 +2382,14 @@ app.post('/api/updatePlaylist', optionalJwt, async (req, res) => {
     })
 });
 
+app.post('/api/updatePlaylist', optionalJwt, async (req, res) => {
+    let playlist = req.body.playlist;
+    let success = db_api.updatePlaylist(playlist, req.user && req.user.uid);
+    res.send({
+        success: success
+    });
+});
+
 app.post('/api/deletePlaylist', optionalJwt, async (req, res) => {
     let playlistID = req.body.playlistID;
     let type = req.body.type;

backend/authentication/auth.js

@@ -331,7 +331,7 @@ exports.addPlaylist = function(user_uid, new_playlist, type) {
   return true;
 }
 
-exports.updatePlaylist = function(user_uid, playlistID, new_filenames, type) {
+exports.updatePlaylistFiles = function(user_uid, playlistID, new_filenames, type) {
   users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID}).assign({fileNames: new_filenames});
   return true;
 }

backend/config.js

@@ -155,6 +155,13 @@ function setConfigItems(items) {
     return success;
 }
 
+function globalArgsRequiresSafeDownload() {
+    const globalArgs = config_api.getConfigItem('ytdl_custom_args');
+    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt'];
+    const failedArgs = globalArgs.filter(arg => argsThatRequireSafeDownload.includes(arg));
+    return failedArgs && failedArgs.length > 0;
+}
+
 module.exports = {
     getConfigItem: getConfigItem,
     setConfigItem: setConfigItem,
@@ -164,7 +171,8 @@ module.exports = {
     configExistsCheck: configExistsCheck,
     CONFIG_ITEMS: CONFIG_ITEMS,
     initialize: initialize,
-    descriptors: {}
+    descriptors: {},
+    globalArgsRequiresSafeDownload: globalArgsRequiresSafeDownload
 }
 
 DEFAULT_CONFIG = {

backend/db.js

@@ -93,11 +93,25 @@ function generateFileObject(id, type, customPath = null, sub = null) {
     return file_obj;
 }
 
+function updatePlaylist(playlist, user_uid) {
+    let playlistID = playlist.id;
+    let type = playlist.type;
+    let db_loc = null;
+    if (user_uid) {
+        db_loc = users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID});
+    } else {
+        db_loc = db.get(`playlists.${type}`).find({id: playlistID});
+    }
+    db_loc.assign(playlist).write();
+    return true;
+}
+
 function getAppendedBasePathSub(sub, base_path) {
     return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
 }
 
 module.exports = {
     initialize: initialize,
-    registerFileDB: registerFileDB
+    registerFileDB: registerFileDB,
+    updatePlaylist: updatePlaylist
 }

backend/public/index.html

@@ -14,5 +14,5 @@
 <link rel="stylesheet" href="styles.5112d6db78cf21541598.css"></head>
 <body>
   <app-root></app-root>
-<script src="runtime-es2015.19c8ec90f7ebb80c3b35.js" type="module"></script><script src="runtime-es5.19c8ec90f7ebb80c3b35.js" nomodule defer></script><script src="polyfills-es5.7f923c8f5afda210edd3.js" nomodule defer></script><script src="polyfills-es2015.5b408f108bcea938a7e2.js" type="module"></script><script src="main-es2015.0cbc545a4a3bee376826.js" type="module"></script><script src="main-es5.0cbc545a4a3bee376826.js" nomodule defer></script></body>
+<script src="runtime-es2015.1f1fce4e9a4a11083a4b.js" type="module"></script><script src="runtime-es5.1f1fce4e9a4a11083a4b.js" nomodule defer></script><script src="polyfills-es5.7f923c8f5afda210edd3.js" nomodule defer></script><script src="polyfills-es2015.5b408f108bcea938a7e2.js" type="module"></script><script src="main-es2015.0cbc545a4a3bee376826.js" type="module"></script><script src="main-es5.0cbc545a4a3bee376826.js" nomodule defer></script></body>
 </html>

backend/public/runtime-es2015.1f1fce4e9a4a11083a4b.js

@@ -1 +1 @@
-!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"-es2015."+{1:"aed8074bec04b4a47a35"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);
+!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"-es2015."+{1:"588bba5a74f743b73b08"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);

backend/public/runtime-es5.1f1fce4e9a4a11083a4b.js

@@ -1 +1 @@
-!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"-es5."+{1:"aed8074bec04b4a47a35"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);
+!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"-es5."+{1:"588bba5a74f743b73b08"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);

src/app/app.module.ts

@@ -72,6 +72,7 @@ import { ManageUserComponent } from './components/manage-user/manage-user.compon
 import { ManageRoleComponent } from './components/manage-role/manage-role.component';
 import { CookiesUploaderDialogComponent } from './dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component';
 import { LogsViewerComponent } from './components/logs-viewer/logs-viewer.component';
+import { ModifyPlaylistComponent } from './dialogs/modify-playlist/modify-playlist.component';
 
 registerLocaleData(es, 'es');
 
@@ -111,7 +112,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     ManageUserComponent,
     ManageRoleComponent,
     CookiesUploaderDialogComponent,
-    LogsViewerComponent
+    LogsViewerComponent,
+    ModifyPlaylistComponent
   ],
   imports: [
     CommonModule,

src/app/components/downloads/downloads.component.html

@@ -14,6 +14,9 @@
                         </div>
                     </div>
                 </div>
+                <div>
+                    <button style="top: 15px;" (click)="clearDownloads(session_downloads.key)" mat-stroked-button color="warn">Clear all downloads</button>
+                </div>
             </mat-card>
         </ng-container>
     </div>

src/app/components/downloads/downloads.component.ts

@@ -43,7 +43,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
   valid_sessions_length = 0;
 
   sort_downloads = (a, b) => {
-    const result = a.value.timestamp_start < b.value.timestamp_start;
+    const result = b.value.timestamp_start - a.value.timestamp_start;
     return result;
   }
 
@@ -81,7 +81,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
   clearDownload(session_id, download_uid) {
     this.postsService.clearDownloads(false, session_id, download_uid).subscribe(res => {
       if (res['success']) {
-        this.downloads = res['downloads'];
+        // this.downloads = res['downloads'];
       } else {
       }
     });
@@ -107,11 +107,32 @@ export class DownloadsComponent implements OnInit, OnDestroy {
 
   assignNewValues(new_downloads_by_session) {
     const session_keys = Object.keys(new_downloads_by_session);
+
+    // remove missing session IDs
+    const current_session_ids = Object.keys(this.downloads);
+    const missing_session_ids = current_session_ids.filter(session => session_keys.indexOf(session) === -1)
+
+    for (const missing_session_id of missing_session_ids) {
+      delete this.downloads[missing_session_id];
+    }
+
+    // loop through sessions
     for (let i = 0; i < session_keys.length; i++) {
       const session_id = session_keys[i];
       const session_downloads_by_id = new_downloads_by_session[session_id];
       const session_download_ids = Object.keys(session_downloads_by_id);
 
+      if (this.downloads[session_id]) {
+        // remove missing download IDs
+        const current_download_ids = Object.keys(this.downloads[session_id]);
+        const missing_download_ids = current_download_ids.filter(download => session_download_ids.indexOf(download) === -1)
+
+        for (const missing_download_id of missing_download_ids) {
+          console.log('removing missing download id');
+          delete this.downloads[session_id][missing_download_id];
+        }
+      }
+
       if (!this.downloads[session_id]) {
         this.downloads[session_id] = session_downloads_by_id;
       } else {

src/app/dialogs/modify-playlist/modify-playlist.component.html

@@ -0,0 +1,28 @@
+<h4 mat-dialog-title><ng-container i18n="Modify playlist dialog title">Modify playlist</ng-container></h4>
+
+<mat-dialog-content>
+    <!-- Playlist info -->
+    <div>
+        <mat-form-field color="accent">
+            <input matInput placeholder="Name" i18n-placeholder="Name" [(ngModel)]="playlist.name">
+        </mat-form-field>
+    </div>
+
+    <!-- Playlist order -->
+    <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of playlist.fileNames; let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="add-content-button">
+        <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu">Add more content</button>
+    </div>
+    <mat-menu #menu="matMenu">
+        <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
+    </mat-menu>
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <!-- Save -->
+    <button [disabled]="!playlistChanged()" (click)="updatePlaylist()" [disabled]="playlistChanged()" mat-raised-button color="accent">Save</button>
+</mat-dialog-actions>

src/app/dialogs/modify-playlist/modify-playlist.component.scss

@@ -0,0 +1,50 @@
+.media-list {
+    
+}
+  
+.media-box {
+
+}
+  
+.cdk-drag-preview {
+box-sizing: border-box;
+border-radius: 4px;
+box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+            0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+  
+.cdk-drag-placeholder {
+opacity: 0;
+}
+
+.cdk-drag-animating {
+transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.media-box:last-child {
+border: none;
+}
+
+.media-list.cdk-drop-list-dragging .media-box:not(.cdk-drag-placeholder) {
+transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.add-content-button {
+margin-top: 15px;
+margin-bottom: 10px;
+}
+
+.remove-item-button {
+    right: 10px;
+    position: absolute;
+    top: 4px;
+}
+
+.playlist-item-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 70%;
+    margin: 0 auto;
+}

src/app/dialogs/modify-playlist/modify-playlist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifyPlaylistComponent } from './modify-playlist.component';
+
+describe('ModifyPlaylistComponent', () => {
+  let component: ModifyPlaylistComponent;
+  let fixture: ComponentFixture<ModifyPlaylistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModifyPlaylistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModifyPlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialogs/modify-playlist/modify-playlist.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-modify-playlist',
+  templateUrl: './modify-playlist.component.html',
+  styleUrls: ['./modify-playlist.component.scss']
+})
+export class ModifyPlaylistComponent implements OnInit {
+
+  original_playlist = null;
+  playlist = null;
+  available_files = [];
+  all_files = [];
+  playlist_updated = false;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+              private postsService: PostsService,
+              public dialogRef: MatDialogRef<ModifyPlaylistComponent>) { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.playlist = JSON.parse(JSON.stringify(this.data.playlist));
+      this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
+      this.getFiles();
+    }
+  }
+
+  getFiles() {
+    if (this.playlist.type === 'audio') {
+      this.postsService.getMp3s().subscribe(res => {
+        this.processFiles(res['mp3s']);
+      });
+    } else {
+      this.postsService.getMp4s().subscribe(res => {
+        this.processFiles(res['mp4s']);
+      });
+    }
+  }
+
+  processFiles(new_files = null) {
+    if (new_files) { this.all_files = new_files.map(file => file.id); }
+    this.available_files = this.all_files.filter(e => !this.playlist.fileNames.includes(e))
+  }
+
+  updatePlaylist() {
+    this.postsService.updatePlaylist(this.playlist).subscribe(res => {
+      this.playlist_updated = true;
+      this.postsService.openSnackBar('Playlist updated successfully.');
+      this.getPlaylist();
+    });
+  }
+
+  playlistChanged() {
+    return JSON.stringify(this.playlist) === JSON.stringify(this.original_playlist);
+  }
+
+  getPlaylist() {
+    this.postsService.getPlaylist(this.playlist.id, this.playlist.type, null).subscribe(res => {
+      if (res['playlist']) {
+        this.playlist = res['playlist'];
+        this.original_playlist = JSON.parse(JSON.stringify(this.playlist));
+      }
+    });
+  }
+
+  addContent(file) {
+    this.playlist.fileNames.push(file);
+    this.processFiles();
+  }
+
+  removeContent(index) {
+    this.playlist.fileNames.splice(index, 1);
+    this.processFiles();
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
+  }
+
+}

src/app/file-card/file-card.component.html

@@ -2,10 +2,10 @@
   <div style="padding:5px">
     <div style="height: 52px;">
       <div>
-        <b><a class="file-link" href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio, uid) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
+        <b><a class="file-link" href="javascript:void(0)" (click)="!playlist ? mainComponent.goToFile(name, isAudio, uid) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
       </div>
       <span class="max-two-lines"><ng-container i18n="File or playlist ID">ID:</ng-container>&nbsp;{{name}}</span>
-      <div *ngIf="isPlaylist"><ng-container i18n="Playlist video count">Count:</ng-container>&nbsp;{{count}}</div>
+      <div *ngIf="playlist"><ng-container i18n="Playlist video count">Count:</ng-container>&nbsp;{{count}}</div>
     </div>
     <div *ngIf="!image_errored && thumbnailURL" class="img-div">
       <img class="image" (error) ="onImgError($event)" [id]="type" [lazyLoad]="thumbnailURL" [customObservable]="scrollAndLoad" (onLoad)="imageLoaded($event)" alt="Thumbnail">
@@ -14,11 +14,16 @@
       </span>
     </div>
   </div>
-  <button *ngIf="isPlaylist" (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
-  <button [matMenuTriggerFor]="action_menu" *ngIf="!isPlaylist" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+  <button [matMenuTriggerFor]="playlist_menu" *ngIf="playlist" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+  <mat-menu #playlist_menu="matMenu">
+      <button (click)="editPlaylistDialog()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
+      <button (click)="deleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
+  </mat-menu>
+  <button [matMenuTriggerFor]="action_menu" *ngIf="!playlist" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
   <mat-menu #action_menu="matMenu">
     <button (click)="openVideoInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
     <button (click)="deleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
     <button *ngIf="use_youtubedl_archive" (click)="deleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
   </mat-menu>
+  
 </mat-card>

src/app/file-card/file-card.component.ts

@@ -7,6 +7,7 @@ import { Subject, Observable } from 'rxjs';
 import 'rxjs/add/observable/merge';
 import { MatDialog } from '@angular/material/dialog';
 import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
+import { ModifyPlaylistComponent } from '../dialogs/modify-playlist/modify-playlist.component';
 
 @Component({
   selector: 'app-file-card',
@@ -22,7 +23,7 @@ export class FileCardComponent implements OnInit {
   @Input() thumbnailURL: string;
   @Input() isAudio = true;
   @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
-  @Input() isPlaylist = false;
+  @Input() playlist = null;
   @Input() count = null;
   @Input() use_youtubedl_archive = false;
   type;
@@ -46,15 +47,15 @@ export class FileCardComponent implements OnInit {
     this.type = this.isAudio ? 'audio' : 'video';
 
     if (this.file && this.file.url && this.file.url.includes('youtu')) {
-      const string_id = (this.isPlaylist ? '?list=' : '?v=')
-      const index_offset = (this.isPlaylist ? 6 : 3);
+      const string_id = (this.playlist ? '?list=' : '?v=')
+      const index_offset = (this.playlist ? 6 : 3);
       const end_index = this.file.url.indexOf(string_id) + index_offset;
       this.name = this.file.url.substring(end_index, this.file.url.length);
     }
   }
 
   deleteFile(blacklistMode = false) {
-    if (!this.isPlaylist) {
+    if (!this.playlist) {
       this.postsService.deleteFile(this.uid, this.isAudio, blacklistMode).subscribe(result => {
         if (result) {
           this.openSnackBar('Delete success!', 'OK.');
@@ -80,6 +81,24 @@ export class FileCardComponent implements OnInit {
     });
   }
 
+  editPlaylistDialog() {
+    const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
+      data: {
+        playlist: this.playlist,
+        width: '65vw'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(res => {
+      // updates playlist in file manager if it changed
+      if (dialogRef.componentInstance.playlist_updated) {
+        this.playlist = dialogRef.componentInstance.original_playlist;
+        this.title = this.playlist.name;
+        this.count = this.playlist.fileNames.length;
+      }
+    });
+  }
+
   onImgError(event) {
     this.image_errored = true;
   }

src/app/main/main.component.html

@@ -213,7 +213,7 @@
                 <mat-grid-list *ngIf="playlists.audio.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let playlist of playlists.audio; let i = index;">
                         <app-file-card #audiofilecard (removeFile)="removePlaylistMp3(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
-                            [length]="null" [isAudio]="true" [isPlaylist]="true" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
+                            [length]="null" [isAudio]="true" [playlist]="playlist" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
                         <mat-progress-bar *ngIf="downloading_content['audio'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                     </mat-grid-tile>
                 </mat-grid-list>
@@ -255,7 +255,7 @@
                 <mat-grid-list *ngIf="playlists.video.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let playlist of playlists.video; let i = index;">
                         <app-file-card #videofilecard (removeFile)="removePlaylistMp4(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
-                            [length]="null" [isAudio]="false" [isPlaylist]="true" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
+                            [length]="null" [isAudio]="false" [playlist]="playlist" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
                         <mat-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                     </mat-grid-tile>
                 </mat-grid-list>

src/app/player/player.component.ts

@@ -62,6 +62,8 @@ export class PlayerComponent implements OnInit {
 
   downloading = false;
 
+  original_volume = null;
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.innerWidth = window.innerWidth;
@@ -235,6 +237,12 @@ export class PlayerComponent implements OnInit {
   onPlayerReady(api: VgAPI) {
       this.api = api;
 
+      // checks if volume has been previously set. if so, use that as default
+      if (localStorage.getItem('player_volume')) {
+        this.api.volume = parseFloat(localStorage.getItem('player_volume'));
+      }
+      setInterval(() => this.saveVolume(this.api), 2000)
+
       this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playVideo.bind(this));
       this.api.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
 
@@ -243,6 +251,13 @@ export class PlayerComponent implements OnInit {
       }
   }
 
+  saveVolume(api) {
+    if (this.original_volume !== api.volume) {
+      localStorage.setItem('player_volume', api.volume)
+      this.original_volume = api.volume;
+    }
+  }
+
   nextVideo() {
       if (this.currentIndex === this.playlist.length - 1) {
         // dont continue playing
@@ -374,7 +389,7 @@ export class PlayerComponent implements OnInit {
   updatePlaylist() {
     const fileNames = this.getFileNames();
     this.playlist_updating = true;
-    this.postsService.updatePlaylist(this.id, fileNames, this.type).subscribe(res => {
+    this.postsService.updatePlaylistFiles(this.id, fileNames, this.type).subscribe(res => {
     this.playlist_updating = false;
       if (res['success']) {
         const fileNamesEncoded = fileNames.join('|nvr|');

src/app/posts.services.ts

@@ -274,8 +274,12 @@ export class PostsService implements CanActivate {
                                                             type: type, uuid: uuid}, this.httpOptions);
     }
 
-    updatePlaylist(playlistID, fileNames, type) {
-        return this.http.post(this.path + 'updatePlaylist', {playlistID: playlistID,
+    updatePlaylist(playlist) {
+        return this.http.post(this.path + 'updatePlaylist', {playlist: playlist}, this.httpOptions);
+    }
+
+    updatePlaylistFiles(playlistID, fileNames, type) {
+        return this.http.post(this.path + 'updatePlaylistFiles', {playlistID: playlistID,
                                                             fileNames: fileNames,
                                                             type: type}, this.httpOptions);
     }