From 8ac7d8c241209eed571462f20466abf85f3c7bb6 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Thu, 14 Mar 2024 10:32:37 -0700
Subject: [PATCH] small cleanup of sizing for media plugin, null checks (#454)

* clean up media viewer size, null check, check for fileurl

* make video responsive to container
---
 src/plugins/image/image.tsx  |  8 ++++----
 src/plugins/media/media.less |  7 +++++++
 src/plugins/media/media.tsx  | 23 +++++++++++++++++------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/plugins/image/image.tsx b/src/plugins/image/image.tsx
index c96be3ab5..c46bad019 100644
--- a/src/plugins/image/image.tsx
+++ b/src/plugins/image/image.tsx
@@ -48,15 +48,15 @@ class SimpleImageRenderer extends React.Component<
             return (
                 <div className="image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
                     <div className="load-error-text">
-                        ERROR: file {dataBlob && dataBlob.name ? JSON.stringify(dataBlob.name) : ""} not found
+                        ERROR: file {dataBlob?.name ? JSON.stringify(dataBlob.name) : ""} not found
                     </div>
                 </div>
             );
         }
-        if (dataBlob.name.endsWith(".svg")) {
-            dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
-        }
         if (this.objUrl == null) {
+            if (dataBlob.name?.endsWith(".svg")) {
+                dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
+            }
             this.objUrl = URL.createObjectURL(dataBlob);
         }
         let opts = this.props.opts;
diff --git a/src/plugins/media/media.less b/src/plugins/media/media.less
index 8b3b929ab..a77d18b2b 100644
--- a/src/plugins/media/media.less
+++ b/src/plugins/media/media.less
@@ -4,4 +4,11 @@
     align-items: center;
     justify-content: center;
     padding-top: var(--termpad);
+
+    video {
+        object-fit: contain;
+        object-position: center;
+        height: 100%;
+        width: auto;
+    }
 }
diff --git a/src/plugins/media/media.tsx b/src/plugins/media/media.tsx
index 7a9047613..aad7b9858 100644
--- a/src/plugins/media/media.tsx
+++ b/src/plugins/media/media.tsx
@@ -4,6 +4,7 @@
 import * as React from "react";
 import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
+import * as util from "@/util/util";
 import { GlobalModel } from "@/models";
 
 import "./media.less";
@@ -32,14 +33,24 @@ class SimpleMediaRenderer extends React.Component<
                 </div>
             );
         }
-        let videoUrl = GlobalModel.getBaseHostPort() + this.props.lineState["wave:fileurl"];
+        let fileUrl = this.props.lineState["wave:fileurl"];
+        if (util.isBlank(fileUrl)) {
+            return (
+                <div className="media-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
+                    <div className="load-error-text">
+                        ERROR: no fileurl found (please use `mediaview` to view media files)
+                    </div>
+                </div>
+            );
+        }
+        let fullVideoUrl = GlobalModel.getBaseHostPort() + fileUrl;
         const opts = this.props.opts;
-        const maxHeight = opts.maxSize.height - 10;
-        const maxWidth = opts.maxSize.width - 10;
+        const height = opts.idealSize.height - 10;
+        const width = opts.maxSize.width - 10;
         return (
-            <div className="media-renderer">
-                <video width="320" height="240" controls>
-                    <source src={videoUrl} />
+            <div className="media-renderer" style={{ height: height, width: width }}>
+                <video controls>
+                    <source src={fullVideoUrl} />
                 </video>
             </div>
         );