UX: Improve video player size, background and error handling #1307 #3372

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/css/viewer.css

@@ -10,7 +10,7 @@
     top: 0;
     bottom: 0;
     right: 0;
-    background-color: rgba(0,0,0,0.66);
+    background-color: rgba(0,0,0,0.72);
 }
 
 #photoprism .video-wrapper {

frontend/src/model/photo.js

@@ -437,8 +437,8 @@ export class Photo extends RestModel {
       width = newWidth;
     }
 
-    if (vh < height + 100) {
-      let newHeight = vh - 160;
+    if (vh < height + 80) {
+      let newHeight = vh - 90;
       width = Math.round(newHeight * (actualWidth / actualHeight));
       height = newHeight;
     }
@@ -580,25 +580,28 @@ export class Photo extends RestModel {
     return this.generateThumbnailUrl(
       this.mainFileHash(),
       this.videoFile(),
+      config.staticUri,
       config.contentUri,
       config.previewToken,
       size
     );
   }
 
-  generateThumbnailUrl = memoizeOne((mainFileHash, videoFile, contentUri, previewToken, size) => {
-    let hash = mainFileHash;
+  generateThumbnailUrl = memoizeOne(
+    (mainFileHash, videoFile, staticUri, contentUri, previewToken, size) => {
+      let hash = mainFileHash;
 
-    if (!hash) {
-      if (videoFile && videoFile.Hash) {
-        return `${contentUri}/t/${videoFile.Hash}/${previewToken}/${size}`;
+      if (!hash) {
+        if (videoFile && videoFile.Hash) {
+          return `${contentUri}/t/${videoFile.Hash}/${previewToken}/${size}`;
+        }
+
+        return `${staticUri}/img/404.jpg`;
       }
 
-      return `${contentUri}/svg/photo`;
+      return `${contentUri}/t/${hash}/${previewToken}/${size}`;
     }
-
-    return `${contentUri}/t/${hash}/${previewToken}/${size}`;
-  });
+  );
 
   getDownloadUrl() {
     return `${config.apiUri}/dl/${this.mainFileHash()}?t=${config.downloadToken}`;

frontend/src/model/thumb.js

@@ -68,10 +68,10 @@ export class Thumb extends Model {
     }
   }
 
-  static thumbNotFound() {
+  static notFound() {
     const result = {
       UID: "",
-      Title: $gettext("Not Found"),
+      Title: $gettext("Invalid photo selected"),
       TakenAtLocal: "",
       Description: "",
       Favorite: false,
@@ -85,8 +85,8 @@ export class Thumb extends Model {
     for (let i = 0; i < thumbs.length; i++) {
       let t = thumbs[i];
 
-      result[t.size] = {
-        src: `${config.contentUri}/svg/photo`,
+      result.Thumbs[t.size] = {
+        src: `${config.staticUri}/img/404.jpg`,
         w: t.w,
         h: t.h,
       };
@@ -112,7 +112,7 @@ export class Thumb extends Model {
     }
 
     if (!photo || !photo.Hash) {
-      return this.thumbNotFound();
+      return this.notFound();
     }
 
     const result = {
@@ -144,7 +144,7 @@ export class Thumb extends Model {
 
   static fromFile(photo, file) {
     if (!photo || !file || !file.Hash) {
-      return this.thumbNotFound();
+      return this.notFound();
     }
 
     const result = {
@@ -236,7 +236,7 @@ export class Thumb extends Model {
 
   static thumbnailUrl(file, size) {
     if (!file.Hash) {
-      return `${config.contentUri}/svg/photo`;
+      return `${config.staticUri}/img/404.jpg`;
     }
 
     return `${config.contentUri}/t/${file.Hash}/${config.previewToken}/${size}`;

frontend/tests/unit/model/photo_test.js

@@ -72,7 +72,7 @@ describe("model/photo", () => {
     };
     const photo3 = new Photo(values3);
     const result3 = photo3.thumbnailUrl("tile500");
-    assert.equal(result3, "/api/v1/svg/photo");
+    assert.equal(result3, "/static/img/404.jpg");
   });
 
   it("should get classes", () => {
@@ -637,8 +637,8 @@ describe("model/photo", () => {
     };
     const photo3 = new Photo(values3);
     const result = photo3.videoParams();
-    assert.equal(result.height, "463");
-    assert.equal(result.width, "695");
+    assert.equal(result.height, 463);
+    assert.equal(result.width, 695);
     assert.equal(result.loop, false);
     assert.equal(result.uri, "/api/v1/videos/1xxbgdt55/public/avc");
     const values = {
@@ -669,8 +669,8 @@ describe("model/photo", () => {
     };
     const photo = new Photo(values);
     const result2 = photo.videoParams();
-    assert.equal(result2.height, "440");
-    assert.equal(result2.width, "440");
+    assert.equal(result2.height, 510);
+    assert.equal(result2.width, 510);
     assert.equal(result2.loop, false);
     assert.equal(result2.uri, "/api/v1/videos/1xxbgdt55/public/avc");
   });

frontend/tests/unit/model/thumb_test.js

@@ -67,7 +67,7 @@ describe("model/thumb", () => {
   });
 
   it("should return thumb not found", () => {
-    const result = Thumb.thumbNotFound();
+    const result = Thumb.notFound();
     assert.equal(result.UID, "");
     assert.equal(result.Favorite, false);
   });
@@ -289,7 +289,7 @@ describe("model/thumb", () => {
       Name: "1/2/IMG123.jpg",
     };
     const file2 = new File(values2);
-    assert.equal(Thumb.thumbnailUrl(file2, "bcd"), "/api/v1/svg/photo");
+    assert.equal(Thumb.thumbnailUrl(file2, "bcd"), "/static/img/404.jpg");
   });
 
   it("should calculate size", () => {