From 2c59a782f907884663ccd1477bb277fc24d948a6 Mon Sep 17 00:00:00 2001
From: Jessica Smith <jess@mintopia.net>
Date: Tue, 18 Jun 2024 02:31:38 +0100
Subject: [PATCH] Add QR code to TV Player

---
 resources/js/components/TvPlayer.vue | 12 ++++++++++++
 resources/views/parties/tv.blade.php |  1 +
 2 files changed, 13 insertions(+)

diff --git a/resources/js/components/TvPlayer.vue b/resources/js/components/TvPlayer.vue
index b5014e4..6ca6bea 100644
--- 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
index 7c68faf..e777778 100644
--- 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>