From 485f212b4f27a80a79bbfcb76a85ec60b3cc34b3 Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Wed, 12 Feb 2025 23:27:25 -0500
Subject: [PATCH] restyle video frame to fit better, highlight button when
 active

---
 mods/bambu/bambu.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/mods/bambu/bambu.js b/mods/bambu/bambu.js
index 756f1391..42982d3f 100644
--- a/mods/bambu/bambu.js
+++ b/mods/bambu/bambu.js
@@ -170,8 +170,9 @@ self.kiri.load(api => {
     function printer_video_set(bool) {
         video_on = bool;
         set_frames(selected?.rec?.serial, bool);
-        ui.setVisible($('bbl_rec'), !bool);
-        ui.setVisible($('bbl_video'), bool);
+        // ui.setVisible($('bbl_rec'), !bool);
+        ui.setVisible($('bbl_video_frame'), bool);
+        ui.setClass($('bbl_vid_toggle'), 'bred', bool);
         const canvas = $('bbl_video');
         const ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -662,22 +663,28 @@ self.kiri.load(api => {
                     ]),
                 ]),
                 h.div({ class: "f-col gap4 grow" }, [
+                    h.div({
+                        id: "bbl_video_frame",
+                        class: "video hide",
+                        style: "width: 100%; xheight: auto; box-sizing: border-box; aspect-ratio: 16 / 9",
+                    },[
+                        h.canvas({
+                            id: "bbl_video",
+                            style: "width: 100%; xheight: auto; box-sizing: border-box; aspect-ratio: 16 / 9",
+                        })
+                    ]),
                     h.textarea({
                         id: "bbl_rec",
-                        style: "width: 100%; height: 100%; resize: none; box-sizing: border-box",
+                        style: "flex-grow: 1; width: 100%; xheight: auto; resize: none; box-sizing: border-box",
                         wrap: "off",
                         spellcheck: "false",
-                        rows: 15, cols: 65
+                        xrows: 15, cols: 65
                     }),
                     h.button({
+                        id: "bbl_vid_toggle",
                         style: "position: absolute; top: 5px; right: 5px",
                         onclick: printer_video_toggle
                     }, [ h.i({ class: "fa-solid fa-video" }) ]),
-                    h.canvas({
-                        id: "bbl_video",
-                        class: "video hide",
-                        style: "width: 100%; height: auto; box-sizing: border-box; aspect-ratio: 16 / 9",
-                    })
                 ]),
                 h.div({ class: "f-col gap3" }, [
                     h.div({ id: "bbl_ams", class: "t-body t-inset f-col gap3 pad4" }, [