Show alert for video call end - refs #7558

app/Resources/public/css/base.css

@@ -6126,52 +6126,17 @@ a.sessionView {
     width: auto;
 }
 /* video chat */
-#chat-local-video video,
-#chat-remote-video video{
-  border-radius: 5px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  box-shadow: 0 2px 3px #C8C8C8;
-  border: 1px solid #e6e6e6;
-  background-color:#fff;
-  padding: 5px;
-}
-#chat-local-video video,
-#chat-remote-video video{
-  width: 100%;
-  min-width: 100%;
-  display: block;
-}
-#chat-video-panel .username-local{
-  text-align: center;
-  padding-bottom: 5px;
-  padding-top:5px;
-  margin-top:10px;
-  margin-bottom:10px;
-  color: #666666;
+#chat-video-panel .thumbnail .caption p {
+    margin-bottom: 0;
 }
-#chat-video-panel .chat-user-remote{
-  text-align: center;
-  padding-bottom: 5px;
-  padding-top:5px;
-  color: #666666;
-}
-#chat-video-panel .title{
+#chat-video-panel .thumbnail video {
+  background-color: #FFF;
+  background-image: url("../../main/img/icons/128/camera-webrtc.png");
+  background-position: center center;
+  background-repeat: no-repeat;
   display: block;
-  color: #52606F;
-  padding: 0;
-  margin: 0;
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  font-size: 20px;
-  border-bottom: 1px solid #E5E5E5;
-}
-#chat-video-panel #chat-local-video video,
-#chat-video-panel #chat-remote-video video {
-    background-color: #FFF;
-    background-image: url("../../main/img/icons/128/camera-webrtc.png");
-    background-position: center center;
-    background-repeat: no-repeat;
+  min-width: 100%;
+  width: 100%;
 }
 #listFriends .list-group-item{
   border: none;

main/template/default/chat/video.tpl

@@ -1,14 +1,18 @@
 <div id="chat-video-panel">
     <div class="row">
         <div class="col-md-4">
-            <div id="chat-local-video"></div>
-            <div class="username-local">
-                {% if user_local.user_is_online_in_chat == 1 %}
-                    <img src="{{ 'online.png' | icon(16) }}" />
-                {% else %}
-                <img src="{{ 'offline.png' | icon(16) }}" />
-                {% endif %}
-                {{ user_local.complete_name }} ( {{ user_local.username }} )
+            <div class="thumbnail">
+                <div id="chat-local-video"></div>
+                <div class="caption">
+                    <p class="text-muted text-center">
+                        {% if user_local.user_is_online_in_chat == 1 %}
+                            <img src="{{ 'online.png' | icon(16) }}" />
+                        {% else %}
+                            <img src="{{ 'offline.png' | icon(16) }}" />
+                        {% endif %}
+                        {{ user_local.complete_name }} ( {{ user_local.username }} )
+                    </p>
+                </div>
             </div>
 
             <div class="chat-friends">
@@ -31,8 +35,15 @@
             </div>
         </div>
         <div class="col-md-8">
-            <div id="chat-remote-video"></div>
-            <div class="chat-user-remote">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</div>
+            <div class="thumbnail video-chat-user">
+                <div id="chat-remote-video"></div>
+                <div class="caption">
+                    <p class="text-muted text-center">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
+                </div>
+            </div>
+            <div class="alert alert-warning">
+                <i class="fa fa-warning"></i> <strong>{{ 'Warning'|get_lang }}</strong> {{ 'AvoidChangingPageAsThisWillCutConference'|get_lang }}
+            </div>
         </div>
     </div>
 </div>