Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

small cleanup of sizing for media plugin, null checks (#454)

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

* make video responsive to container
This commit is contained in:
Mike Sawka 2024-03-14 10:32:37 -07:00 committed by GitHub
parent 3f988c0e6b
commit 8ac7d8c241
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/plugins/image/image.tsx
View File

@ -48,15 +48,15 @@ class SimpleImageRenderer extends React.Component<
return ( return (
<div className="image-renderer" style={{ fontSize: this.props.opts.termFontSize }}> <div className="image-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
<div className="load-error-text"> <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>
</div> </div>
); );
} }
if (dataBlob.name.endsWith(".svg")) {
dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
}
if (this.objUrl == null) { if (this.objUrl == null) {
if (dataBlob.name?.endsWith(".svg")) {
dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
}
this.objUrl = URL.createObjectURL(dataBlob); this.objUrl = URL.createObjectURL(dataBlob);
} }
let opts = this.props.opts; let opts = this.props.opts;

7
src/plugins/media/media.less
View File

@ -4,4 +4,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: var(--termpad); padding-top: var(--termpad);
video {
object-fit: contain;
object-position: center;
height: 100%;
width: auto;
}
} }

23
src/plugins/media/media.tsx
View File

@ -4,6 +4,7 @@
import * as React from "react"; import * as React from "react";
import * as mobx from "mobx"; import * as mobx from "mobx";
import * as mobxReact from "mobx-react"; import * as mobxReact from "mobx-react";
import * as util from "@/util/util";
import { GlobalModel } from "@/models"; import { GlobalModel } from "@/models";
import "./media.less"; import "./media.less";
@ -32,14 +33,24 @@ class SimpleMediaRenderer extends React.Component<
</div> </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 opts = this.props.opts;
const maxHeight = opts.maxSize.height - 10; const height = opts.idealSize.height - 10;
const maxWidth = opts.maxSize.width - 10; const width = opts.maxSize.width - 10;
return ( return (
<div className="media-renderer"> <div className="media-renderer" style={{ height: height, width: width }}>
<video width="320" height="240" controls> <video controls>
<source src={videoUrl} /> <source src={fullVideoUrl} />
</video> </video>
</div> </div>
); );