Join by phone

resources/js/components/RoomJoinByPhoneButton.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- If room is running, show join button -->
+  <Button
+    label="Mit Telefon beitreten"
+    icon="fa-solid fa-phone"
+    severity="secondary"
+    @click="toggle"
+    class="flex-shrink-0"
+  />
+  <OverlayPanel ref="op" aria-labelledby="room-invitation-title">
+    <div class="flex flex-column align-items-start gap-3 min-w-min p-2">
+      <fieldset class="flex w-full flex-column gap-2">
+        <legend id="room-invitation-title" class="font-bold block white-space-nowrap">Telefonnummer und PIN</legend>
+        <div class="flex-grow-1">
+          <IconField iconPosition="left">
+            <InputIcon>
+              <i
+                class="fa-solid fa-phone"
+                v-tooltip="$t('rooms.invitation.link')"
+              />
+            </InputIcon>
+            <InputText
+              class="border-0 shadow-none w-full text-overflow-ellipsis"
+              id="invitationLink"
+              :aria-label="$t('rooms.invitation.link')"
+              readonly
+              :value="number"
+            />
+          </IconField>
+
+          <IconField iconPosition="left">
+            <InputIcon>
+              <i
+                class="fa-solid fa-lock"
+                v-tooltip="$t('rooms.invitation.code')"
+              />
+            </InputIcon>
+            <InputText
+              class="border-0 shadow-none w-full"
+              id="invitationCode"
+              :aria-label="$t('rooms.invitation.code')"
+              readonly
+              :value="pin"
+            />
+          </IconField>
+        </div>
+      </fieldset>
+
+      <div>
+      <span class="font-bold block white-space-nowrap">Mit Smartphone anrufen</span>
+      <img :src="qrcode" alt="QR Code" />
+      </div>
+
+      <a :href="link" class="p-button p-button-secondary">
+        <span class="p-button-icon p-button-icon-left fa-solid fa-phone" />
+        <span class="p-button-label">Anrufen</span>
+      </a>
+    </div>
+  </OverlayPanel>
+
+</template>
+<script setup>
+import {computed, ref} from 'vue';
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+const op = ref();
+const toggle = (event) => {
+  op.value.toggle(event);
+};
+
+const props = defineProps({
+  number: {
+    type: String,
+    required: true
+  },
+  pin: {
+    type: Number,
+    required: true
+  }
+});
+
+const link = computed(() => {
+  // Remove all chars that are not digits or '+'
+  const cleanNumber = props.number.replace(/[^0-9+]/g, '');
+  return `tel:${cleanNumber},${props.pin}#`;
+});
+const qrcode = useQRCode(link);
+
+</script>

resources/js/views/RoomsView.vue

@@ -202,6 +202,11 @@
                     @guests-not-allowed="handleGuestsNotAllowed"
                     @changed="reload"
                   />
+                  <RoomJoinByPhoneButton
+                    v-if="running && room.last_meeting.dial_in"
+                    :number="room.last_meeting.dial_in.number"
+                    :pin="room.last_meeting.dial_in.pin"
+                  />
                   <RoomBrowserNotification
                     :room-name="room.name"
                     :running="running"