From 2f541a49dfa961501e73aac027ba3e1cd588e7ab Mon Sep 17 00:00:00 2001
From: Isaac Abadi <IsaacMGrynsztein@gmail.com>
Date: Wed, 25 Nov 2020 15:36:00 -0500
Subject: [PATCH] Thumbnails now load using a faster method with a dedicated
 API route rather than sending blobs directly. - In cases of lots of files,
 loading should be significantly faster

---
 backend/app.js                                    | 15 +++++++++++----
 .../recent-videos/recent-videos.component.html    |  2 +-
 .../unified-file-card.component.html              |  2 +-
 .../unified-file-card.component.ts                | 11 +++++++----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/backend/app.js b/backend/app.js
index ba0d3d8..1a5e9f1 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -1700,6 +1700,7 @@ async function downloadLatestYoutubeDLBinary(current_version, new_version) {
         let binary_path = 'node_modules/youtube-dl/bin';
         downloader(binary_path, function error(err, done) {
             if (err) {
+                logger.error(`youtube-dl failed to update. Restart the server to try again.`);
                 logger.error(err);
                 resolve(false);
             }
@@ -1775,7 +1776,7 @@ app.use(function(req, res, next) {
         next();
     } else if (req.query.apiKey && config_api.getConfigItem('ytdl_use_api_key') && req.query.apiKey === config_api.getConfigItem('ytdl_api_key')) {
         next();
-    } else if (req.path.includes('/api/stream/')) {
+    } else if (req.path.includes('/api/stream/') || req.path.includes('/api/thumbnail/')) {
         next();
     } else {
         logger.verbose(`Rejecting request - invalid API use for endpoint: ${req.path}. API key received: ${req.query.apiKey}`);
@@ -1930,7 +1931,7 @@ app.get('/api/getMp3s', optionalJwt, async function(req, res) {
 
     if (config_api.getConfigItem('ytdl_include_thumbnail')) {
         // add thumbnails if present
-        await addThumbnails(mp3s);
+        // await addThumbnails(mp3s);
     }
 
 
@@ -1957,7 +1958,7 @@ app.get('/api/getMp4s', optionalJwt, async function(req, res) {
 
     if (config_api.getConfigItem('ytdl_include_thumbnail')) {
         // add thumbnails if present
-        await addThumbnails(mp4s);
+        // await addThumbnails(mp4s);
     }
 
     res.send({
@@ -2048,7 +2049,7 @@ app.post('/api/getAllFiles', optionalJwt, async function (req, res) {
 
     if (config_api.getConfigItem('ytdl_include_thumbnail')) {
         // add thumbnails if present
-        await addThumbnails(files);
+        // await addThumbnails(files);
     }
 
     res.send({
@@ -2731,6 +2732,12 @@ app.get('/api/stream/:id', optionalJwt, (req, res) => {
     }
 });
 
+app.get('/api/thumbnail/:path', optionalJwt, async (req, res) => {
+    let file_path = decodeURIComponent(req.params.path);
+    if (fs.existsSync(file_path)) path.isAbsolute(file_path) ? res.sendFile(file_path) : res.sendFile(path.join(__dirname, file_path));
+    else res.sendStatus(404);
+});
+
   // Downloads management
 
   app.get('/api/downloads', async (req, res) => {
diff --git a/src/app/components/recent-videos/recent-videos.component.html b/src/app/components/recent-videos/recent-videos.component.html
index 258ff81..bf6d596 100644
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -32,7 +32,7 @@
         <div class="row justify-content-center">
             <ng-container *ngIf="normal_files_received">
                 <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
                 </div>
             </ng-container>
             <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
diff --git a/src/app/components/unified-file-card/unified-file-card.component.html b/src/app/components/unified-file-card/unified-file-card.component.html
index a86206b..a080324 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/src/app/components/unified-file-card/unified-file-card.component.html
@@ -41,7 +41,7 @@
         <div style="padding:5px">
             <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
                 <div style="position: relative">
-                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailBlob ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
                     <div class="duration-time">
                         {{file_length}}
                     </div>
diff --git a/src/app/components/unified-file-card/unified-file-card.component.ts b/src/app/components/unified-file-card/unified-file-card.component.ts
index a2a9947..38461bc 100644
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.ts
@@ -44,11 +44,13 @@ export class UnifiedFileCardComponent implements OnInit {
   @Input() is_playlist = false;
   @Input() index: number;
   @Input() locale = null;
+  @Input() baseStreamPath = null;
+  @Input() jwtString = null;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
   @Output() deleteFile = new EventEmitter<any>();
   @Output() editPlaylist = new EventEmitter<any>();
-  
+
 
   @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
   contextMenuPosition = { x: '0px', y: '0px' };
@@ -67,11 +69,12 @@ export class UnifiedFileCardComponent implements OnInit {
       this.file_length = fancyTimeFormat(this.file_obj.duration);
     }
 
-    if (this.file_obj && this.file_obj.thumbnailBlob) {
-      const mime = getMimeByFilename(this.file_obj.thumbnailPath);
+    if (this.file_obj && this.file_obj.thumbnailPath) {
+      this.thumbnailBlobURL = `${this.baseStreamPath}thumbnail/${encodeURIComponent(this.file_obj.thumbnailPath)}${this.jwtString}`;
+      /*const mime = getMimeByFilename(this.file_obj.thumbnailPath);
       const blob = new Blob([new Uint8Array(this.file_obj.thumbnailBlob.data)], {type: mime});
       const bloburl = URL.createObjectURL(blob);
-      this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);
+      this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
     }
   }