Merge pull request #12 from Tzahi12345/serve-nodejs

Serve frontend app through nodejs

.gitignore

@@ -43,8 +43,10 @@ Thumbs.db
 
 node_modules/*
 backend/node_modules/*
+backend/public/*
 YoutubeDL-Material/node_modules/*
 backend/video/*
 backend/audio/*
+backend/public/*
 backend/db.json
 src/assets/default.json

Dockerfile

@@ -1,28 +1,21 @@
-FROM ubuntu:18.04
+FROM alpine:3.11
 
-RUN apt-get update && apt-get install -y \
-  nodejs \
-  apache2 \
-  npm \
-  youtube-dl
+RUN apk add --update npm python ffmpeg
 
 # Change directory so that our commands run inside this new directory
-WORKDIR /var/www/html
+WORKDIR /app
 
 # Copy dependency definitions
-COPY ./ /var/www/html/
+COPY ./ /app/
 
 # Change directory to backend
-WORKDIR /var/www/html/backend
+WORKDIR /app
 
 # Install dependencies on backend
 RUN npm install
 
-# Change back to original directory
-WORKDIR /var/www/html
-
 # Expose the port the app runs in
-EXPOSE 80
+EXPOSE 17442
 
 # Run the specified command within the container.
-CMD ./docker_wrapper.sh
+CMD [ "node", "app.js" ]

README.md

@@ -22,7 +22,7 @@ Dark mode:
 
 ### Prerequisites
 
-NOTE: If you would like to use Docker, you can go down to the [Docker](#Docker) section for a setup guide.
+NOTE: If you would like to use Docker, you can skip down to the [Docker](#Docker) section for a setup guide.
 
 You need to have a functioning web server for this to work. Also make sure you have these dependencies installed on your system: nodejs and youtube-dl. If you don't, run this command:
 
@@ -32,38 +32,44 @@ sudo apt-get install nodejs youtube-dl
 
 ### Installing
 
-First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
+1. First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
 
-Drag all the files in `youtubedl-material` to a location accessible to a web server. It works best if it's the root (usually right inside `public_html`. Once that's done, navigate to `backend` and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template. 
+2. Drag all the files in `youtubedl-material` to an easily accessible directory. Navigate to the `config` folder and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template.
 
-Port forward `17442` if you're going to access YoutubeDL-Material from out of your network. This is an important step. Make sure the configuration reflects this appropriately.
+NOTE: If you are intending to use a reverse proxy, this next step is not necessary
+3. Port forward the port listed in `default.json`, which defaults to `17442`.
 
-Once the configuration is done, run `npm install` to install all the backend dependencies. Once that is finished, type `nodejs app.js`. This will run the backend server. On your browser, navigate to your installation folder. Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
+4. Once the configuration is done, run `npm install` to install all the backend dependencies. Once that is finished, type `nodejs app.js`. This will run the backend server, which serves the frontend as well. On your browser, navigate to to the server (url with the specified port). Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
 
 If you experience problems, know that it's usually caused by a configuration problem. The first thing you should do is check the console. To get there, right click anywhere on the page and click "Inspect element." Then on the menu that pops up, click console. Look at the error there, and try to investigate.
 
 ### Configuration
 
+NOTE: If you are using YoutubeDL-Material v3.2 or lower, click [here](https://github.com/Tzahi12345/YoutubeDL-Material/blob/b87a9f1e2fd896b8e3b2f12429b7ffb15ea4521b/README.md#configuration) for the old README
+
 Here is an explanation for the configuration entries. Check out the [default config](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/backend/config/default.json) for more context.
 
 | Config item | Description | Default |
 | ------------- | ------------- | ------------- |
-| frontendurl  | URL to the webserver hosting YTDL-Material | "http://example.com" |
-| backendurl  | URL to the YTDL-Material's backend, should include port 17442 | "http://example.com:17442/" |
+| url  | URL to the server hosting YoutubeDL-Material | "http://example.com" |
+| port  | Desired port for YoutubeDL-Material | "17442" |
 | use-encryption | true if you intend to use SSL encryption (https) | false |
 | cert-file-path | Cert file path - required if using encryption | "/etc/letsencrypt/live/example.com/fullchain.pem" |
 | key-file-path | Private key file path - required if using encryption |  "/etc/letsencrypt/live/example.com/privkey.pem" |
-| path-base | Audio/video stream URL. Usually the same as backendurl | "http://example.com:17442/" |
 | path-audio | Path to audio folder for saved mp3s | "audio/" |
 | path-video | Path to video folder for saved mp4s | "video/" |
 | title_top | Title shown on the top toolbar | "Youtube Downloader" |
 | file_manager_enabled | true if you want to use the file manager | true |
 | allow_quality_select | true if you want to select a videos quality level before downloading | true |
 | download_only_mode | true if you want files to directly download to the client with no media player | false |
+| allow_multi_download_mode | true if you want the ability to download multiple videos at the same time | true |
 | use_youtube_API | true if you want to use the Youtube API which is used for YT searches | false |
 | youtube_API_key | Youtube API key. Required if use_youtube_API is enabled | "" |
 | default_theme | Default theme to use. Options are "default" and "dark" | "default" |
 | allow_theme_change | true if you want the icon in the top toolbar that toggles dark mode | true |
+| use_default_downloading_agent | true if you want to use youtube-dl's default downloader | true |
+| custom_downloading_agent | If not using the default downloader, this is the downloader you want to use | "" |
+| allow_advanced_download | true if you want to use the Advanced download options - NOT FULLY IMPLEMENTED | false |
 
 ## Deployment
 
@@ -71,21 +77,21 @@ If you'd like to install YoutubeDL-Material, go to the Installation section. If
 
 To deploy, simply clone the repository, and go into the `youtubedl-material` directory. Type `npm install` and all the dependencies will install. Then type `cd backend` and again type `npm install` to install the dependencies for the backend.
 
-Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/backend/config`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into a web server, and drag the `backend` directory into the same folder. This folder should have `index.html` in it as well. If it does **not**, you're in the wrong directory.
+Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/backend/config`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into the `public` directory in the `backend` folder.
 
-The frontend is now complete. The backend is much easier. Just go into the `youtubedl-material/backend` folder, and type `sudo nodejs app.js`.
+The frontend is now complete. The backend is much easier. Just go into the `backend` folder, and type `nodejs app.js`.
 
-Finally, port forward the port `17442` and point it to the server's IP address. Make sure the port is also allowed through the firewall.
+Finally, port forward the port specified in the config (defaults to `17442`) and point it to the server's IP address. Make sure the port is also allowed through the server's firewall.
 
 ## Docker
 
 If you are looking to setup YoutubeDL-Material with Docker, this section is for you. And you're in luck! Docker setup is quite simple.
 
-1. Run `curl https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest/download/docker-compose.yml -o docker-compose.yml` to download the latest release of `docker-compose.yml`, or go to the [releases](https://github.com/Tzahi12345/YoutubeDL-Material/releases/) page to grab the version you'd like.
-2. Modify the config items in the `environment` section of `docker-compose.yml` to your liking. Otherwise, the default options will work and point to `http://localhost:8998`. You can find an explanation of these configuration items in [Configuration](#Configuration) section. 
-3. Make sure the port in the `frontend_url` environment variable lines up with the port in the `ports` section.
-4. Run `docker-compose pull`. This will download the official YoutubeDL-Material docker image.
-5. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 17442" or something similar. Make sure you can connect to the frontend, and if so, you are done!
+1. Run `curl -L https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest/download/docker-compose.yml -o docker-compose.yml` to download the latest release of `docker-compose.yml`, or go to the [releases](https://github.com/Tzahi12345/YoutubeDL-Material/releases/) page to grab the version you'd like.
+2. Modify the config items in the `environment` section of `docker-compose.yml` to your liking. The default options will work, however, and point to `http://localhost:8998`. You can find an explanation of these configuration items in [Configuration](#Configuration) section. 
+3. Run `docker-compose pull`. This will download the official YoutubeDL-Material docker image.
+4. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 8998" or something similar. 
+5. Make sure you can connect to the specified URL + port, and if so, you are done!
 
 ## Contributing
 

backend/app.js

@@ -2,6 +2,7 @@ var async = require('async');
 var fs = require('fs');
 var path = require('path');
 var youtubedl = require('youtube-dl');
+var compression = require('compression');
 var https = require('https');
 var express = require("express");
 var bodyParser = require("body-parser");
@@ -30,7 +31,7 @@ db.defaults(
 // config values
 var frontendUrl = null;
 var backendUrl = null;
-var backendPort = 17442;
+var backendPort = null;
 var usingEncryption = null;
 var basePath = null;
 var audioFolderPath = null;
@@ -68,11 +69,6 @@ var descriptors = {};
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 
-app.get('/using-encryption', function(req, res) {
-    res.send(usingEncryption);
-    res.end("yes");
-});
-
 // objects
 
 function File(id, title, thumbnailURL, isAudio, duration) {
@@ -89,7 +85,7 @@ function startServer() {
     if (usingEncryption)
     {
         https.createServer(options, app).listen(backendPort, function() {
-            console.log('HTTPS: Anchor set on 17442');
+            console.log('HTTPS: Started on PORT ' + backendPort);
         });
     }
     else
@@ -125,11 +121,9 @@ async function loadConfig() {
         // get config library
         // config = require('config');
 
-        frontendUrl = !debugMode ? config_api.getConfigItem('ytdl_frontend_url') : 'http://localhost:4200';
-        backendUrl = config_api.getConfigItem('ytdl_backend_url')
-        backendPort = 17442;
+        url = !debugMode ? config_api.getConfigItem('ytdl_url') : 'http://localhost:4200';
+        backendPort = config_api.getConfigItem('ytdl_port');
         usingEncryption = config_api.getConfigItem('ytdl_use_encryption');
-        basePath = config_api.getConfigItem('ytdl_base_path');
         audioFolderPath = config_api.getConfigItem('ytdl_audio_folder_path');
         videoFolderPath = config_api.getConfigItem('ytdl_video_folder_path');
         downloadOnlyMode = config_api.getConfigItem('ytdl_download_only_mode');
@@ -153,7 +147,7 @@ async function loadConfig() {
             };
         }
 
-        url_domain = new URL(frontendUrl);
+        url_domain = new URL(url);
 
         // start the server here
         startServer();
@@ -506,7 +500,21 @@ app.use(function(req, res, next) {
     next();
 });
 
-app.post('/tomp3', function(req, res) {
+app.use(compression());
+
+app.get('/api/config', function(req, res) {
+    let config_file = config_api.getConfigFile();
+    res.send({
+        config_file: config_file,
+        success: !!config_file
+    });
+});
+
+app.get('/api/using-encryption', function(req, res) {
+    res.send(usingEncryption);
+});
+
+app.post('/api/tomp3', function(req, res) {
     var url = req.body.url;
     var date = Date.now();
     var audiopath = '%(title)s';
@@ -515,13 +523,15 @@ app.post('/tomp3', function(req, res) {
     var maxBitrate = req.body.maxBitrate;
     var customArgs = req.body.customArgs;
     var customOutput = req.body.customOutput;
+    var youtubeUsername = req.body.youtubeUsername;
+    var youtubePassword = req.body.youtubePassword;
 
 
     let downloadConfig = null;
     let qualityPath = '';
 
     if (customArgs) {
-        downloadConfig = [customArgs];
+        downloadConfig = customArgs.split(' ');
     } else {
         if (customOutput) {
             downloadConfig = ['-o', audioFolderPath + customOutput + '.mp3', '-x', '--audio-format', 'mp3', '--write-info-json', '--print-json'];
@@ -535,6 +545,10 @@ app.post('/tomp3', function(req, res) {
             if (!maxBitrate || maxBitrate === '') maxBitrate = '0'; 
             qualityPath = `--audio-quality ${maxBitrate}`
         }
+
+        if (youtubeUsername && youtubePassword) {
+            downloadConfig.push('--username', youtubeUsername, '--password', youtubePassword);
+        }
     
         if (qualityPath !== '') {
             downloadConfig.splice(2, 0, qualityPath);
@@ -588,7 +602,7 @@ app.post('/tomp3', function(req, res) {
     });
 });
 
-app.post('/tomp4', function(req, res) {
+app.post('/api/tomp4', function(req, res) {
     var url = req.body.url;
     var date = Date.now();
     var path = videoFolderPath;
@@ -598,12 +612,14 @@ app.post('/tomp4', function(req, res) {
 
     var selectedHeight = req.body.selectedHeight;
     var customQualityConfiguration = req.body.customQualityConfiguration;
+    var youtubeUsername = req.body.youtubeUsername;
+    var youtubePassword = req.body.youtubePassword;
 
     let downloadConfig = null;
     let qualityPath = 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4';
 
     if (customArgs) {
-        downloadConfig = [customArgs];
+        downloadConfig = customArgs.split(' ');
     } else {
         if (customOutput) {
             downloadConfig = ['-o', path + customOutput + ".mp4", '-f', qualityPath, '--write-info-json', '--print-json'];
@@ -616,6 +632,10 @@ app.post('/tomp4', function(req, res) {
         } else if (selectedHeight && selectedHeight !== '') {
             qualityPath = `bestvideo[height=${selectedHeight}]+bestaudio/best[height=${selectedHeight}]`;
         }
+
+        if (youtubeUsername && youtubePassword) {
+            downloadConfig.push('--username', youtubeUsername, '--password', youtubePassword);
+        }
     
         if (!useDefaultDownloadingAgent && customDownloadingAgent === 'aria2c') {
             downloadConfig.splice(0, 0, '--external-downloader', 'aria2c');
@@ -676,7 +696,7 @@ app.post('/tomp4', function(req, res) {
 });
 
 // gets the status of the mp3 file that's being downloaded
-app.post('/fileStatusMp3', function(req, res) {
+app.post('/api/fileStatusMp3', function(req, res) {
     var name = decodeURI(req.body.name + "");
     var exists = "";
     var fullpath = audioFolderPath + name + ".mp3";
@@ -698,7 +718,7 @@ app.post('/fileStatusMp3', function(req, res) {
 });
 
 // gets the status of the mp4 file that's being downloaded
-app.post('/fileStatusMp4', function(req, res) {
+app.post('/api/fileStatusMp4', function(req, res) {
     var name = decodeURI(req.body.name);
     var exists = "";
     var fullpath = videoFolderPath + name + ".mp4";
@@ -718,7 +738,7 @@ app.post('/fileStatusMp4', function(req, res) {
 });
 
 // gets all download mp3s
-app.post('/getMp3s', function(req, res) {
+app.post('/api/getMp3s', function(req, res) {
     var mp3s = [];
     var playlists = db.get('playlists.audio').value();
     var files = recFindByExt(audioFolderPath, 'mp3'); // fs.readdirSync(audioFolderPath);
@@ -750,7 +770,7 @@ app.post('/getMp3s', function(req, res) {
 });
 
 // gets all download mp4s
-app.post('/getMp4s', function(req, res) {
+app.post('/api/getMp4s', function(req, res) {
     var mp4s = [];
     var playlists = db.get('playlists.video').value();
     var fullpath = videoFolderPath;
@@ -782,7 +802,7 @@ app.post('/getMp4s', function(req, res) {
     res.end("yes");
 });
 
-app.post('/createPlaylist', async (req, res) => {
+app.post('/api/createPlaylist', async (req, res) => {
     let playlistName = req.body.playlistName;
     let fileNames = req.body.fileNames;
     let type = req.body.type;
@@ -805,7 +825,7 @@ app.post('/createPlaylist', async (req, res) => {
     })
 });
 
-app.post('/updatePlaylist', async (req, res) => {
+app.post('/api/updatePlaylist', async (req, res) => {
     let playlistID = req.body.playlistID;
     let fileNames = req.body.fileNames;
     let type = req.body.type;
@@ -831,7 +851,7 @@ app.post('/updatePlaylist', async (req, res) => {
     })
 });
 
-app.post('/deletePlaylist', async (req, res) => {
+app.post('/api/deletePlaylist', async (req, res) => {
     let playlistID = req.body.playlistID;
     let type = req.body.type;
 
@@ -853,7 +873,7 @@ app.post('/deletePlaylist', async (req, res) => {
 });
 
 // deletes mp3 file
-app.post('/deleteMp3', async (req, res) => {
+app.post('/api/deleteMp3', async (req, res) => {
     var name = req.body.name;
     var fullpath = audioFolderPath + name + ".mp3";
     var wasDeleted = false;
@@ -873,7 +893,7 @@ app.post('/deleteMp3', async (req, res) => {
 });
 
 // deletes mp4 file
-app.post('/deleteMp4', async (req, res) => {
+app.post('/api/deleteMp4', async (req, res) => {
     var name = req.body.name;
     var fullpath = videoFolderPath + name + ".mp4";
     var wasDeleted = false;
@@ -892,7 +912,7 @@ app.post('/deleteMp4', async (req, res) => {
     }
 });
 
-app.post('/downloadFile', async (req, res) => {
+app.post('/api/downloadFile', async (req, res) => {
     let fileNames = req.body.fileNames;
     let is_playlist = req.body.is_playlist;
     let type = req.body.type;
@@ -915,7 +935,7 @@ app.post('/downloadFile', async (req, res) => {
     res.sendFile(file);
 });
 
-app.post('/deleteFile', async (req, res) => {
+app.post('/api/deleteFile', async (req, res) => {
     let fileName = req.body.fileName;
     let type = req.body.type;
     if (type === 'audio') {
@@ -926,7 +946,7 @@ app.post('/deleteFile', async (req, res) => {
     res.send()
 });
 
-app.get('/video/:id', function(req , res){
+app.get('/api/video/:id', function(req , res){
     var head;
     let id = decodeURI(req.params.id);
     const path = "video/" + id + '.mp4';
@@ -966,7 +986,7 @@ app.get('/video/:id', function(req , res){
     }
 });
 
-app.get('/audio/:id', function(req , res){
+app.get('/api/audio/:id', function(req , res){
     var head;
     let id = decodeURI(req.params.id);
     let path = "audio/" + id + '.mp3';
@@ -1008,7 +1028,7 @@ app.get('/audio/:id', function(req , res){
   });
 
 
-  app.post('/getVideoInfos', async (req, res) => {
+  app.post('/api/getVideoInfos', async (req, res) => {
     let fileNames = req.body.fileNames;
     let urlMode = !!req.body.urlMode;
     let type = req.body.type;
@@ -1027,3 +1047,22 @@ app.get('/audio/:id', function(req , res){
         success: !!result
     })
 });
+
+app.use(function(req, res, next) {
+    //if the request is not html then move along
+    var accept = req.accepts('html', 'json', 'xml');
+    if (accept !== 'html') {
+        return next();
+    }
+
+    // if the request has a '.' assume that it's for a file, move along
+    var ext = path.extname(req.path);
+    if (ext !== '') {
+        return next();
+    }
+
+    fs.createReadStream('./public/index.html').pipe(res);
+
+});
+
+app.use(express.static('./public'));

backend/config.js

@@ -108,5 +108,6 @@ module.exports = {
     getConfigItem: getConfigItem,
     setConfigItem: setConfigItem,
     setConfigItems: setConfigItems,
+    getConfigFile: getConfigFile,
     CONFIG_ITEMS: CONFIG_ITEMS
 }

backend/config/default.json

@@ -1,8 +1,8 @@
 {
     "YoutubeDLMaterial": {
         "Host": {
-            "frontendurl": "http://example.com",
-            "backendurl": "http://example.com:17442/"
+            "url": "http://example.com",
+            "port": "17442"
         },
       "Encryption": {
         "use-encryption": false,
@@ -10,7 +10,6 @@
         "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "http://example.com:17442/",
         "path-audio": "audio/",
         "path-video": "video/"
       },

backend/config/encrypted.json

@@ -1,16 +1,15 @@
 {
     "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "https://example.com",
-            "backendurl": "https://example.com:17442/"
-        },
+      "Host": {
+        "url": "https://example.com",
+        "port": "17442"
+      },
       "Encryption": {
         "use-encryption": true,
         "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
         "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "https://example.com:17442/",
         "path-audio": "audio/",
         "path-video": "video/"
       },

backend/consts.js

@@ -2,13 +2,13 @@ var config = require('config');
 
 let CONFIG_ITEMS = {
     // Host
-    'ytdl_frontend_url': {
-        'key': 'ytdl_frontend_url',
-        'path': 'YoutubeDLMaterial.Host.frontendurl'
+    'ytdl_url': {
+        'key': 'ytdl_url',
+        'path': 'YoutubeDLMaterial.Host.url'
     },
-    'ytdl_backend_url': {
-        'key': 'ytdl_backend_url',
-        'path': 'YoutubeDLMaterial.Host.backendurl'
+    'ytdl_port': {
+        'key': 'ytdl_port',
+        'path': 'YoutubeDLMaterial.Host.port'
     },
 
     // Encryption
@@ -26,10 +26,6 @@ let CONFIG_ITEMS = {
     },
 
     // Downloader
-    'ytdl_base_path': {
-        'key': 'ytdl_base_path',
-        'path': 'YoutubeDLMaterial.Downloader.path-base'
-    },
     'ytdl_audio_folder_path': {
         'key': 'ytdl_audio_folder_path',
         'path': 'YoutubeDLMaterial.Downloader.path-audio'

backend/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "archiver": "^3.1.1",
     "async": "^3.1.0",
+    "compression": "^1.7.4",
     "config": "^3.2.3",
     "exe": "^1.0.2",
     "express": "^4.17.1",

chrome-extension.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDMX9Wk5SM5cIfY
+6ReKX3ybY1rsbNbOzG8ceN7yyeXB0mor8pVsX1MOna2HewOyBuaaYNJRO4tJBxic
+7a8zQErfgHL/i/QrVvVCpfJ7xKvq6zij5NYoqd/FBUwawqjeH5/voIcAp9z5Vmsr
+kL0sxJUKy6b4IWNp3noU7Nvq2RwxnXQbKDhz8FrX6oQAnDC6gsG5a2OSPsaE4oqw
+6nmonORJypmpP5hqyHY8ffXBT2lAxjHT7OnYbaCBe2TQP8+rH6rDBOhjVNtUJ089
+ocTQL6LtQEPkcF4yKJmtcOwHl8OPGZs5l9i8xb4j9RuSPkm2lbzZX8sOsdGGoqJZ
+q68nYhsHAgMBAAECggEAXmtKEzfPObq88B/kAcgSk+FngMHZzcmR7bgD3GwdSxnQ
+dkRI9zvk7eQ35tcUwntAr4Lat6/ILjFqlBmVLxrdXHuF5Xz9jcZLYgKzz61xdYM9
+dC6FKF0u5eGIIvbauGAo7jaeGFX1F3Zu5b4lP9kEOGwU1B7sxF0FzsQM5+dtCJgv
+We/hWQeF+9gtoVnkCSS/Mq2p0UomXXHW0Bz4+HuHlTR9aiYbviYnotABiLUhZyzt
+v5yUaktb9qniBfdLpRlq8cp06xYlTEA9gJpa4Pnok8OWUsbAiW6EiXUSaZ/cchVa
+AnO8WWYvVOnnt6WHI3+QdFTnqVjE5TBX4N/7bVhHGQKBgQD0dtbFqp7vZK/jVYvE
+z0WPdySOg2ZDmoSfk5ZlR1+Y9zWToHv0qu8zqoOjL8Ubxrh9fGlOow+cCVdkEuaa
+jWC2AWetuRvW0Z5A3XMXr0/N/1fgOkTqtp3WNrUPjVJahEg3lN+90opgFoT8swSi
+s1oxW0oLcVIlrjhGBXAPCfsAuQKBgQDWBLRhHsRAvGcK5wGuVnxVApTIyBOermsW
+3bJt+7+UI+4sYrBAwkWdQG93IG0cQtn48TEPBgmR2fjRF5IFT9M4/u+QOeeByT7I
+we7nVtHgSY5ByC9N0mjWbcmSg8fktz/LonjldNC4kWdOFb75fxGf8kOGS5rUaMA4
+zHucfB6ZvwKBgQCPHJrysMXGY21MaqIeHzEboaX3ABl37hdBzAa5V6UxSVdGCydF
+vmO2HVZey/JaJmWOoKyNaowSzq0oWqBBTg6VvhDR9JHFmoVId9uOvAS+FYN+Mt5x
+gWK5KuGoLxVNBC+6yh6JY526TrSfsrU+Aj0Es+qO9FIg2PL8muZVB4S3kQKBgH/5
+CDMaxpc/EQ5/2413wZjDllwI51J3USm3Hz6Mzp2ybnSz/lh60k2Zfg1polTH1Lb6
+4i7tmUNRZ2sAARyUAuWN64n+VeRRhe1dqZFDZPQMh7fmEAMk0fOGaoXlrt2ghdEq
+Mchi9Xun1nHmpu9hgBR4NNBU3RwuFuLfwvprbZDZAoGAWa62QJChE86xQGP1MrL2
+SbIzw3cfeP5xdQ3MKldJiy5IkbMR7Z13WZ7FwvPTy0g/onLHD1rqlm1kUMsGRHpD
+5vH06PNpKXQ6x8BYaRGtE6P39jLycO/X+WK/lYTrWo1bR+mGCebDh4B5XrwT3gI6
+x4Gvz134pZCTyQCf5JCwbQs=
+-----END PRIVATE KEY-----

chrome-extension/background.js

@@ -0,0 +1,20 @@
+// background.js
+
+// Called when the user clicks on the browser action.
+chrome.browserAction.onClicked.addListener(function(tab) {
+    // get the frontend_url
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            var activeTab = tabs[0];
+            var url = activeTab.url;
+            if (url.includes('youtube.com')) {
+                var new_url = items.frontend_url + '/#/home;url=' + encodeURIComponent(url) + ';audioOnly=' + items.audio_only;
+              chrome.tabs.create({ url: new_url });
+            }
+        });
+    });
+    
+});

chrome-extension/manifest.json

@@ -0,0 +1,20 @@
+{
+    "manifest_version": 2,
+    "name": "YoutubeDL-Material",
+    "version": "0.1",
+    "description": "The official chrome extension of YoutubeDL-Material, an open-source and self-hosted YouTube downloader.",
+    "background": {
+        "scripts": ["background.js"]
+    },
+    "browser_action": {
+        "default_icon": "favicon.png"
+    },
+    "permissions": [
+        "tabs",
+        "storage"
+    ],
+    "options_ui": {
+        "page": "options.html",
+        "open_in_tab": false
+    }
+}

chrome-extension/options.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head><title>YoutubeDL-Material Extension Options</title></head>
+<body>
+
+<h2>Settings</h2>
+
+<div>
+    <h4>Frontend URL</h4>
+  <input placeholder="Frontend URL" type="text" id="frontend_url">
+</div>
+
+<br/>
+
+<div>
+    <label>
+        <input type="checkbox" id="audio_only">
+        Audio only
+    </label>
+</div>
+
+<br/>
+
+<div id="status"></div>
+<button id="save">Save</button>
+
+<script src="options.js"></script>
+</body>
+</html>

chrome-extension/options.js

@@ -0,0 +1,31 @@
+// Saves options to chrome.storage
+function save_options() {
+    var frontend_url = document.getElementById('frontend_url').value;
+    var audio_only = document.getElementById('audio_only').checked;
+    chrome.storage.sync.set({
+        frontend_url: frontend_url,
+        audio_only: audio_only
+    }, function() {
+      // Update status to let user know options were saved.
+      var status = document.getElementById('status');
+      status.textContent = 'Options saved.';
+      setTimeout(function() {
+        status.textContent = '';
+      }, 750);
+    });
+  }
+  
+  // Restores select box and checkbox state using the preferences
+  // stored in chrome.storage.
+  function restore_options() {
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+      document.getElementById('frontend_url').value = items.frontend_url;
+      document.getElementById('audio_only').checked = items.audio_only;
+    });
+  }
+  document.addEventListener('DOMContentLoaded', restore_options);
+  document.getElementById('save').addEventListener('click',
+      save_options);

docker-compose.yml

@@ -5,19 +5,18 @@ services:
         build: .
         environment: 
             # config items
-            ytdl_frontend_url: http://localhost:8998
-            ytdl_backend_url: http://localhost:17442/
+            ytdl_url: http://localhost:8998
+            ytdl_port: '17442'
             ytdl_use_encryption: 'false'
             ytdl_cert_file_path: /etc/letsencrypt/live/example.com/fullchain.pem
             ytdl_key_file_path: /etc/letsencrypt/live/example.com/privkey.pem
-            ytdl_base_path: http://localhost:17442/
             ytdl_audio_folder_path: audio/
             ytdl_video_folder_path: video/
             ytdl_title_top: Youtube Downloader
             ytdl_file_manager_enabled: 'true'
             ytdl_allow_quality_select: 'true'
             ytdl_download_only_mode: 'false'
-            ytdl_allow_multi_download_mode: true
+            ytdl_allow_multi_download_mode: 'true'
             ytdl_use_youtube_api: 'false'
             ytdl_youtube_api_key: 'false'
             ytdl_default_theme: default
@@ -30,6 +29,5 @@ services:
             ALLOW_CONFIG_MUTATIONS: 'true'
         restart: always
         ports:
-            - "17442:17442"
-            - "8998:80"
-        image: tzahi12345/youtubedl-material:3.1
+            - "8998:17442"
+        image: tzahi12345/youtubedl-material:3.3

src/app/app.component.ts

@@ -40,7 +40,8 @@ export class AppComponent implements OnInit {
     public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) {
 
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
       this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
       const themingExists = result['YoutubeDLMaterial']['Themes'];
       this.defaultTheme = themingExists ? result['YoutubeDLMaterial']['Themes']['default_theme'] : 'default';

src/app/main/main.component.css

@@ -119,6 +119,4 @@ mat-form-field.mat-form-field {
 
 .advanced-input {
     width: 100%;
-    margin-top: 20px;
-    margin-bottom: 20px;
 }

src/app/main/main.component.html

@@ -61,7 +61,7 @@
         </mat-card-actions>
     </mat-card>
 </div>
-<div *ngIf="false && allowAdvancedDownload" class="big demo-basic">
+<div *ngIf="allowAdvancedDownload" class="big demo-basic">
     <form style="margin-left: 20px; margin-right: 20px;">
         <mat-expansion-panel class="big">
             <mat-expansion-panel-header>
@@ -71,18 +71,29 @@
             </mat-expansion-panel-header>
             <div class="container" style="padding-bottom: 20px;">
                 <div class="row">
-                    <div class="col">
-                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
-                        <mat-form-field color="accent" class="advanced-input">
+                    <div class="col-12 col-sm-6">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
+                        <mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
                             <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
                             <mat-hint>No need to include URL, just everything after.</mat-hint>
                         </mat-form-field>
                     </div>
-                    <div class="col">
-                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
-                        <mat-form-field color="accent" class="advanced-input">
+                    <div class="col-12 col-sm-6">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
+                        <mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
                             <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output">
-                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">This link</a> will be helpful. Path is relative to the config download path.</mat-hint>
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">Documentation</a>. Path is relative to the config download path. Don't include extension.</mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
+                        </mat-form-field>
+                    </div>
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
+                        <mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password">
                         </mat-form-field>
                     </div>
                 </div>

src/app/main/main.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList, isDevMode } from '@angular/core';
 import {PostsService} from '../posts.services';
 import {FileCardComponent} from '../file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
@@ -15,7 +15,7 @@ import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from '../youtube-search.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
 import { Platform } from '@angular/cdk/platform';
 import { v4 as uuid } from 'uuid';
@@ -41,6 +41,8 @@ export interface Download {
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
+  youtubeAuthDisabledOverride = true;
+
   iOS = false;
 
   determinateProgress = false;
@@ -51,18 +53,21 @@ export class MainComponent implements OnInit {
   customArgs = null;
   customOutputEnabled = false;
   customOutput = null;
+  youtubeAuthEnabled = false;
+  youtubeUsername = null;
+  youtubePassword = null;
   urlError = false;
   path = '';
   url = '';
   exists = '';
   percentDownloaded: number;
+  autoStartDownload = false;
 
   // settings
   fileManagerEnabled = false;
   allowQualitySelect = false;
   downloadOnlyMode = false;
   allowMultiDownloadMode = false;
-  baseStreamPath;
   audioFolderPath;
   videoFolderPath;
   allowAdvancedDownload = false;
@@ -78,7 +83,7 @@ export class MainComponent implements OnInit {
 
   mp3s: any[] = [];
   mp4s: any[] = [];
-  files_cols = (window.innerWidth <= 450) ? 2 : 4;
+  files_cols = null;
   playlists = {'audio': [], 'video': []};
   playlist_thumbnails = {};
   downloading_content = {'audio': {}, 'video': {}};
@@ -198,16 +203,15 @@ export class MainComponent implements OnInit {
   };
 
   constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar,
-    private router: Router, public dialog: MatDialog, private platform: Platform) {
+    private router: Router, public dialog: MatDialog, private platform: Platform, private route: ActivatedRoute) {
     this.audioOnly = false;
 
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
       this.fileManagerEnabled = result['YoutubeDLMaterial']['Extra']['file_manager_enabled'];
       this.downloadOnlyMode = result['YoutubeDLMaterial']['Extra']['download_only_mode'];
       this.allowMultiDownloadMode = result['YoutubeDLMaterial']['Extra']['allow_multi_download_mode'];
-      this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
       this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
       this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
       this.youtubeSearchEnabled = result['YoutubeDLMaterial']['API'] && result['YoutubeDLMaterial']['API']['use_youtube_API'] &&
@@ -216,9 +220,6 @@ export class MainComponent implements OnInit {
       this.allowQualitySelect = result['YoutubeDLMaterial']['Extra']['allow_quality_select'];
       this.allowAdvancedDownload = result['YoutubeDLMaterial']['Advanced']['allow_advanced_download'];
 
-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
 
       if (this.fileManagerEnabled) {
         this.getMp3s();
@@ -239,6 +240,23 @@ export class MainComponent implements OnInit {
         if (localStorage.getItem('customOutputEnabled') !== null) {
           this.customOutputEnabled = localStorage.getItem('customOutputEnabled') === 'true';
         }
+
+        if (localStorage.getItem('youtubeAuthEnabled') !== null) {
+          this.youtubeAuthEnabled = localStorage.getItem('youtubeAuthEnabled') === 'true';
+        }
+
+        // set advanced inputs
+        const customArgs = localStorage.getItem('customArgs');
+        const customOutput = localStorage.getItem('customOutput');
+        const youtubeUsername = localStorage.getItem('youtubeUsername');
+
+        if (customArgs && customArgs !== 'null') { this.customArgs = customArgs };
+        if (customOutput && customOutput !== 'null') { this.customOutput = customOutput };
+        if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
+      }
+
+      if (this.autoStartDownload) {
+        this.downloadClicked();
       }
 
     }, error => {
@@ -247,6 +265,31 @@ export class MainComponent implements OnInit {
 
   }
 
+  // app initialization.
+  ngOnInit() {
+    this.iOS = this.platform.IOS;
+
+    // get checkboxes
+    if (localStorage.getItem('audioOnly') !== null) {
+      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
+    }
+
+    if (localStorage.getItem('multiDownloadMode') !== null) {
+      this.multiDownloadMode = localStorage.getItem('multiDownloadMode') === 'true';
+    }
+
+    // check if params exist
+    if (this.route.snapshot.paramMap.get('url')) {
+      this.url = decodeURIComponent(this.route.snapshot.paramMap.get('url'));
+      this.audioOnly = this.route.snapshot.paramMap.get('audioOnly') === 'true';
+
+      // set auto start flag to true
+      this.autoStartDownload = true;
+    }
+
+    this.setCols();
+  }
+
   // file manager stuff
 
   getMp3s() {
@@ -302,6 +345,18 @@ export class MainComponent implements OnInit {
     });
   }
 
+  public setCols() {
+    if (window.innerWidth <= 350) {
+      this.files_cols = 1;
+    } else if (window.innerWidth <= 500) {
+      this.files_cols = 2;
+    } else if (window.innerWidth <= 750) {
+      this.files_cols = 3
+    } else {
+      this.files_cols = 4;
+    }
+  }
+
   public goToFile(name, isAudio) {
     if (isAudio) {
       this.downloadHelperMp3(name, false, false);
@@ -372,21 +427,6 @@ export class MainComponent implements OnInit {
     });
   }
 
-
-  // app initialization.
-  ngOnInit() {
-    // this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
-    this.iOS = this.platform.IOS;
-
-    if (localStorage.getItem('audioOnly') !== null) {
-      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
-    }
-
-    if (localStorage.getItem('multiDownloadMode') !== null) {
-      this.multiDownloadMode = localStorage.getItem('multiDownloadMode') === 'true';
-    }
-  }
-
   // download helpers
 
   downloadHelperMp3(name, is_playlist = false, forceView = false, new_download = null) {
@@ -394,7 +434,7 @@ export class MainComponent implements OnInit {
 
     if (new_download && this.current_download !== new_download) {
       // console.log('mismatched downloads');
-    } else if (!this.multiDownloadMode) {
+    } else if (!this.multiDownloadMode || !new_download) {
       // if download only mode, just download the file. no redirect
       if (forceView === false && this.downloadOnlyMode && !this.iOS) {
         if (is_playlist) {
@@ -406,10 +446,8 @@ export class MainComponent implements OnInit {
       } else {
         if (is_playlist) {
           this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'audio'}]);
-          // window.location.href = this.baseStreamPath + this.audioFolderPath + name[0] + '.mp3';
         } else {
           this.router.navigate(['/player', {fileNames: name, type: 'audio'}]);
-          // window.location.href = this.baseStreamPath + this.audioFolderPath + name + '.mp3';
         }
       }
     }
@@ -433,7 +471,7 @@ export class MainComponent implements OnInit {
 
     if (new_download && this.current_download !== new_download) {
       // console.log('mismatched downloads');
-    } else if (!this.multiDownloadMode) {
+    } else if (!this.multiDownloadMode || !new_download) {
       // if download only mode, just download the file. no redirect
       if (forceView === false && this.downloadOnlyMode) {
         if (is_playlist) {
@@ -445,10 +483,8 @@ export class MainComponent implements OnInit {
       } else {
         if (is_playlist) {
           this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'video'}]);
-          // window.location.href = this.baseStreamPath + this.videoFolderPath + name[0] + '.mp4';
         } else {
           this.router.navigate(['/player', {fileNames: name, type: 'video'}]);
-          // window.location.href = this.baseStreamPath + this.videoFolderPath + name + '.mp4';
         }
       }
     }
@@ -473,6 +509,25 @@ export class MainComponent implements OnInit {
       this.urlError = false;
       this.path = '';
 
+      // get common args
+      const customArgs = (this.customArgsEnabled ? this.customArgs : null);
+      const customOutput = (this.customOutputEnabled ? this.customOutput : null);
+      const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
+      const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
+
+      // set advanced inputs
+      if (this.allowAdvancedDownload) {
+        if (customArgs) {
+          localStorage.setItem('customArgs', customArgs);
+        }
+        if (customOutput) {
+          localStorage.setItem('customOutput', customOutput);
+        }
+        if (youtubeUsername) {
+          localStorage.setItem('youtubeUsername', youtubeUsername);
+        }
+      }
+
       if (this.audioOnly) {
         // create download object
         const new_download: Download = {
@@ -496,11 +551,8 @@ export class MainComponent implements OnInit {
           }
         }
 
-        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
-        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
-
         this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -538,11 +590,8 @@ export class MainComponent implements OnInit {
           }
         }
 
-        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
-        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
-
         this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -757,7 +806,7 @@ export class MainComponent implements OnInit {
   }
 
   onResize(event) {
-    this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
+    this.setCols();
   }
 
   videoModeChanged(new_val) {
@@ -773,6 +822,10 @@ export class MainComponent implements OnInit {
     localStorage.setItem('customArgsEnabled', new_val.checked.toString());
     if (new_val.checked === true && this.customOutputEnabled) {
       this.customOutputEnabled = false;
+      localStorage.setItem('customOutputEnabled', 'false');
+
+      this.youtubeAuthEnabled = false;
+      localStorage.setItem('youtubeAuthEnabled', 'false');
     }
   }
 
@@ -780,6 +833,15 @@ export class MainComponent implements OnInit {
     localStorage.setItem('customOutputEnabled', new_val.checked.toString());
     if (new_val.checked === true && this.customArgsEnabled) {
       this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
+    }
+  }
+
+  youtubeAuthEnabledChanged(new_val) {
+    localStorage.setItem('youtubeAuthEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customArgsEnabled) {
+      this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
     }
   }
 

src/app/player/player.component.html

@@ -9,7 +9,7 @@
             </div>
             <div class="col-12 my-2">
                 <mat-button-toggle-group cdkDropList [cdkDropListSortingDisabled]="!id" (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{decodeURI(playlist_item.title)}}</mat-button-toggle>
+                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
                 </mat-button-toggle-group>
             </div>
         </div>

src/app/player/player.component.ts

@@ -10,6 +10,7 @@ export interface IMedia {
   title: string;
   src: string;
   type: string;
+  label: string;
 }
 
 @Component({
@@ -53,15 +54,12 @@ export class PlayerComponent implements OnInit {
     this.id = this.route.snapshot.paramMap.get('id');
 
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
+      this.baseStreamPath = this.postsService.path;
       this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
       this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
-      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
 
-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
 
       let fileType = null;
       if (this.type === 'audio') {
@@ -77,10 +75,20 @@ export class PlayerComponent implements OnInit {
         const fileName = this.fileNames[i];
         const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath;
         const fullLocation = this.baseStreamPath + baseLocation + encodeURI(fileName); // + (this.type === 'audio' ? '.mp3' : '.mp4');
+        // if it has a slash (meaning it's in a directory), only get the file name for the label
+        let label = null;
+        const decodedName = decodeURIComponent(fileName);
+        const hasSlash = decodedName.includes('/') || decodedName.includes('\\');
+        if (hasSlash) {
+          label = decodedName.replace(/^.*[\\\/]/, '');
+        } else {
+          label = decodedName;
+        }
         const mediaObject: IMedia = {
           title: fileName,
           src: fullLocation,
-          type: fileType
+          type: fileType,
+          label: label
         }
         this.playlist.push(mediaObject);
       }

src/app/posts.services.ts

@@ -1,4 +1,4 @@
-import {Injectable, isDevMode} from '@angular/core';
+import {Injectable, isDevMode, Inject} from '@angular/core';
 import { HttpClient, HttpHeaders, HttpRequest, HttpResponseBase } from '@angular/common/http';
 import config from '../assets/default.json';
 import 'rxjs/add/operator/map';
@@ -7,20 +7,31 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
 import { THEMES_CONFIG } from '../themes';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable()
 export class PostsService {
     path = '';
     audioFolder = '';
     videoFolder = '';
-    startPath = 'http://localhost:17442/';
-    startPathSSL = 'https://localhost:17442/'
+    startPath = null; // 'http://localhost:17442/';
+    startPathSSL = null; // 'https://localhost:17442/'
     handShakeComplete = false;
     THEMES_CONFIG = THEMES_CONFIG;
     theme;
 
-    constructor(private http: HttpClient) {
+    debugMode = false;
+    constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document) {
         console.log('PostsService Initialized...');
+        // this.startPath = window.location.href + '/api/';
+        // this.startPathSSL = window.location.href + '/api/';
+        this.path = this.document.location.origin + '/api/';
+
+        if (isDevMode()) {
+            this.debugMode = true;
+            this.path = 'http://localhost:17442/api/';
+        }
     }
 
     setTheme(theme) {
@@ -44,21 +55,25 @@ export class PostsService {
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
+    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp3', {url: url,
                                                     maxBitrate: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
-                                                    customOutput: customOutput});
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
     // tslint:disable-next-line: max-line-length
-    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
+    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp4', {url: url,
                                                     selectedHeight: selectedQuality,
                                                     customQualityConfiguration: customQualityConfiguration,
                                                     customArgs: customArgs,
-                                                    customOutput: customOutput});
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
     getFileStatusMp3(name: string) {
@@ -72,10 +87,9 @@ export class PostsService {
     loadNavItems() {
         if (isDevMode()) {
             return this.http.get('./assets/default.json');
+        } else {
+            return this.http.get(this.path + 'config');
         }
-        const locations = window.location.href.split('#');
-        const current_location = locations[0];
-        return this.http.get(current_location + 'backend/config/default.json');
     }
 
     deleteFile(name: string, isAudio: boolean) {

src/assets/default.json

@@ -1,16 +1,15 @@
 {
     "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "http://localhost:4200",
-            "backendurl": "http://localhost:17442/"
-        },
+      "Host": {
+        "url": "http://localhost",
+        "port": "17442"
+      },
       "Encryption": {
         "use-encryption": false,
         "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
         "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "http://localhost:17442/",
         "path-audio": "audio/",
         "path-video": "video/"
       },