Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

config/build/win/nsis/installer-for-.net45.nsh

@@ -0,0 +1,96 @@
+Function CheckAndDownloadDotNet45
+# Let's see if the user has the .NET Framework 4.5 installed on their system or not
+# Remember: you need Vista SP2 or 7 SP1.  It is built in to Windows 8, and not needed
+# In case you're wondering, running this code on Windows 8 will correctly return is_equal
+# or is_greater (maybe Microsoft releases .NET 4.5 SP1 for example)
+
+# Set up our Variables
+Var /GLOBAL dotNET45IsThere
+Var /GLOBAL dotNET_CMD_LINE
+Var /GLOBAL EXIT_CODE
+
+ReadRegDWORD $dotNET45IsThere HKLM "SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full" "Release"
+IntCmp $dotNET45IsThere 378389 is_equal is_less is_greater
+
+is_equal:
+    Goto done_compare_not_needed
+is_greater:
+    # Useful if, for example, Microsoft releases .NET 4.5 SP1
+    # We want to be able to simply skip install since it's not
+    # needed on this system
+    Goto done_compare_not_needed
+is_less:
+    Goto done_compare_needed
+
+done_compare_needed:
+    #.NET Framework 4.5 install is *NEEDED*
+
+    # Microsoft Download Center EXE:
+    # Web Bootstrapper: http://go.microsoft.com/fwlink/?LinkId=225704
+    # Full Download: http://go.microsoft.com/fwlink/?LinkId=225702
+
+    # Setup looks for components\dotNET45Full.exe relative to the install EXE location
+    # This allows the installer to be placed on a USB stick (for computers without internet connections)
+    # If the .NET Framework 4.5 installer is *NOT* found, Setup will connect to Microsoft's website
+    # and download it for you
+
+    # Reboot Required with these Exit Codes:
+    # 1641 or 3010
+
+    # Command Line Switches:
+    # /showrmui /passive /norestart
+
+    # Silent Command Line Switches:
+    # /q /norestart
+
+
+    # Let's see if the user is doing a Silent install or not
+    IfSilent is_quiet is_not_quiet
+
+    is_quiet:
+        StrCpy $dotNET_CMD_LINE "/q /norestart"
+        Goto LookForLocalFile
+    is_not_quiet:
+        StrCpy $dotNET_CMD_LINE "/showrmui /passive /norestart"
+        Goto LookForLocalFile
+
+    LookForLocalFile:
+        # Let's see if the user stored the Full Installer
+        IfFileExists "$EXEPATH\components\dotNET45Full.exe" do_local_install do_network_install
+
+        do_local_install:
+            # .NET Framework found on the local disk.  Use this copy
+
+            ExecWait '"$EXEPATH\components\dotNET45Full.exe" $dotNET_CMD_LINE' $EXIT_CODE
+            Goto is_reboot_requested
+
+        # Now, let's Download the .NET
+        do_network_install:
+
+            Var /GLOBAL dotNetDidDownload
+            NSISdl::download "http://go.microsoft.com/fwlink/?LinkId=225704" "$TEMP\dotNET45Web.exe" $dotNetDidDownload
+
+            StrCmp $dotNetDidDownload success fail
+            success:
+                ExecWait '"$TEMP\dotNET45Web.exe" $dotNET_CMD_LINE' $EXIT_CODE
+                Goto is_reboot_requested
+
+            fail:
+                MessageBox MB_OK|MB_ICONEXCLAMATION "Unable to download .NET Framework.  ${PRODUCT_NAME} will be installed, but will not function without the Framework!"
+                Goto done_dotNET_function
+
+            # $EXIT_CODE contains the return codes.  1641 and 3010 means a Reboot has been requested
+            is_reboot_requested:
+                ${If} $EXIT_CODE = 1641
+                ${OrIf} $EXIT_CODE = 3010
+                    SetRebootFlag true
+                ${EndIf}
+
+done_compare_not_needed:
+    # Done dotNET Install
+    Goto done_dotNET_function
+
+#exit the function
+done_dotNET_function:
+
+FunctionEnd

