src/App.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-app>
+  <v-app fill-height dark>
-    <v-content>
+    <v-content fill-height >
-      <v-text-field  v-if="!start" v-model="username" label="please enter name"></v-text-field> 
+      <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-btn v-if="!start" @click="startM">Start</v-btn>
       <VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/>
     </v-content>
   </v-app>

src/lib/VueJanus.vue

@@ -1,16 +1,10 @@
 <template>
-    <v-container>
-        <v-btn @click="deviceSelectDialog = true">change</v-btn>
-
-        <v-btn @click="screenShare">share a screen</v-btn>
-        <v-btn @click="screenShareStop" v-if="screenShareStarted">stop screen share</v-btn>
-
-        <v-btn @click="sharePdf=true">share a pdf</v-btn>
-        <PdfShare v-if="sharePdf" :username="username" :onstop="stopSharePdf" :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
 
+    <v-container fill-height>
+        <PdfShare v-if="sharePdf" :username="username"  :opaque-id="opaqueId" :room="room" :janus-init="janusInit" ></PdfShare>
         <v-dialog
                 v-model="mozillaAlert"
-                max-width="410"
+                max-width="600"
         >
             <v-card>
                 <v-card-title class="headline">Share whole screen or a window?</v-card-title>
@@ -26,9 +20,10 @@
                     <v-spacer></v-spacer>
                 </v-card-actions>
             </v-card>
-        </v-dialog><v-dialog
+        </v-dialog>
+        <v-dialog
                 v-model="chromeAlert"
-                max-width="410"
+                max-width="600"
         >
             <v-card>
                 <v-card-title class="headline">Chrome Extension Error</v-card-title>
@@ -91,6 +86,7 @@
                 </v-card-actions>
             </v-card>
         </v-dialog>
+
         <v-row>
             <v-col cols="12" md="2">
                     <video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
@@ -104,6 +100,57 @@
                     <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
             </v-col>
         </v-row>
+        <v-speed-dial
+                v-model="fab"
+                bottom
+                left
+                direction="top"
+                open-on-hover
+        >
+            <template v-slot:activator>
+                <v-btn
+                        v-model="fab"
+                        color="blue darken-2"
+                        dark
+                        fab
+                >
+                    <v-icon v-if="fab">mdi-cog-outline</v-icon>
+                    <v-icon v-else>mdi-cog-outline</v-icon>
+                </v-btn>
+            </template>
+            <v-btn
+                    fab
+                    dark
+                    small
+                    @click="sharePdf=true"
+            >
+                <v-icon>mdi-pdf-box</v-icon>
+            </v-btn> <v-btn
+                    fab
+                    dark
+                    small
+                    @click="$vuetify.theme.dark=!$vuetify.theme.dark"
+            >
+                <v-icon>mdi-compare</v-icon>
+            </v-btn>
+            <v-btn
+                    fab
+                    dark
+                    small
+
+                    @click="deviceSelectDialog = true"
+            >
+                <v-icon>mdi-camera-outline</v-icon>
+            </v-btn>
+            <v-btn
+                    fab
+                    :dark="!screenShareStarted"
+                    small
+                    @click="screenShareSwitch"
+            >
+                <v-icon>mdi-monitor-screenshot</v-icon>
+            </v-btn>
+        </v-speed-dial>
     </v-container>
 </template>
 
@@ -137,6 +184,7 @@
                 audioDevices: [],
                 deviceSelectDialog: false,
                 noVid: false,
+                fab: true,
                 shareScreenId: null,
                 remoteStreams: [],
                 screenShareStarted: false
@@ -197,10 +245,15 @@
                 }
             },
             onlocalstreamScreen (stream) {
-                if(!this.screenShareStarted)
-                    this.screenShareStarted=true;
                 this.$refs.ownstreamscreen.srcObject = stream
             },
+            screenShareSwitch () {
+              if(this.screenShareStarted) {
+                  this.screenShareStop()
+              } else {
+                  this.screenShare()
+              }
+            },
             shareScreenStart (capture) {
                 this.capture = capture
                 this.janusInit.attach(
@@ -216,6 +269,7 @@
                         onlocalstream: this.onlocalstreamScreen
                     }
                 )
+                this.screenShareStarted=true;
             },
             screenShareStop(){
                 var srcObject=this.$refs.ownstreamscreen.srcObject;