mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
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
This commit is contained in:
parent
3f988c0e6b
commit
8ac7d8c241
@ -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")) {
|
if (this.objUrl == null) {
|
||||||
|
if (dataBlob.name?.endsWith(".svg")) {
|
||||||
dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
|
dataBlob = new Blob([dataBlob], { type: "image/svg+xml" }) as ExtBlob;
|
||||||
}
|
}
|
||||||
if (this.objUrl == null) {
|
|
||||||
this.objUrl = URL.createObjectURL(dataBlob);
|
this.objUrl = URL.createObjectURL(dataBlob);
|
||||||
}
|
}
|
||||||
let opts = this.props.opts;
|
let opts = this.props.opts;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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"];
|
||||||
const opts = this.props.opts;
|
if (util.isBlank(fileUrl)) {
|
||||||
const maxHeight = opts.maxSize.height - 10;
|
|
||||||
const maxWidth = opts.maxSize.width - 10;
|
|
||||||
return (
|
return (
|
||||||
<div className="media-renderer">
|
<div className="media-renderer" style={{ fontSize: this.props.opts.termFontSize }}>
|
||||||
<video width="320" height="240" controls>
|
<div className="load-error-text">
|
||||||
<source src={videoUrl} />
|
ERROR: no fileurl found (please use `mediaview` to view media files)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
let fullVideoUrl = GlobalModel.getBaseHostPort() + fileUrl;
|
||||||
|
const opts = this.props.opts;
|
||||||
|
const height = opts.idealSize.height - 10;
|
||||||
|
const width = opts.maxSize.width - 10;
|
||||||
|
return (
|
||||||
|
<div className="media-renderer" style={{ height: height, width: width }}>
|
||||||
|
<video controls>
|
||||||
|
<source src={fullVideoUrl} />
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user