config/build/win/nsis/installer.nsh

@@ -0,0 +1,8 @@
+!macro customInit
+
+!macroend
+
+!macro customInstall
+  File "${BUILD_RESOURCES_DIR}\win\bin\npcap-0.99-r7.exe"
+  ExecWait '"$INSTDIR\npcap-0.99-r7.exe" /npf_startup=yes /loopback_support=yes /admin_only=no /dot11_support=yes /vlan_support=yes /winpcap_mode=yes'
+!macroend

config/main.webpack.config.ts

@@ -82,7 +82,7 @@ const mainConfig: webpack.Configuration = {
     ),
     new CopyWebpackPlugin([
       {
-        from: 'ucap-webmessenger-electron/resources/**/*',
+        from: 'ucap-webmessenger-electron/assets/**/*',
         to: path.resolve(__dirname, '..', 'dist'),
         context: 'electron-projects'
       }

electron-builder.json

@@ -1,49 +1,18 @@
 {
+  "appId": "com.lgucap.dstalk",
   "productName": "DS Talk",
-  "appId": "com.lgucap.messenger",
   "asar": true,
-  "protocols": {
-    "name": "DS Talk",
-    "schemes": ["DS Talk"]
-  },
-  "publish": {
-    "provider": "generic",
-    "url": "http://localhost:8099/client-updates/"
-  },
-  "mac": {
-    "target": ["default"],
-    "icon": "./dist/ucap-webmessenger-electron/resources/installer/woori.icns"
-  },
-  "dmg": {
-    "title": "DS Talk",
-    "icon": "./dist/ucap-webmessenger-electron/resources/installer/woori.icns"
-  },
-  "win": {
-    "target": ["zip", "nsis"],
-    "icon": "./dist/ucap-webmessenger-electron/resources/image/16_16.ico",
-    "legalTrademarks": "(c) 2015 lgucap.com",
-    "publisherName": "LGCNS",
-    "signingHashAlgorithms": ["sha1"],
-    "certificateFile": "./config/sign/www.lgcns.com.pfx",
-    "certificatePassword": "it15itsm"
-  },
-  "linux": {
-    "target": ["AppImage", "deb", "rpm", "zip", "tar.gz"],
-    "icon": "./dist/ucap-webmessenger-electron/resources/linuxicon"
-  },
-  "nsis": {
-    "oneClick": true,
-    "allowToChangeInstallationDirectory": false,
-    "perMachine": false,
-    "differentialPackage": true
+  "extraMetadata": {
+    "name": "DS Talk"
   },
   "directories": {
-    "buildResources": "./dist/ucap-webmessenger-electron/resources/installer/",
+    "buildResources": "./config/build/",
     "output": "./dist/electron/"
   },
   "files": [
     "**/*",
     "!**/*.ts",
+    "!**/*.scss",
     "!LICENSE.md",
     "!package.json",
     "!package-lock.json",
@@ -54,8 +23,58 @@
     "!**/.awcache",
     "!**/.vscode",
     "!config/",
+    "!dist/",
     "!docker/",
     "!tsconfig.json",
-    "!tslint.json"
-  ]
+    "!tslint.json",
+    {
+      "filter": ["**/*"],
+      "from": "./dist/ucap-webmessenger-app/",
+      "to": "./renderer/"
+    },
+    {
+      "filter": ["**/*"],
+      "from": "./dist/ucap-webmessenger-electron/",
+      "to": "./electron/"
+    },
+    {
+      "filter": ["**/*"],
+      "from": "./config/build/${os}/icon/daesang/",
+      "to": "./assets/icon/"
+    }
+  ],
+  "protocols": {
+    "name": "DS Talk",
+    "schemes": ["DS Talk"]
+  },
+  "publish": {
+    "provider": "generic",
+    "url": "http://localhost:8099/client-updates/"
+  },
+  "mac": {
+    "target": ["default"],
+    "icon": "./config/build/mac/icon/woori.icns"
+  },
+  "dmg": {
+    "title": "DS Talk"
+  },
+  "win": {
+    "target": ["zip", "nsis"],
+    "icon": "./config/build/win/icon/daesang/16x16.ico",
+    "legalTrademarks": "(c) 2015 lgucap.com",
+    "publisherName": "LGCNS",
+    "signingHashAlgorithms": ["sha1"],
+    "certificateFile": "./config/sign/www.lgcns.com.pfx",
+    "certificatePassword": "it15itsm"
+  },
+  "linux": {
+    "target": ["AppImage", "deb", "rpm", "zip", "tar.gz"],
+    "icon": "./config/build/linux/icon/woori/"
+  },
+  "nsis": {
+    "oneClick": true,
+    "allowToChangeInstallationDirectory": false,
+    "perMachine": false,
+    "differentialPackage": true
+  }
 }

electron-projects/ucap-webmessenger-electron/src/app/AppWindow.ts

@@ -165,11 +165,7 @@ export class AppWindow {
     } else {
       this.window.loadURL(
         url.format({
-          pathname: path.join(
-            __dirname,
-            '..',
-            'ucap-webmessenger-app/index.html'
-          ),
+          pathname: path.join(__dirname, '..', 'renderer/index.html'),
           protocol: 'file:',
           slashes: true
         })

electron-projects/ucap-webmessenger-electron/src/index.ts

@@ -48,8 +48,22 @@ import { RendererUpdater } from './lib/renderer-updater';
 import { Storage } from './lib/storage';
 
 const appIconPath = __LINUX__
-  ? path.join(__dirname, 'resources/linuxicon', '256x256.png')
-  : path.join(__dirname, 'resources/image', '64_64.png');
+  ? __DEV__
+    ? path.join(
+        __dirname,
+        '../../',
+        'config/build/linux/icon/daesang/',
+        '256x256.png'
+      )
+    : path.join(__dirname, '..', '/assets/icon/', '256x256.png')
+  : __DEV__
+  ? path.join(
+      __dirname,
+      '../../',
+      'config/build/win/icon/daesang/',
+      '16x16.ico'
+    )
+  : path.join(__dirname, '..', '/assets/icon/', '16x16.ico');
 
 let appWindow: AppWindow | null = null;
 let appTray: Tray | null = null;
@@ -257,12 +271,12 @@ app.on(ElectronAppChannel.Ready, () => {
 
   notificationService.options.defaultWindow.webPreferences.preload = path.join(
     __dirname,
-    'resources/notification/preload.js'
+    'assets/notification/preload.js'
   );
 
   notificationService.templatePath = path.join(
     __dirname,
-    'resources/notification/template.html'
+    'assets/notification/template.html'
   );
 
   updateWindowService = new ElectronUpdateWindowService({
@@ -290,7 +304,7 @@ app.on(ElectronAppChannel.Ready, () => {
 
   updateWindowService.templatePath = path.join(
     __dirname,
-    'resources/update-window/template.html'
+    'assets/update-window/template.html'
   );
 
   // updateWindowService.show();
@@ -580,15 +594,12 @@ ipcMain.on(
       text: noti.contents,
       image:
         noti.image ||
-        path.join(
-          __dirname,
-          'resources/notification/images/img_nophoto_50.png'
-        ),
+        path.join(__dirname, 'assets/notification/images/img_nophoto_50.png'),
       sound: noti.useSound
         ? path.join(
             'file://',
             __dirname,
-            'resources/notification/sounds/messageAlarm.mp3'
+            'assets/notification/sounds/messageAlarm.mp3'
           )
         : '',
       displayTime: !!noti.displayTime ? noti.displayTime : undefined,

electron-projects/ucap-webmessenger-electron/src/util/root.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 // tslint:disable-next-line: variable-name
 const _root = __DEV__
   ? path.resolve(__dirname, '..', '..')
-  : path.resolve(__dirname, '..', '..');
+  : path.resolve(__dirname, '..');
 
 export function root(...paths: string[]) {
   const args = Array.prototype.slice.call(paths, 0);

package.json

@@ -145,5 +145,5 @@
     "webpack-node-externals": "^1.7.2",
     "zone.js": "~0.9.1"
   },
-  "main": "./dist/ucap-webmessenger-electron/main.js"
+  "main": "./electron/main.js"
 }

projects/ucap-webmessenger-app/src/app/app-translate.module.ts

@@ -19,7 +19,7 @@ export function createTranslateLoader(nativeService: NativeService) {
       break;
     case NativeType.Electron:
       prefix = environment.production
-        ? '/dist/ucap-webmessenger-app/assets/i18n/'
+        ? '/renderer/assets/i18n/'
         : '/projects/ucap-webmessenger-app/src/assets/i18n/';
 
       break;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -50,6 +50,16 @@
           line-height: 40px;
         }
       }
+      width: 50px;
+      height: 50px;
+      &.thumbnail-mask {
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 50px;
+          height: auto;
+        }
+      }
     }
     .room-info {
       display: flex;

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -90,8 +90,8 @@ $lg-red: (
 $aquaBlue-daesang: (
   50: #f9feff,
   //#e0f7fa,
-    100: #b2ebf2,
-  200: #4dd0e1,
+    /* 100: #b2ebf2,*/ 100: #ebfdff,
+  200: #65e4f5,
   //#80deea,
     300: #4dd0e1,
   400: #26c6da,
@@ -221,6 +221,9 @@ $daesang-grey: (
   .text-primary-color {
     color: mat-color($primary);
   }
+  .text-accent-dark {
+    color: mat-color($accent, 600);
+  }
   .text-accent-darkest {
     color: mat-color($accent, 800);
   }
@@ -379,4 +382,25 @@ $daesang-grey: (
       background-color: mat-color($accent, B100);
     }
   }
+
+  .message-row {
+    .message-main {
+      .bubble {
+        background-color: mat-color($accent, 100);
+        border: 1px solid mat-color($accent, 200);
+        overflow: hidden;
+      }
+    }
+    &.me {
+      .message-main {
+        .bubble {
+          background-color: #ffffff;
+          border: 1px solid mat-color($primary, 300);
+          .event-info {
+            border-radius: 0 0 0 6px;
+          }
+        }
+      }
+    }
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html

@@ -1,4 +1,4 @@
-<div class="event-main">
+<div class="event-main bg-accent-dark">
   <div class="event-header">
     <ng-container
       *ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
@@ -20,15 +20,16 @@
     </ng-container>
   </div>
   <ul class="event-info">
-    <li class="event-title">
+    <li class="event-date bg-accent-brightest">
+      <span class="bg-accent-dark">날짜</span
+      >{{ date | ucapDate: 'YYYY.MM.DD' }}
+    </li>
+    <li class="event-time bg-accent-brightest">
+      <span class="bg-accent-dark">시간</span>{{ date | ucapDate: 'a hh:mm' }}
+    </li>
+    <li class="event-content">
       {{ message.sentMessageJson.title }}
     </li>
-    <li class="event-date">
-      <span>날짜</span>{{ date | ucapDate: 'YYYY.MM.DD' }}
-    </li>
-    <li class="event-time">
-      <span>시간</span>{{ date | ucapDate: 'a hh:mm' }}
-    </li>
   </ul>
 
   <!-- <div class="btn-box">

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss

@@ -1,32 +1,49 @@
 .event-main {
   flex-direction: column;
   text-align: left;
+  padding: 4px;
   .event-header {
-    padding: 10px;
-    background-color: #efefef;
-    text-align: center;
+    padding: 10px 10px 10px 36px;
     font-size: 14px;
     font-weight: 600;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    border-radius: 3px 3px 0 0;
+    min-width: 200px;
+    vertical-align: middle;
+    stroke: #ffffff;
   }
   .event-info {
-    padding: 10px 14px;
-    line-height: 1.6em;
+    border-radius: 0 0 6px 6px;
+    background-color: #ffffff;
     li {
-      margin-bottom: 4px;
       &.event-title {
-        border-bottom: 1px solid #dddddd;
         margin-bottom: 10px;
         padding-bottom: 10px;
         font-size: 14px;
       }
       &.event-date,
       &.event-time {
-        color: #666666;
-      }
+        padding: 4px 10px;
+        border-bottom: 1px dotted #dddddd;
         span {
-        padding: 2px 6px;
-        background-color: #efefef;
-        margin-right: 10px;
+          width: 60px;
+          padding: 1px 6px;
+          margin-right: 6px;
+          border-radius: 100px;
+          line-height: 20px;
+          display: inline-flex;
+          justify-content: center;
+          font-size: 0.96em;
+          margin-bottom: 2px;
+        }
+      }
+      &.event-content {
+        padding: 10px;
+        color: #444444;
+        font-weight: normal;
+        font-size: 1em;
       }
     }
   }
@@ -40,3 +57,11 @@
     }
   }
 }
+
+::ng-deep .message-row.me > .event-info {
+  border-radius: 0 0 0 6px;
+}
+
+.feather-calendar {
+  stroke: #ffffff;
+}

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -129,24 +129,10 @@
       <ng-template #contents>
         <div
           *ngIf="getUserProfile(message.senderSeq) != ''"
-          class="profile-img"
+          class="profile-img thumbnail-mask"
         >
-          <!-- <img
-                class="avatar"
-                style="width: 50px; height: 50px;"
-                [src]="
-                  profileImageRoot
-                    | ucapUiImaage
-                      : {
-                          path: getUserProfile(message.senderSeq),
-                          default: 'assets/images/img_nophoto_50.png'
-                        }
-                    | async
-                "
-              /> -->
             <img
               class="avatar"
-            style="width: 50px; height: 50px;"
               ucapImage
               [base]="profileImageRoot"
               [path]="getUserProfile(message.senderSeq)"

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -31,8 +31,15 @@ $meBox-bg: #ffffff;
     margin-left: 0;
     .profile-img {
       flex: 0 0 auto;
-      img {
+      &.thumbnail-mask {
         border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        overflow: hidden;
+        img {
+          width: 50px;
+          height: auto;
+        }
       }
     }
   }
@@ -58,7 +65,7 @@ $meBox-bg: #ffffff;
       color: #333333;
       margin-bottom: 6px;
     }
-    .bubble {
+    /*.bubble {
       border: 1px solid $otherBox-line;
       font-weight: 900;
       position: relative;
@@ -91,6 +98,14 @@ $meBox-bg: #ffffff;
         left: -10px;
         top: 5px;
       }
+    }*/
+    .bubble {
+      border-radius: 0 10px 10px 10px;
+      font-weight: 900;
+      position: relative;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+      word-break: break-all;
+      word-wrap: break-word;
     }
   }
   .secondary-text {
@@ -110,10 +125,10 @@ $meBox-bg: #ffffff;
   }
 }
 
-.message-row.me > .bubble {
+/*.message-row.me > .bubble {
   border: 1px solid $meBox-line;
   background-color: $meBox-bg;
-}
+}*/
 .message-row.me {
   .profile-img {
     display: none;
@@ -125,7 +140,10 @@ $meBox-bg: #ffffff;
     text-align: right;
     margin-left: 10px;
     margin-right: 20px;
-    & .bubble:before {
+    .bubble {
+      border-radius: 10px 10px 0 10px;
+    }
+    /* & .bubble:before {
       content: '';
       width: 0px;
       height: 0px;
@@ -150,7 +168,7 @@ $meBox-bg: #ffffff;
       left: initial;
       right: -10px;
       top: 5px;
-    }
+    }*/
   }
 }
 .bubble-main {

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html

@@ -25,14 +25,82 @@
     </form>
   </div>
   <div class="btns">
-    <button mat-stroked-button (click)="onClickSearchAndPrev()">
-      <span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
+    <button
+      mat-stroked-button
+      (click)="onClickSearchAndPrev()"
+      class="btn-toggle"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
+        <polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
+        <line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
+      </svg>
     </button>
-    <button mat-stroked-button (click)="onClickPrevSearch()">
-      <span class="mdi mdi-arrow-up-bold mid-18px"></span>
+    <button mat-stroked-button (click)="onClickPrevSearch()" class="btn-toggle">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <line class="st0" x1="10" y1="15.8" x2="10" y2="4.2" />
+        <polyline class="st0" points="4.2,10 10,4.2 15.8,10 " />
+      </svg>
     </button>
-    <button mat-stroked-button (click)="onClickNextSearch()">
-      <span class="mdi mdi-arrow-down-bold mid-18px"></span>
+    <button mat-stroked-button (click)="onClickNextSearch()" class="btn-toggle">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-arrow-up"
+      >
+        <line class="st0" x1="10" y1="4.2" x2="10" y2="15.8" />
+        <polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
+      </svg>
     </button>
+    <!--<mat-button-toggle-group>
+      <mat-button-toggle></mat-button-toggle>
+      <mat-button-toggle >
+        <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="round"
+          stroke-linejoin="round"
+          class="feather feather-arrow-up"
+        >
+          <line x1="12" y1="19" x2="12" y2="5"></line>
+          <polyline points="5 12 12 5 19 12"></polyline>
+        </svg>
+      </mat-button-toggle>
+      <mat-button-toggle ></mat-button-toggle>
+    </mat-button-toggle-group>-->
   </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss

@@ -1,6 +1,7 @@
 .chatroom-search {
   display: flex;
   flex: 1 1 auto;
+  justify-items: center;
   .search-form {
     flex-flow: row;
     flex: 1 1 auto;
@@ -11,6 +12,10 @@
         flex-flow: row;
         flex: 1 1 auto;
         margin-right: 20px;
+        .mat-form-field-label,
+        .mat-hint {
+          color: rgba(0, 0, 0, 0.54);
+        }
       }
       .text-amount {
         display: inline-flex;
@@ -24,3 +29,41 @@
     flex: 0 0 0%;
   }
 }
+
+.mat-form-field-label,
+.mat-hint {
+  color: rgba(0, 0, 0, 0.54);
+}
+
+::ng-deep .btns {
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  height: 42px;
+  .mat-stroked-button {
+    border: none;
+    min-width: 40px;
+    height: 42px;
+    padding: 0 10px;
+    &.btn-toggle {
+      display: flex;
+      border-right: 1px solid #dddddd;
+      justify-items: center;
+      &:last-child {
+        border-right: none;
+      }
+      .mat-button-wrapper {
+        display: flex;
+        line-height: inherit;
+        justify-content: center;
+        justify-items: center;
+        width: 20px;
+        height: 20px;
+        svg {
+          width: 100%;
+          height: 100%;
+          stroke: #555555;
+        }
+      }
+    }
+  }
+}

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

@@ -12,9 +12,20 @@
       (click)="onClickDownload()"
     >
       <!--<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
+        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>
@@ -24,8 +35,17 @@
       class="ucap-image-viewer-action btn-close"
       (click)="onClickClose()"
     >
-      <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">
+      <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>
@@ -60,7 +80,21 @@
         (loadeddata)="onLoadedDataAudio()"
       ></audio>
       <div class="circle-box">
-        <mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
+        <mat-icon class="ucap-sound-viewer-icon" *ngIf="!playing">
+          music_note
+        </mat-icon>
+        <div class="sound-wave" *ngIf="playing">
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+          <div class="sound-bar bg-accent-dark"></div>
+        </div>
       </div>
     </div>
     <div class="viewer-bottom">
@@ -83,7 +117,6 @@
         class="ucap-sound-viewer-sound-controls"
         fxLayout="row"
         fxLayout.xs="column"
-        fxLayoutAlign="center center"
       >
         <div class="ucap-sound-viewer-sound-time-current">
           {{ currentTime | ucapSecondsToMinutes }}

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

@@ -13,7 +13,7 @@
     }
 
     .ucap-sound-viewer-title {
-      font-size:16px;
+      font-size: 16px;
     }
     .stroke-bar {
       width: 1px;
@@ -33,29 +33,38 @@
     width: 100%;
     height: calc(100% - 60px);
 
-    .circle-box{
-      display:flex;
-      width:140px;
-      height:140px;
-      border-radius:50%;
+    .circle-box {
+      position: relative;
+      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{
+      border: 2px solid #ffffff;
+      background-color: rgba(256, 256, 256, 0.7);
+      .mat-icon {
         font-size: 100px;
         height: 100px;
         width: 100px;
       }
+      .sound-wave {
+        height: 80px;
+        left: 50%;
+        margin: -35px 0 0 -35px;
+        position: absolute;
+        bottom: 30px;
+        width: 70px;
+      }
     }
 
-    .ucap-sound-viewer-sound-icon{
+    .ucap-sound-viewer-sound-icon {
       width: 100%;
       height: calc(100% - 80px);
     }
-    .viewer-bottom{
+    .viewer-bottom {
       background-color: #212121;
-      color:#ffffff;
+      color: #ffffff;
       .ucap-sound-viewer-sound-time {
         width: 100%;
         height: 30px;
@@ -78,22 +87,83 @@
     flex: 1 1 auto;
   }
   .ucap-sound-viewer-action {
-    .mat-icon{
+    .mat-icon {
       font-size: 40px;
       width: 100%;
       height: 100%;
-      line-height:40px;
+      line-height: 50px;
     }
   }
 }
 
+.sound-bar {
+  bottom: 1px;
+  height: 10px;
+  position: absolute;
+  width: 5px;
+  animation: sound-play 0ms -800ms linear infinite alternate;
+}
+.sound-bar:nth-child(1) {
+  left: 0px;
+  animation-duration: 474ms;
+}
+.sound-bar:nth-child(2) {
+  left: 7px;
+  animation-duration: 433ms;
+}
+.sound-bar {
+  left: 14px;
+  animation-duration: 407ms;
+}
+.sound-bar:nth-child(4) {
+  left: 21px;
+  animation-duration: 458ms;
+}
+.sound-bar:nth-child(5) {
+  left: 28px;
+  animation-duration: 400ms;
+}
+.sound-bar:nth-child(6) {
+  left: 35px;
+  animation-duration: 427ms;
+}
+.sound-bar:nth-child(7) {
+  left: 42px;
+  animation-duration: 441ms;
+}
+.sound-bar:nth-child(8) {
+  left: 49px;
+  animation-duration: 419ms;
+}
+.sound-bar:nth-child(9) {
+  left: 56px;
+  animation-duration: 487ms;
+}
+.sound-bar:nth-child(10) {
+  left: 63px;
+  animation-duration: 442ms;
+}
+
+@keyframes sound-play {
+  0% {
+    opacity: 0.35;
+    height: 10px;
+  }
+  100% {
+    opacity: 1;
+    height: 60px;
+  }
+}
+
 mat-slider {
   width: 94%;
 }
 
-::ng-deep .mat-slider-horizontal .mat-slider-track-background{
+::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{
+::ng-deep
+  .mat-slider-min-value:not(.mat-slider-thumb-label-showing)
+  .mat-slider-thumb {
   border-color: #999999 !important;
 }