From b93d78b02eed6ce9f7aea426f377fd0409e46968 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Mon, 11 Nov 2019 11:42:08 +0900
Subject: [PATCH] =?UTF-8?q?video-viewer=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../left-sidenav/group.component.html         |   9 +-
 .../left-sidenav/group.component.scss         |   7 ++
 .../components/messages.component.html        |   2 +-
 .../components/messages.component.scss        |   4 +-
 .../chat/create-chat.dialog.component.scss    |   3 +
 .../message-box/video.component.scss          |  13 +-
 .../components/expansion-panel.component.scss |  11 +-
 .../document-viewer.component.html            |   2 +-
 .../file-viewer/video-viewer.component.html   | 111 +++++++++++-------
 .../file-viewer/video-viewer.component.scss   |  66 ++++++++---
 10 files changed, 158 insertions(+), 70 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index a8921446..7edc38e5 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -27,7 +27,14 @@
     [hasBackdrop]="false"
   >
     <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
-      <mat-icon>group_add</mat-icon>
+      <!--<mat-icon>group_add</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+        <circle cx="8.5" cy="7" r="4"></circle>
+        <line x1="20" y1="8" x2="20" y2="14"></line>
+        <line x1="23" y1="11" x2="17" y2="11"></line>
+      </svg>
       <span>새 그룹 추가</span>
     </button>
     <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
index 2111a8fc..1f8cafc1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
@@ -37,3 +37,10 @@
   height: 100%;
   overflow: unset;
 }
+.mat-menu-item{
+  display:flex;
+  align-items: center;
+  svg{
+    margin-right:10px;
+  }
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index b04ad574..98872787 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -48,7 +48,7 @@
           *ngIf="roomInfo && roomInfo.isTimeRoom"
           class="room-type text-accent-color "
         >
-          <span class="bg-accent-light"
+          <span class="bg-accent-dark"
             >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
           >비밀 대화방입니다.
         </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 6e200e6d..5a051a2b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -25,7 +25,7 @@
 .chat-toolbar {
   width: 100%;
   height: 80px;
-  min-height: 70px;
+  min-height: 80px;
   align-items: center;
   background-color: #ffffff !important;
   border-bottom: 1px solid #dddddd;
@@ -68,7 +68,7 @@
         height: 20px;
         span {
           border-radius: 10px;
-          padding: 1px 10px;
+          padding: 2px 10px;
           margin-right: 6px;
           font-size: 13px;
         }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
index 2c156946..2452c863 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
@@ -76,3 +76,6 @@
      }
   }
 }
+.mat-tab-group>.mat-tab-header .mat-tab-label{
+  border-bottom:2px solid #dddddd;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
index f4b0a68f..e10c94de 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
@@ -20,6 +20,8 @@
     flex-direction: column;
     text-align: left;
     line-height: 1.6em;
+    width:100%;
+    margin-top:10px;
     .file-name {
       font-size: 14px;
       font-weight: bold;
@@ -59,5 +61,14 @@
         display: block;
       }
     }
+    &.expired{
+    li{
+      width:100%;
+      white-space: nowrap;
+      color:#999999;
+      align-items: center;
+      line-height:40px;
+      }
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index 8397c09d..7a7c496d 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -51,16 +51,17 @@
     }
   }
 }
+
 .box-more-spacer {
   margin-right: 0;
 }
 
 ::ng-deep .mat-content{
-  overflow: unset;
+  overflow: unset !important;
 }
 
 .number{
-          margin-left:6px;
-          display: inline-flex;
-          flex: 0 0 auto;
-        }
\ No newline at end of file
+  margin-left:6px;
+  display: inline-flex;
+  flex: 0 0 auto;
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
index 25607b58..0f1561d1 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
@@ -1,5 +1,5 @@
 <div class="ucap-image-viewer-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="bg-primary-dark">
     <span>Third Line</span>
     <span class="ucap-image-viewer-spacer"></span>
     <mat-icon
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
index d945dac5..43b5bf3e 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
@@ -1,6 +1,17 @@
 <div class="ucap-video-viewer-container">
   <mat-toolbar color="accent" class="ucap-video-viewer-header">
-    <mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>
+    <!--<mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>-->
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"  class="ucap-video-viewer-icon">
+      <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+      <line x1="7" y1="2" x2="7" y2="22"></line>
+      <line x1="17" y1="2" x2="17" y2="22"></line>
+      <line x1="2" y1="12" x2="22" y2="12"></line>
+      <line x1="2" y1="7" x2="7" y2="7"></line>
+      <line x1="2" y1="17" x2="7" y2="17"></line>
+      <line x1="17" y1="17" x2="22" y2="17"></line>
+      <line x1="17" y1="7" x2="22" y2="7"></line>
+    </svg>
     <span class="ucap-video-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-video-viewer-spacer"></span>
     <button
@@ -11,16 +22,25 @@
       aria-label=""
       (click)="onClickDownload()"
     >
-      <mat-icon>get_app</mat-icon>
+      <!--<mat-icon>get_app</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
+      </svg>
     </button>
-
+    <span class="stroke-bar"></span>
     <button
