From 01500c61dfbaa6888051448a0005ae19e1a87dc1 Mon Sep 17 00:00:00 2001
From: Mustafa Yontar <mustafa@oyd.org.tr>
Date: Sat, 11 Apr 2020 01:43:36 +0300
Subject: [PATCH] width x height fixed

---
 src/lib/RemoteFeed.vue | 19 +++++++++++++------
 src/lib/VueJanus.vue   |  6 +++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/RemoteFeed.vue b/src/lib/RemoteFeed.vue
index 81354c4..9232ae5 100644
--- a/src/lib/RemoteFeed.vue
+++ b/src/lib/RemoteFeed.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="vid_main" @mouseleave="showaction = false"    @mouseover="showaction = true">
-        <video ref="feed_video" width="100%" height="100%" autoplay playsinline/>
-        <div class="info">{{ bitrate }}</div>
+    <v-card max-height="150" height="150" dark
+            class="vid_main" @mouseleave="showaction = false"   @mouseover="showaction = true">
+        <video ref="feed_video" class="vid_container" autoplay playsinline/>
+        <div class="infor">{{ bitrate }}</div>
         <div class="infoSlow">Slow Connection</div>
         <div class="infoName">{{ remoteStream.display }}</div>
         <div class="actions" v-show="showaction">
@@ -12,7 +13,7 @@
                     dark
             ></v-slider>
         </div>
-    </div>
+    </v-card>
 </template>
 
 <script>
@@ -155,6 +156,10 @@
     .vid_main {
         position: relative;
     }
+    .vid_container {
+        width: 100%;
+        height: 100%;
+    }
     .infoSlow {
         position: absolute;
         right: 0;
@@ -162,15 +167,17 @@
         color:#fff;
         display:none
     }
-    .info {
+    .infor {
         position: absolute;
         right: 0;
         top:0;
+        font-size: 10px;
+        text-shadow: 1px 1px #000;
     }
     .infoName {
         position: absolute;
         left: 5px;
-        top:5px;
+        top:10px;
         color:#fff;
         font-size: 10px;
         text-shadow: 1px 1px #000;
diff --git a/src/lib/VueJanus.vue b/src/lib/VueJanus.vue
index 7526a74..63bf904 100644
--- a/src/lib/VueJanus.vue
+++ b/src/lib/VueJanus.vue
@@ -86,15 +86,15 @@
             </v-card>
         </v-dialog>
         <v-row>
-            <v-col cols="12" md="3">
+            <v-col cols="12" md="2">
                     <video ref="ownstream" class="rounded centered" id="myvideo" width="100%" height="100%" autoplay
                            playsinline muted="muted"/>
             </v-col>
-            <v-col cols="12" md="3" style="display: none">
+            <v-col cols="12" md="2" style="display: none">
                 <video ref="ownstreamscreen" class="rounded centered" id="myvideo2" width="100%" height="100%" autoplay
                        playsinline muted="muted"/>
             </v-col>
-            <v-col cols="12" md="3" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
+            <v-col cols="12" md="2" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
                     <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
             </v-col>
         </v-row>