Merge pull request #6 from abdulrahmat97dev/development

Development
NekoSukuriputo · Oct 14, 2022 · ad648c0 · ad648c0
2 parents 2f6a9b0 + f9bd633
commit ad648c0
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 46 deletions.
diff --git a/app-extension/package.json b/app-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quasar-app-extension-jitsi-meet",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Jitsi Meet Quasar App Extention ",
   "author": "Abdul Rahmat <[email protected]>",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": "https://github.com/abdulrahmat97dev/Quasar-Jitisi-Meet/issues",
   "homepage": "https://github.com/abdulrahmat97dev/Quasar-Jitisi-Meet",
   "dependencies": {
-    "quasar-ui-jitsi-meet": "^0.0.5"
+    "quasar-ui-jitsi-meet": "^0.0.7"
   },
   "engines": {
     "node": ">= 8.9.0",

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-jitsi-meet",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "Abdul Rahmat <[email protected]>",
   "description": "Jitsi Meet using Quasar Component",
   "license": "MIT",

diff --git a/ui/src/components/JitsiForm.vue b/ui/src/components/JitsiForm.vue
@@ -1,64 +1,113 @@
 <script setup>
-import { QForm, QBtn, QInput, QCard, QCardActions, QCardSection, QSeparator } from 'quasar'
-import { ref } from 'vue'
+import {
+  QForm,
+  QBtn,
+  QInput,
+  QCard,
+  QCardActions,
+  QCardSection,
+  QSeparator,
+  QTab,
+  QTabPanel,
+} from "quasar";
+import { ref } from "vue";
 
-let emit = defineEmits(['submit'])
+let emit = defineEmits(["submit"]);
 
-let roomName = ref('')
-let email = ref('')
-let displayName = ref('')
-let showAdd = ref(1)
+let roomName = ref("");
+let email = ref("");
+let displayName = ref("");
+let showAdd = ref(1);
+
+let tab = ref("make_room");
 
 const showForm = (value) => {
-  roomName.value = ''
-  email.value = ''
-  displayName.value = ''
-  showAdd.value = value
-}
+  roomName.value = "";
+  email.value = "";
+  displayName.value = "";
+  showAdd.value = value;
+};
 
 const onSubmit = () => {
-  emit('submit', {
+  emit("submit", {
     displayName: displayName.value,
-    email:email.value,
+    email: email.value,
     roomName: roomName.value,
-    isAddRoom: showAdd.value === 1
-  })
-}
+    isAddRoom: tab.value === "make_room",
+  });
+};
 </script>
 <template>
   <div>
-    <div class="q-pa-md row items-start q-gutter-md">
+    <div>
       <q-card>
-        <q-card-section>
-          <div class="q-mt-md" v-if="showAdd === 1">
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab name="make_room" label="Make Room" />
+          <q-tab name="join_room" label="Join Room" />
+        </q-tabs>
+        <q-separator />
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="make_room">
             <q-form @submit="onSubmit" class="q-gutter-md">
-              <q-input outlined v-model="roomName" label="Room Name" dense
-                :rules="[val => val && val.length > 0 || 'Please type something']" />
-              <q-input outlined v-model="email" label="Email" dense
-                :rules="[val => val && val.length > 0 || 'Please type something']" />
-              <q-input outlined v-model="displayName" label="Display Name" dense
-                :rules="[val => val && val.length > 0 || 'Please type something']" />
+              <q-input
+                outlined
+                v-model="roomName"
+                label="Room Name"
+                dense
+                :rules="[
+                  (val) => (val && val.length > 0) || 'Please type something',
+                ]"
+              />
+              <q-input
+                outlined
+                v-model="email"
+                label="Email"
+                dense
+                :rules="[
+                  (val) => (val && val.length > 0) || 'Please type something',
+                ]"
+              />
+              <q-input
+                outlined
+                v-model="displayName"
+                label="Display Name"
+                dense
+                :rules="[
+                  (val) => (val && val.length > 0) || 'Please type something',
+                ]"
+              />
               <div>
                 <q-btn label="Submit" type="submit" color="primary" />
               </div>
             </q-form>
-          </div>
-          <div class="q-mt-md" v-if="showAdd === 2">
+          </q-tab-panel>
+
+          <q-tab-panel name="join_room">
+            <div class="text-h6">Join Room</div>
             <q-form @submit="onSubmit" class="q-gutter-md">
-              <q-input outlined v-model="roomName" label="Room Name" dense
-                :rules="[val => val && val.length > 0 || 'Please type something']" />
+              <q-input
+                outlined
+                v-model="roomName"
+                label="Room Name"
+                dense
+                :rules="[
+                  (val) => (val && val.length > 0) || 'Please type something',
+                ]"
+              />
               <div>
                 <q-btn label="Submit" type="submit" color="primary" />
               </div>
             </q-form>
-          </div>
-        </q-card-section>
-        <q-separator dark />
-
-        <q-card-actions>
-          <q-btn flat label="Make Room" icon="add" @click="showForm(1)" />
-          <q-btn flat label="Join Room" icon="people" @click="showForm(2)" />
-        </q-card-actions>
+          </q-tab-panel>
+        </q-tab-panels>
       </q-card>
     </div>
   </div>

diff --git a/ui/src/components/JitsiMeet.vue b/ui/src/components/JitsiMeet.vue
@@ -20,7 +20,7 @@ export default {
 
         const jitsiContainer = ref(null)
 
-
+        let jitsiApi = ref(null)
 
         const loadScript = (src, cb) => {
             const scriptEl = document.createElement('script');
@@ -34,17 +34,17 @@ export default {
                 ...props.options,
                 parentNode: jitsiContainer.value,
             };
-            this.jitsiApi = new window.JitsiMeetExternalAPI(props.domain, options);
+            jitsiApi.value = new window.JitsiMeetExternalAPI(props.domain, options);
         }
         const executeCommand = (command, ...value) => {
-            this.jitsiApi.executeCommand(command, ...value);
+            jitsiApi.value.executeCommand(command, ...value);
         }
         const addEventListener = (event, fn) => {
-            this.jitsiApi.on(event, fn);
+            jitsiApi.value.on(event, fn);
         }
         // Misc
         const removeJitsiWidget = () => {
-            if (this.jitsiApi) this.jitsiApi.dispose();
+            if (jitsiApi.value) jitsiApi.value.dispose();
         }
 
         onMounted(() => {
@@ -59,6 +59,7 @@ export default {
         })
 
         return {
+            jitsiApi,
             jitsiContainer,
             loadScript,
             embedJitsiWidget,