Add QR code to TV Player

mintopia · Jun 18, 2024 · 2c59a78 · 2c59a78
1 parent 7cc72b6
commit 2c59a78
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/resources/js/components/TvPlayer.vue b/resources/js/components/TvPlayer.vue
@@ -83,6 +83,9 @@
                     </template>
                 </div>
             </div>
+            <div class="qr">
+                <img v-bind:src="qrCodeUrl" />
+            </div>
         </div>
     </div>
 </template>
@@ -92,6 +95,12 @@
         padding: 1em;
     }
 
+    .qr {
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+    }
+
     .blur-bg {
         backdrop-filter: blur(2px);
         background-repeat: no-repeat;
@@ -126,6 +135,7 @@
     export default {
         props: [
             'code',
+            'partyurl',
             'initialstate',
         ],
         data() {
@@ -136,6 +146,7 @@
                 progress: '',
                 startedAt: null,
                 intervalId: null,
+                qrCodeUrl: null,
             }
         },
 
@@ -202,6 +213,7 @@
         mounted() {
             this.updateState(JSON.parse(this.initialstate));
             let channel = `party.${this.code}`;
+            this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${this.partyurl}`;
             window.Echo.channel(channel).listen('Party\\UpdatedEvent', (payload) => {
                 this.updateState(payload);
             });

diff --git a/resources/views/parties/tv.blade.php b/resources/views/parties/tv.blade.php
@@ -30,6 +30,7 @@
         <div id="app">
             <tv-player
                 code="{{ $party->code }}"
+                partyUrl="{{ route('parties.show', $party->code) }}"
                 initialstate='@json($party->getState())'
             >
             </tv-player>