ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sound-viewer

Browse Source
This commit is contained in:
khk 2019-11-26 15:11:07 +09:00
parent 7e91df9a5d
commit fb753bef76
3 changed files with 125 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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
color="primary"
class="ucap-sound-viewer-action"
mat-icon-button
color="warn"
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>
<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 class="circle-box">
<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
</div>
<span class="ucap-sound-viewer-spacer"></span>
<button
mat-icon-button
class="ucap-sound-viewer-action"
[matTooltip]="playing ? '멈춤' : '재생'"
aria-label=""
(click)="onClickPlayOrPause()"
</div>
<div class="viewer-bottom">
<div
class="ucap-sound-viewer-sound-time"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
>
<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 }}
<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>
<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>

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

@ -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%;
padding-bottom: 70px;
height: calc(100% - 60px);
.ucap-sound-viewer-sound-icon {
width: 100%;
height: calc(100% - 60px);
}
.ucap-sound-viewer-sound-time {
width: 100%;
height: 30px;
}
.ucap-sound-viewer-sound-controls {
width: 100%;
height: 30px;
.ucap-sound-viewer-sound-time-current {
padding-left: 30px;
.circle-box{
display:flex;
width:140px;
height:140px;
border-radius:50%;
justify-content: center;
align-items: center;
border:2px solid #ffffff;
background-color:rgba(256, 256, 256, 0.7);
.mat-icon{
font-size: 100px;
height: 100px;
width: 100px;
}
}
.ucap-sound-viewer-sound-time-total {
padding-right: 30px;
.ucap-sound-viewer-sound-icon{
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;
}