Added new Angular configuration for codespaces

Added CORS control support for codespaces

.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+    "name": "Node.js",
+    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
+    "features": {
+	"ghcr.io/devcontainers-contrib/features/jshint:2": {},
+	"ghcr.io/devcontainers-contrib/features/angular-cli:2": {},
+	"ghcr.io/devcontainers/features/github-cli:1": {}
+    },
+  
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    "forwardPorts": [4200, 17442],
+  
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "npm install && cd backend && npm install",
+  
+    // Configure tool-specific properties.
+    "customizations": {
+      // Configure properties specific to VS Code.
+      "vscode": {
+        // Add the IDs of extensions you want installed when the container is created.
+        "extensions": [
+			"ms-python.python",
+			"Angular.ng-template",
+			"dbaeumer.vscode-eslint",
+			"waderyan.gitblame",
+			"42Crunch.vscode-openapi",
+			"christian-kohler.npm-intellisense",
+			"redhat.vscode-yaml",
+			"hbenl.vscode-mocha-test-adapter",
+			"DavidAnson.vscode-markdownlint"
+		]
+      }
+    }
+  
+    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+    // "remoteUser": "root"
+  }

angular.json

@@ -66,6 +66,14 @@
                 }
               ]
             },
+            "codespaces": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.codespaces.ts"
+                }
+              ]
+            },
             "es": {
               "localize": ["es"]
             }
@@ -83,6 +91,9 @@
             },
             "es": {
               "browserTarget": "youtube-dl-material:build:es"
+            },
+            "codespaces": {
+              "browserTarget": "youtube-dl-material:build:codespaces"
             }
           }
         },

backend/app.js

@@ -565,6 +565,7 @@ function loadConfigValues() {
 }
 
 function getOrigin() {
+    if (process.env.CODESPACES) return `https://${process.env.CODESPACE_NAME}-4200.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`;
     return url_domain.origin;
 }
 
@@ -589,6 +590,17 @@ function generateEnvVarConfigItem(key) {
     return {key: key, value: process['env'][key]};
 }
 
+// currently only works for single urls
+async function getUrlInfos(url) {
+    const {parsed_output, err} = await youtubedl_api.runYoutubeDL(url, ['--dump-json']);
+    if (!parsed_output || parsed_output.length !== 1) {
+        logger.error(`Failed to retrieve available formats for url: ${url}`);
+        if (err) logger.error(err);
+        return null;
+    }
+    return parsed_output[0];
+}
+
 // youtube-dl functions
 
 async function startYoutubeDL() {
@@ -1859,11 +1871,11 @@ app.post('/api/clearAllLogs', optionalJwt, async function(req, res) {
 });
 
   app.post('/api/getFileFormats', optionalJwt, async (req, res) => {
-    const url = req.body.url;
+    let url = req.body.url;
-    const result = await downloader_api.getVideoInfoByURL(url);
+    let result = await getUrlInfos(url);
     res.send({
-        result: result && result.length === 1 ? result[0] : null,
+        result: result,
-        success: result && result.length === 0
+        success: !!result
     })
 });
 

backend/youtube-dl.js

@@ -118,16 +118,10 @@ async function downloadLatestYoutubeDLBinaryGeneric(youtubedl_fork, new_version,
     const download_url = `${exports.youtubedl_forks[youtubedl_fork]['download_url']}${file_ext}`;
     const output_path = custom_output_path || getYoutubeDLPath(youtubedl_fork);
 
-    try {
+    await utils.fetchFile(download_url, output_path, `${youtubedl_fork} ${new_version}`);
-        await utils.fetchFile(download_url, output_path, `${youtubedl_fork} ${new_version}`);
+    fs.chmod(output_path, 0o777);
-        fs.chmod(output_path, 0o777);
 
-        updateDetailsJSON(new_version, youtubedl_fork, output_path);
+    updateDetailsJSON(new_version, youtubedl_fork, output_path);
-    } catch (e) {
-        logger.error(`Failed to download new ${youtubedl_fork} version: ${new_version}`);
-        logger.error(e);
-        return;
-    }
 } 
 
 exports.getLatestUpdateVersion = async (youtubedl_fork) => {

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "codespaces": "ng serve --configuration=codespaces",
     "build": "ng build --configuration production",
     "prebuild": "node src/postbuild.mjs",
     "heroku-postbuild": "npm install --prefix backend",

src/app/main/main.component.ts

@@ -548,7 +548,7 @@ export class MainComponent implements OnInit {
     }
     if (!(this.cachedAvailableFormats[url] && this.cachedAvailableFormats[url]['formats'])) {
       this.cachedAvailableFormats[url]['formats_loading'] = true;
-      this.postsService.getFileFormats(url).subscribe(res => {
+      this.postsService.getFileFormats([url]).subscribe(res => {
         this.cachedAvailableFormats[url]['formats_loading'] = false;
         const infos = res['result'];
         if (!infos || !infos.formats) {

src/app/posts.services.ts

@@ -119,6 +119,7 @@ import {
 import { isoLangs } from './dialogs/user-profile-dialog/locales_list';
 import { Title } from '@angular/platform-browser';
 import { MatDrawerMode } from '@angular/material/sidenav';
+import { environment } from '../environments/environment';
 
 @Injectable()
 export class PostsService implements CanActivate {
@@ -176,7 +177,7 @@ export class PostsService implements CanActivate {
 
         if (isDevMode()) {
             this.debugMode = true;
-            this.path = 'http://localhost:17442/api/';
+            this.path = !environment.codespaces ? 'http://localhost:17442/api/' : `${window.location.origin.replace('4200', '17442')}/api/`;
         }
 
         this.http_params = `apiKey=${this.auth_token}`
@@ -459,7 +460,7 @@ export class PostsService implements CanActivate {
         return this.http.post<SuccessObject>(this.path + 'deleteArchiveItems', body, this.httpOptions);
     }
 
-    getFileFormats(url: string) {
+    getFileFormats(url) {
         const body: GetFileFormatsRequest = {url: url};
         return this.http.post<GetFileFormatsResponse>(this.path + 'getFileFormats', body, this.httpOptions);
     }

src/environments/environment.codespaces.ts

@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  codespaces: true
+};

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  codespaces: false
 };

src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: true
+  production: false,
+  codespaces: false
 };