sound-viewer

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss

@@ -53,7 +53,7 @@
       justify-content: center;
       align-items: center;
       border:2px solid #ffffff;
-      background-color:rgba(256, 256, 256, 0.6);
+      background-color:rgba(256, 256, 256, 0.7);
     }
     .guide-msg{
       font-size:16px;

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html

@@ -5,21 +5,30 @@
     <span class="ucap-sound-viewer-spacer"></span>
     <button
       mat-icon-button
-      class="ucap-sound-viewer-action"
+      class="ucap-image-viewer-action"
       matTooltip="다운로드"
       matTooltipPosition="below"
       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
+      mat-icon-button
-      color="primary"
+      color="warn"
-      class="ucap-sound-viewer-action"
+      class="ucap-image-viewer-action btn-close"
       (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 style="position: relative;">
@@ -50,46 +59,50 @@
         (loadstart)="onLoadStartAudio()"
         (loadeddata)="onLoadedDataAudio()"
       ></audio>
-      <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
+      <div class="circle-box">
-    </div>
+        <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
-    <div
-      class="ucap-sound-viewer-sound-time"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <mat-slider
-        #timeSlider
-        min="0"
-        [max]="duration"
-        [value]="currentTime"
-        (change)="onChangeTimeSlider($event)"
-      >
-      </mat-slider>
-    </div>
-    <div
-      class="ucap-sound-viewer-sound-controls"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center center"
-    >
-      <div class="ucap-sound-viewer-sound-time-current">
-        {{ currentTime | ucapSecondsToMinutes }}
       </div>
-      <span class="ucap-sound-viewer-spacer"></span>
+    </div>
-      <button
+    <div class="viewer-bottom">
-        mat-icon-button
+      <div
-        class="ucap-sound-viewer-action"
+        class="ucap-sound-viewer-sound-time"
-        [matTooltip]="playing ? '멈춤' : '재생'"
+        fxLayout="row"
-        aria-label=""
+        fxLayout.xs="column"
-        (click)="onClickPlayOrPause()"
+        fxLayoutAlign="center center"
       >
-        <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
+        <mat-slider
-      </button>
+          #timeSlider
-      <span class="ucap-sound-viewer-spacer"></span>
+          min="0"
-      <div class="ucap-sound-viewer-sound-time-total">
+          [max]="duration"
-        {{ duration | ucapSecondsToMinutes }}
+          [value]="currentTime"
+          (change)="onChangeTimeSlider($event)"
+        >
+        </mat-slider>
+      </div>
+      <div
+        class="ucap-sound-viewer-sound-controls"
+        fxLayout="row"
+        fxLayout.xs="column"
+        fxLayoutAlign="center center"
+      >
+        <div class="ucap-sound-viewer-sound-time-current">
+          {{ currentTime | ucapSecondsToMinutes }}
+        </div>
+        <span class="ucap-sound-viewer-spacer"></span>
+        <button
+          mat-icon-button
+          class="ucap-sound-viewer-action"
+          [matTooltip]="playing ? '멈춤' : '재생'"
+          aria-label=""
+          (click)="onClickPlayOrPause()"
+        >
+          <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
+        </button>
+        <span class="ucap-sound-viewer-spacer"></span>
+        <div class="ucap-sound-viewer-sound-time-total">
+          {{ duration | ucapSecondsToMinutes }}
+        </div>
       </div>
     </div>
   </div>
-</div>
+</div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss

@@ -4,40 +4,73 @@
 
   .ucap-sound-viewer-header {
     width: 100%;
-    height: 50px;
+    height: 60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
+    background-color: #333333;
 
     .ucap-sound-viewer-icon {
+      margin-right: 10px;
     }
 
     .ucap-sound-viewer-title {
+      font-size:16px;
+    }
+    .stroke-bar {
+      width: 1px;
+      height: 30px;
+      background-color: rgba(256, 256, 256, 0.3);
+      margin: 0 10px;
+    }
+    .ucap-sound-viewer-action {
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 
   .ucap-sound-viewer-body {
     position: relative;
-    background-color: white;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 60px);
-    padding-bottom: 70px;
 
-    .ucap-sound-viewer-sound-icon {
+    .circle-box{
-      width: 100%;
+      display:flex;
-      height: calc(100% - 60px);
+      width:140px;
-    }
+      height:140px;
-    .ucap-sound-viewer-sound-time {
+      border-radius:50%;
-      width: 100%;
+      justify-content: center;
-      height: 30px;
+      align-items: center;
-    }
+      border:2px solid #ffffff;
-    .ucap-sound-viewer-sound-controls {
+      background-color:rgba(256, 256, 256, 0.7);
-      width: 100%;
+      .mat-icon{
-      height: 30px;
+        font-size: 100px;
-
+        height: 100px;
-      .ucap-sound-viewer-sound-time-current {
+        width: 100px;
-        padding-left: 30px;
       }
+    }
 
-      .ucap-sound-viewer-sound-time-total {
+    .ucap-sound-viewer-sound-icon{
-        padding-right: 30px;
+      width: 100%;
+       height: calc(100% - 80px);
+    }
+    .viewer-bottom{
+      background-color: #212121;
+      color:#ffffff;
+      .ucap-sound-viewer-sound-time {
+        width: 100%;
+        height: 30px;
+      }
+      .ucap-sound-viewer-sound-controls {
+        width: 100%;
+        height: 50px;
+
+        .ucap-sound-viewer-sound-time-current {
+          padding-left: 30px;
+        }
+
+        .ucap-sound-viewer-sound-time-total {
+          padding-right: 30px;
+        }
       }
     }
   }
@@ -45,9 +78,22 @@
     flex: 1 1 auto;
   }
   .ucap-sound-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;
+}