prevent video box from exceeding width of textarea

This commit is contained in:
Stewart Allen 2025-02-12 23:40:45 -05:00
commit d681585d50
2 changed files with 7 additions and 6 deletions

View file

@ -50,6 +50,8 @@ self.kiri.load(api => {
img.onload = () => { img.onload = () => {
const canvas = $('bbl_video'); const canvas = $('bbl_video');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const cpn = canvas.parentNode;
canvas.style = `width:${cpn.clientWidth}px;height:${cpn.clientHeight}px`;
canvas.width = img.width; canvas.width = img.width;
canvas.height = img.height; canvas.height = img.height;
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
@ -170,7 +172,6 @@ self.kiri.load(api => {
function printer_video_set(bool) { function printer_video_set(bool) {
video_on = bool; video_on = bool;
set_frames(selected?.rec?.serial, bool); set_frames(selected?.rec?.serial, bool);
// ui.setVisible($('bbl_rec'), !bool);
ui.setVisible($('bbl_video_frame'), bool); ui.setVisible($('bbl_video_frame'), bool);
ui.setClass($('bbl_vid_toggle'), 'bred', bool); ui.setClass($('bbl_vid_toggle'), 'bred', bool);
const canvas = $('bbl_video'); const canvas = $('bbl_video');
@ -665,17 +666,17 @@ self.kiri.load(api => {
h.div({ class: "f-col gap4 grow" }, [ h.div({ class: "f-col gap4 grow" }, [
h.div({ h.div({
id: "bbl_video_frame", id: "bbl_video_frame",
class: "video hide", class: "video hide f-row",
style: "width: 100%; xheight: auto; box-sizing: border-box; aspect-ratio: 16 / 9", style: "width: 100%; box-sizing: border-box; aspect-ratio: 16 / 9",
},[ },[
h.canvas({ h.canvas({
id: "bbl_video", id: "bbl_video",
style: "width: 100%; xheight: auto; box-sizing: border-box; aspect-ratio: 16 / 9", style: "max-width: 100%; box-sizing: border-box; grow",
}) })
]), ]),
h.textarea({ h.textarea({
id: "bbl_rec", id: "bbl_rec",
style: "flex-grow: 1; width: 100%; xheight: auto; resize: none; box-sizing: border-box", style: "flex-grow: 1; width: 100%; resize: none; box-sizing: border-box",
wrap: "off", wrap: "off",
spellcheck: "false", spellcheck: "false",
xrows: 15, cols: 65 xrows: 15, cols: 65

View file

@ -2016,7 +2016,7 @@ gapp.register("kiri.init", (root, exports) => {
); );
}; };
ui.modal.onclick = api.modal.hide; // ui.modal.onclick = api.modal.hide;
ui.modalBox.onclick = (ev) => { ev.stopPropagation() }; ui.modalBox.onclick = (ev) => { ev.stopPropagation() };
// add app name hover info // add app name hover info