Frontend: Improve formatting of video codec names #439 #1739 #2788

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

frontend/src/common/util.js

@@ -171,6 +171,7 @@ export default class Util {
         return "Unprocessed Sensor Data (RAW)";
       case "mov":
       case "qt":
+      case "qt  ":
         return "Apple QuickTime";
       case "bmp":
         return "Bitmap";
@@ -193,8 +194,9 @@ export default class Util {
         return "AOMedia Video 1 (AV1)";
       case "avifs":
         return "AVIF Image Sequence";
-      case "hevc":
       case "hvc":
+      case "hevc":
+      case "hev1":
       case "hvc1":
         return "High Efficiency Video Coding (HEVC) / H.265";
       case "m4v":
@@ -235,6 +237,26 @@ export default class Util {
     }
   }
 
+  static formatCodec(codec) {
+    if (!codec) {
+      return "";
+    }
+
+    switch (codec) {
+      case "av1c":
+      case "av01":
+        return "AV1";
+      case "avc1":
+        return "AVC";
+      case "hvc":
+      case "hev1":
+      case "hvc1":
+        return "HEVC";
+      default:
+        return codec.toUpperCase();
+    }
+  }
+
   static codecName(value) {
     if (!value || typeof value !== "string") {
       return "";
@@ -245,16 +267,19 @@ export default class Util {
         return "Unprocessed Sensor Data (RAW)";
       case "mov":
       case "qt":
+      case "qt  ":
         return "Apple QuickTime (MOV)";
       case "avc":
       case "avc1":
         return "Advanced Video Coding (AVC) / H.264";
-      case "hevc":
       case "hvc":
+      case "hevc":
+      case "hev1":
       case "hvc1":
         return "High Efficiency Video Coding (HEVC) / H.265";
       case "vvc":
         return "Versatile Video Coding (VVC) / H.266";
+      case "av1c":
       case "av01":
         return "AOMedia Video 1 (AV1)";
       case "gif":

frontend/src/model/photo.js

@@ -42,9 +42,11 @@ import { canUseOGV, canUseVP8, canUseVP9, canUseAv1, canUseWebM, canUseHevc } fr
 export const CodecOGV = "ogv";
 export const CodecVP8 = "vp8";
 export const CodecVP9 = "vp9";
-export const CodecAv1 = "av01";
+export const CodecAv01 = "av01";
+export const CodecAv1C = "av1c";
 export const CodecAvc1 = "avc1";
 export const CodecHvc1 = "hvc1";
+export const CodecHev1 = "hev1";
 export const FormatMp4 = "mp4";
 export const FormatAv1 = "av01";
 export const FormatAvc = "avc";
@@ -490,7 +492,7 @@ export class Photo extends RestModel {
     if (file) {
       let videoFormat = FormatAvc;
 
-      if (canUseHevc && file.Codec === CodecHvc1) {
+      if (canUseHevc && (file.Codec === CodecHvc1 || file.Codec === CodecHev1)) {
         videoFormat = FormatHevc;
       } else if (canUseOGV && file.Codec === CodecOGV) {
         videoFormat = CodecOGV;
@@ -498,7 +500,7 @@ export class Photo extends RestModel {
         videoFormat = CodecVP8;
       } else if (canUseVP9 && file.Codec === CodecVP9) {
         videoFormat = CodecVP9;
-      } else if (canUseAv1 && file.Codec === CodecAv1) {
+      } else if (canUseAv1 && (file.Codec === CodecAv01 || file.Codec === CodecAv1C)) {
         videoFormat = FormatAv1;
       } else if (canUseWebM && file.FileType === FormatWebM) {
         videoFormat = FormatWebM;
@@ -838,7 +840,7 @@ export class Photo extends RestModel {
     }
 
     if (file.Codec) {
-      info.push(file.Codec.toUpperCase());
+      info.push(Util.formatCodec(file.Codec));
     }
 
     this.addSizeInfo(file, info);
@@ -873,7 +875,7 @@ export class Photo extends RestModel {
     }
 
     if (file && file.Width && file.Codec) {
-      info.push(file.Codec.toUpperCase());
+      info.push(Util.formatCodec(file.Codec));
     }
 
     this.addSizeInfo(file, info);

frontend/tests/unit/model/photo_test.js

@@ -1073,7 +1073,7 @@ describe("model/photo", () => {
       ],
     };
     const photo3 = new Photo(values3);
-    assert.equal(photo3.getVideoInfo(), "6µs, AVC1, 500 × 600, 0.2 MB");
+    assert.equal(photo3.getVideoInfo(), "6µs, AVC, 500 × 600, 0.2 MB");
     const values4 = {
       ID: 10,
       UID: "ABC127",
@@ -1100,7 +1100,7 @@ describe("model/photo", () => {
       ],
     };
     const photo4 = new Photo(values4);
-    assert.equal(photo4.getVideoInfo(), "6µs, AVC1, 300 × 500, 10.0 KB");
+    assert.equal(photo4.getVideoInfo(), "6µs, AVC, 300 × 500, 10.0 KB");
   });
 
   it("should return photo info", () => {
@@ -1150,7 +1150,7 @@ describe("model/photo", () => {
       ],
     };
     const photo3 = new Photo(values3);
-    assert.equal(photo3.getPhotoInfo(), "Canon abcde, AVC1, 500 × 600");
+    assert.equal(photo3.getPhotoInfo(), "Canon abcde, AVC, 500 × 600");
     const values4 = {
       ID: 10,
       UID: "ABC127",
@@ -1182,7 +1182,7 @@ describe("model/photo", () => {
       ],
     };
     const photo4 = new Photo(values4);
-    assert.equal(photo3.getPhotoInfo(), "Canon abcde, AVC1, 500 × 600");
+    assert.equal(photo3.getPhotoInfo(), "Canon abcde, AVC, 500 × 600");
   });
 
   it("should archive photo", () => {