-      mat-raised-button
-      color="primary"
-      class="ucap-video-viewer-action"
+      mat-icon-button
+      color="warn"
+      class="ucap-image-viewer-action btn-close"
+       matTooltip="뷰어닫기"
       (click)="onClickClose()"
     >
-      Close
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
     </button>
   </mat-toolbar>
   <div class="ucap-video-viewer-body">
@@ -41,43 +61,52 @@
         (loadeddata)="onLoadedDataVideo()"
       ></video>
     </div>
-    <div
-      class="ucap-video-viewer-video-time"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <mat-slider
-        #timeSlider
-        min="0"
-        [max]="duration"
-        [value]="currentTime"
-        (change)="onChangeTimeSlider($event)"
+    <div class="viewer-bottom">
+      <div
+        class="ucap-video-viewer-video-time"
+        fxLayout="row"
+        fxLayout.xs="column"
+        fxLayoutAlign="center center"
       >
-      </mat-slider>
-    </div>
-    <div
-      class="ucap-video-viewer-video-controls"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <div class="ucap-video-viewer-video-time-current">
-        {{ currentTime | ucapSecondsToMinutes }}
+        <mat-slider
+          #timeSlider
+          min="0"
+          [max]="duration"
+          [value]="currentTime"
+          (change)="onChangeTimeSlider($event)"
+        >
+        </mat-slider>
       </div>
-      <span class="ucap-video-viewer-spacer"></span>
-      <button
-        mat-icon-button
-        class="ucap-video-viewer-action"
-        [matTooltip]="playing ? '멈춤' : '재생'"
-        aria-label=""
-        (click)="onClickPlayOrPause()"
+      <div
+        class="ucap-video-viewer-video-controls"
+        fxLayout="row"
+        fxLayout.xs="column"
       >
-        <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
-      </button>
-      <span class="ucap-video-viewer-spacer"></span>
-      <div class="ucap-video-viewer-video-time-total">
-        {{ duration | ucapSecondsToMinutes }}
+        <div class="ucap-video-viewer-video-time-current">
+          {{ currentTime | ucapSecondsToMinutes }}
+        </div>
+        <span class="ucap-video-viewer-spacer"></span>
+        <button
+          mat-icon-button
+          class="ucap-video-viewer-action"
+          [matTooltip]="playing ? '멈춤' : '재생'"
+          aria-label=""
+          (click)="onClickPlayOrPause()"
+        >
+          <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
+          <!--{{ playing ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+              <rect x="6" y="4" width="4" height="16"></rect>
+              <rect x="14" y="4" width="4" height="16"></rect>
+            </svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+          </svg>'}}-->
+        </button>
+        <span class="ucap-video-viewer-spacer"></span>
+        <div class="ucap-video-viewer-video-time-total">
+          {{ duration | ucapSecondsToMinutes }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
index 7ad92977..0e1f1c55 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss
@@ -4,40 +4,57 @@
 
   .ucap-video-viewer-header {
     width: 100%;
-    height: 50px;
+    height: 60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+    background-color: #333333;
 
     .ucap-video-viewer-icon {
+      margin-right: 10px;
     }
 
     .ucap-video-viewer-title {
+      font-size:16px;
+    }
+    .stroke-bar {
+      width: 1px;
+      height: 30px;
+      background-color: rgba(256, 256, 256, 0.3);
+      margin: 0 10px;
+    }
+    .ucap-image-viewer-action {
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
   .ucap-video-viewer-body {
     position: relative;
-    background-color: white;
     width: 100%;
-    height: 100%;
-    padding-bottom: 70px;
+    height: calc(100% - 60px);
 
     .ucap-video-viewer-video-icon {
       width: 100%;
-      height: calc(100% - 60px);
+       height: calc(100% - 80px);
     }
-    .ucap-video-viewer-video-time {
-      width: 100%;
-      height: 30px;
-    }
-    .ucap-video-viewer-video-controls {
-      width: 100%;
-      height: 30px;
-
-      .ucap-video-viewer-video-time-current {
-        padding-left: 30px;
+    .viewer-bottom{
+      background-color: #212121;
+      color:#ffffff;
+      .ucap-video-viewer-video-time {
+        width: 100%;
+        height: 30px;
       }
+      .ucap-video-viewer-video-controls {
+        width: 100%;
+        height: 50px;
 
-      .ucap-video-viewer-video-time-total {
-        padding-right: 30px;
+        .ucap-video-viewer-video-time-current {
+          padding-left: 30px;
+        }
+
+        .ucap-video-viewer-video-time-total {
+          padding-right: 30px;
+        }
       }
     }
   }
@@ -45,9 +62,22 @@
     flex: 1 1 auto;
   }
   .ucap-video-viewer-action {
+    .mat-icon{
+      font-size: 40px;
+      width: 100%;
+      height: 100%;
+      line-height:40px;
+    }
   }
 }
 
 mat-slider {
-  width: 95%;
+  width: 94%;
 }
+
+::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+  background-color: #999999 !important;
+}
+::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
+  border-color: #999999 !important;
+}
\ No newline at end of file