WIP, learning Vue

Reviewed-on: xcoder/projectx#22

package-lock.json

@@ -2355,6 +2355,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.1.tgz",
+      "integrity": "sha512-bxUooHBSbvefnIZfjD0LE8nfdPKrtiFy2sgrxQwUZ0UpFzpjVbVMUxaGIoo9XWT4B2LG1HX6UQg0UMOakT0prQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6899,9 +6904,9 @@
       }
     },
     "jquery": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
-      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
     "js-message": {
       "version": "1.0.5",
@@ -8390,6 +8395,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "oydconf",
+  "name": "albatross",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,9 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.5.1",
     "core-js": "^3.6.4",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "pdfjs-dist": "^2.3.200",
+    "popper.js": "^1.16.1",
     "vue": "^2.6.11",
     "vuetify": "^2.2.11",
     "webrtc-adapter": "^7.5.1"

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Albatross</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

src/App.vue

@@ -1,12 +1,73 @@
 <template>
-  <v-app fill-height dark>
-    <v-content fill-height >
-      <v-text-field   v-if="!start" v-model="username" label="please enter name"></v-text-field> <v-btn v-if="!start" @click="startM">Start</v-btn>
+  <v-app>
+    <v-app-bar
+      app
+      color="#ab0000"
+      dark
+    >
+      <v-toolbar-title>Albatross</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon>
+        <v-icon>mdi-help</v-icon>
+      </v-btn>
+    </v-app-bar>
+        <v-container
+          class="fill-height"
+          fluid
+        >
+          <v-row
+            align="center"
+            justify="center"
+            v-if="!start"
+          >
+            <v-col
+              cols="12"
+              sm="8"
+              md="4"
+            >
+              <v-card class="elevation-12" >
+                <v-toolbar
+                  color="#ab0000"
+                  dark
+                  flat
+                >
+                  <v-toolbar-title>Login</v-toolbar-title>
+                  <v-spacer></v-spacer>
+                  <v-tooltip bottom>
+                    <span>Source</span>
+                  </v-tooltip>
+                </v-toolbar>
+                <v-card-text>
+                  <v-form>
+                    <v-text-field v-if="!start" v-model="username" label="Please enter your name"></v-text-field>
+                  </v-form>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn color="#ab0000" v-if="!start" @click="startM">Start</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-col>
+          </v-row>
           <VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/>
-    </v-content>
+
+        </v-container>
+    <v-footer
+      color="#ffffff"
+      app
+    >
+    <v-col
+    class="text-center"
+    cols="12"
+  >
+   <strong>Özgür Yazılım Derneği</strong>
+  </v-col>
+    </v-footer>
   </v-app>
 </template>
 
+
+
 <script>
 import VueJanus from "@/lib/VueJanus";
 

src/lib/PdfShare.vue

@@ -1,6 +1,6 @@
 <template>
-    <div style="position: absolute;right: 0;bottom:0;width: 400px;border:1px solid #ccc">
-
+    <v-card class="d-inline-block mx-auto d-flex flex-row-reverse" v-if="show">
+     <v-container>
         <v-row>
             <v-col cols="12" md="10">
                 <v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
@@ -20,7 +20,8 @@
                 <v-btn v-if="pdf && !loading" @click="stop">stop pdf share</v-btn>
             </v-col>
         </v-row>
-    </div>
+    </v-container>
+    </v-card>
 </template>
 
 <script>
@@ -43,10 +44,12 @@ export default {
       opaqueId:String
     },
     data: () => ({
+        show: true,
         pdf: null,
         pageNumber: 1,
         loading: true,
-        pluginHandle: null
+        pluginHandle: null,
+        intervalId: null
         }),
     mounted () {
         pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"
@@ -73,8 +76,9 @@ export default {
 
                 var renderTask = page.render(renderContext);
                 renderTask.promise.then( () => {
-                    if (!this.pluginHandle) {
                     this.loading = false
+
+                    if (!this.pluginHandle) {
                         // document.getElementById('pdfvid').srcObject = document.getElementById('mypdfview').captureStream(60)
 
                         this.janusInit.attach(
@@ -102,19 +106,22 @@ export default {
 
         },
         stop(){
+            this.onstop();
             var unpublish = { "request": "unpublish"};
             this.pluginHandle.send({"message": unpublish});
 
             this.pluginHandle.detach();
 
             // reset
+            clearInterval(this.intervalId);
             this.pluginHandle = null;
             this.pdf = null;
             this.pageNumber = 1;
             this.loading = true;
 
+
             // callback
-            this.onstop();
+          
         },
         janusPluginError (error) {
             console.log('error', error)
@@ -208,7 +215,7 @@ export default {
                 // var pageNumber = 1;
                 this.pdf = pdf
                 this.loading = true
-                setInterval(this.pdfTimer, 1000/15)
+                this.intervalId = setInterval(this.pdfTimer, 1000/15)
                 this.renderPage(1)
 
 

src/lib/VueJanus.vue

@@ -1,7 +1,6 @@
 <template>
-
     <v-container fill-height>
-        <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
+        <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :onstop="stopSharePdf" :janus-init="janusInit" ></PdfShare>
         <v-dialog
                 v-model="mozillaAlert"
                 max-width="600"
@@ -73,7 +72,7 @@
                             text
                             @click="deviceSelectDialog = false"
                     >
-                        Disagree
+                        Cancel
                     </v-btn>
 
                     <v-btn
@@ -81,7 +80,7 @@
                             text
                             @click="selectDevice"
                     >
-                        Agree
+                        OK
                     </v-btn>
                 </v-card-actions>
             </v-card>

src/main.js

@@ -4,7 +4,6 @@ import JanusPlugin from "@/plugins/janus"
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
 
-
 Vue.config.productionTip = false
 console.log("janus is installed", Vue.$janus)
 new Vue({