Looking pretty fucking dope

lnbits/extensions/copilot/templates/copilot/compose.html

@@ -2,8 +2,9 @@
   <iframe
     width="100%"
     height="100%"
-    src="https://www.w3schools.com"
-    title="W3Schools Free Online Web Tutorials"
+    id="iframe_main"
+    src="/"
+    class="fixed-bottom-left"
   >
   </iframe>
   <video
@@ -13,6 +14,12 @@
     class="fixed-bottom-right"
   ></video>
   <img src="" style="width: 100%" id="animations" class="fixed-bottom-left" />
+  <q-btn
+    color="primary"
+    @click="reconnect"
+    label="Reconnect"
+    class="fixed-bottom-left"
+  />
 </q-page>
 {% endblock %} {% block scripts %}
 <script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
@@ -85,7 +92,7 @@
 
       this.connection.addEventListener('message', function (event) {
         res = event.data.split('-')
-
+        console.log(res[1])
         if (res[0] != this.oldRes) {
           this.oldRes = res[0]
           if (res[1] == 'animation1') {
@@ -113,11 +120,14 @@
             }, 5000)
           }
           if (res[1] == 'true') {
-            document.getElementById('videoElement').style.width = '10%'
+            document.getElementById('videoElement').style.width = '20%'
           }
           if (res[1] == 'false') {
             document.getElementById('videoElement').style.width = '100%'
           }
+          if (res[1].substring(0, 3) == 'htt') {
+            document.getElementById('iframe_main').src = res[1]
+          }
         }
       })
 

lnbits/extensions/copilot/templates/copilot/panel.html

@@ -23,12 +23,11 @@
       <div class="col">
         <div class="row">
           <div class="col">
-            <q-toggle
-              v-model="fullscreen_cam"
+            <q-btn
+              class="q-mt-sm q-ml-sm"
+              color="primary"
               @click="fullscreenToggle"
-              size="xl"
-              icon="face"
-              label="Fullscreen"
+              label="Webcam size"
             />
           </div>
           <div class="col">
@@ -41,7 +40,13 @@
               label="iframe url"
             >
               <template v-slot:after>
-                <q-btn round dense flat @click="" icon="send" />
+                <q-btn
+                  round
+                  dense
+                  flat
+                  @click="iframeChange(iframe)"
+                  icon="send"
+                />
               </template>
             </q-input>
           </div>
@@ -49,6 +54,7 @@
         <div class="row q-pa-sm">
           <div class="col">
             <q-btn
+              style="width: 95%"
               color="primary"
               @click="animationBTN('animation1')"
               label="Confetti"
@@ -56,6 +62,7 @@
           </div>
           <div class="col">
             <q-btn
+              style="width: 95%"
               color="primary"
               @click="animationBTN('animation2')"
               label="Smiley"
@@ -63,6 +70,7 @@
           </div>
           <div class="col">
             <q-btn
+              style="width: 95%"
               color="primary"
               @click="animationBTN('animation3')"
               label="Rocket"
@@ -109,8 +117,17 @@
       }
     },
     methods: {
+      iframeChange: function (url) {
+        this.connection.send(String(url))
+      },
       fullscreenToggle: function () {
-        this.connection.send(String(fullscreen_cam))
+        console.log(this.fullscreen_cam)
+        this.connection.send(String(this.fullscreen_cam))
+        if (this.fullscreen_cam) {
+          this.fullscreen_cam = false
+        } else {
+          this.fullscreen_cam = true
+        }
       },
       openCompose: function () {
         let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=500,left=200,top=200`