- {{ loadedEvent.activityInstanceName }}
{{durationDisplay}}
-
+
+
diff --git a/src/app/shared/chat/messages/messages.page.scss b/src/app/shared/chat/messages/messages.page.scss
index 4490b9c02..2d4bb8fb7 100644
--- a/src/app/shared/chat/messages/messages.page.scss
+++ b/src/app/shared/chat/messages/messages.page.scss
@@ -1,106 +1,117 @@
@import '~src/function.scss';
-.header-toolbar{
- --background:transparent;
- --opacity: 1;
- .main-header{
- width: 100%; /* 400px */
- height: 100%;
- font-family: Roboto;
- background-color: #fff;
- overflow:hidden;
- //padding: 0px 20px 0px 20px;
- color:#000;
- transform: translate3d(0, 1px, 0);
- padding: 30px 20px 0 20px !important;
+.header-toolbar {
+ --background: transparent;
+ --opacity: 1;
- .header-top{
- width: 100%;
- overflow: auto;
- //padding: 0 !important;
- background: #fff;
- .middle{
- //padding: 0!important;
- float: left;
- width:calc(100% - 77px);
- margin: 2px 0 0 5px;
- display: flex;
- align-items: center;
+ .main-header {
+ width: 100%;
+ /* 400px */
+ height: 100%;
+ font-family: Roboto;
+ background-color: #fff;
+ overflow: hidden;
+ //padding: 0px 20px 0px 20px;
+ color: #000;
+ transform: translate3d(0, 1px, 0);
+ padding: 30px 20px 0 20px !important;
- }
- .right{
- padding: 0!important;
- float: right;
- font-size: 25px;
- color: #0782c9;
- margin: 5px 0 0 0;
- }
- }
- .header-bottom{
- width: 95%;
- overflow: auto;
+ .header-top {
+ width: 100%;
+ overflow: auto;
+ //padding: 0 !important;
+ background: #fff;
+ .middle {
+ //padding: 0!important;
+ float: left;
+ width: calc(100% - 77px);
+ margin: 2px 0 0 5px;
+ display: flex;
+ align-items: center;
- .header-bottom-icon{
- width: 30px;
- font-size: 25px;
- float: left;
- padding: 2px;
+ }
- }
- .header-bottom-contacts{
- width: 275px;
- font-size: 15px;
- color: #797979;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- float: left;
- padding: 5px;
- margin: 1px;
- }
- }
-
- .title{
- font-size: 25px;
- white-space: nowrap;
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- float: left;
- }
- .div-icon{
- width: 40px;
- float: right;
- font-size: 35px;
- overflow: auto;
- padding: 1px;
- }
- .div-icon ion-icon{
- float: right;
- padding-left: 20px;
- }
+ .right {
+ padding: 0 !important;
+ float: right;
+ font-size: 25px;
+ color: #0782c9;
+ margin: 5px 0 0 0;
+ }
}
- }
- ion-content{
- width: 100%;
- height: 100%;
- padding: 30px 20px 0 20px !important;
- .welcome-text{
+
+ .header-bottom {
+ width: 95%;
+ overflow: auto;
+
+
+ .header-bottom-icon {
+ width: 30px;
+ font-size: 25px;
+ float: left;
+ padding: 2px;
+
+ }
+
+ .header-bottom-contacts {
+ width: 275px;
+ font-size: 15px;
+ color: #797979;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ float: left;
+ padding: 5px;
+ margin: 1px;
+ }
+ }
+
+ .title {
+ font-size: 25px;
+ white-space: nowrap;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ float: left;
+ }
+
+ .div-icon {
+ width: 40px;
+ float: right;
+ font-size: 35px;
+ overflow: auto;
+ padding: 1px;
+ }
+
+ .div-icon ion-icon {
+ float: right;
+ padding-left: 20px;
+ }
+ }
+}
+
+ion-content {
+ width: 100%;
+ height: 100%;
+ padding: 30px 20px 0 20px !important;
+
+ .welcome-text {
/* width: 322px; */
/* width: em(422px); */
width: 100%;
- background: #ebebeb;
- text-align: center;
- font-size: 13px;
- color: #797979;
- padding: 10px;
- margin: 0 auto;
- line-height: 1.2rem;
- //margin: 20px 39px 25px;
- border-radius: 8px;
- border: 1px solid red;
- }
- .info-meeting{
+ background: #ebebeb;
+ text-align: center;
+ font-size: 13px;
+ color: #797979;
+ padding: 10px;
+ margin: 0 auto;
+ line-height: 1.2rem;
+ //margin: 20px 39px 25px;
+ border-radius: 8px;
+ border: 1px solid red;
+ }
+
+ .info-meeting {
/* width: 322px; */
width: em(422px);
background: var(--chat-alert-msg-color);
@@ -113,23 +124,26 @@
/* margin: 15px 0px 15px 0px; */
border-radius: 8px;
- .info-meeting-small{
+ .info-meeting-small {
font-size: 10px;
font-style: italic;
}
- .info-meeting-medium{
+
+ .info-meeting-medium {
font-size: 12px;
}
- .info-meeting-normal{
+
+ .info-meeting-normal {
font-weight: 700;
}
- .info-meeting-normal:hover{
+
+ .info-meeting-normal:hover {
text-decoration: underline;
color: #0782c9;
}
- }
+ }
- .messages{
+ .messages {
font-size: 13px;
font-family: Roboto;
overflow: auto;
@@ -145,96 +159,101 @@
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
- .container-width-100{
+ .container-width-100 {
width: 100%;
overflow: auto;
}
- .incoming-true, .incoming-false{
- padding: 15px 20px;
- border-radius: 10px;
+ .incoming-true,
+ .incoming-false {
+ padding: 15px 20px;
+ border-radius: 10px;
}
- .incoming-true{
+ .incoming-true {
margin: 10px 75px 10px 20px;
- background: #ebebeb;
- float: left;
- }
- }
- .incoming-false{
- margin: 10px 20px 10px 75px;
- background: var(--chat-incoming-msg-color);
- float: right;
- }
- .title{
- display: inline;
- color: var(--title-text-color);
- font-weight: bold;
- margin-bottom: 5px;
-
- .time{
- color: #797979;
- text-align: right;
- margin-left: 10px;
- float: right;
- }
+ background: #ebebeb;
+ float: left;
}
- .message{
- .message-attachments{
- .file{
- align-items: center;
+ }
- .file-details{
- width: 100%;
+ .incoming-false {
+ margin: 10px 20px 10px 75px;
+ background: var(--chat-incoming-msg-color);
+ float: right;
+ }
- .file-title{
- color: #000;
- text-decoration: underline;
- white-space: nowrap;
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- }
- .file-title:hover{
- color: #0782c9;
- }
+ .title {
+ display: inline;
+ color: var(--title-text-color);
+ font-weight: bold;
+ margin-bottom: 5px;
+
+ .time {
+ color: #797979;
+ text-align: right;
+ margin-left: 10px;
+ float: right;
+ }
+ }
+
+ .message {
+ .message-attachments {
+ .file {
+ align-items: center;
+
+ .file-details {
+ width: 100%;
+
+ .file-title {
+ color: #000;
+ text-decoration: underline;
+ white-space: nowrap;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ }
+
+ .file-title:hover {
+ color: #0782c9;
}
}
}
}
- }
+ }
+}
- ion-footer{
- padding-top: 7.5px;
- padding-bottom: 7.5px;
+ion-footer {
+ padding-top: 7.5px;
+ padding-bottom: 7.5px;
- .container{
+ .container {
justify-content: center;
justify-content: space-evenly;
align-items: center;
}
- .chat-icon-options{
- display:block !important;
+ .chat-icon-options {
+ display: block !important;
font-size: 35px;
float: right !important;
margin-top: 5px;
}
- .chat-icon-send{
+ .chat-icon-send {
font-size: 45px;
margin: 0 auto;
margin-top: 4px;
}
- .chat-icon-download{
+ .chat-icon-download {
font-size: 95px;
margin: 0 auto;
margin-top: 4px;
border: 1px solid red;
}
- .type-message{
+ .type-message {
display: flex;
border: 1px solid #ebebeb;
border-radius: 25px;
@@ -243,65 +262,71 @@
align-items: center;
overflow: auto;
- ion-textarea{
- margin: 0 !important;
- align-self: center;
- }
+ ion-textarea {
+ margin: 0 !important;
+ align-self: center;
}
+ }
- }
+}
- .text-color-blue{
- font-size: 15px;
- color: #0782c9;
- font-weight: 500;
- letter-spacing: normal;
- }
- .user-status-online{
- display: block;
- float: left;
- color:#99e47b;
- padding-left: 10px;
- }
- .online{
+.text-color-blue {
+ font-size: 15px;
+ color: #0782c9;
+ font-weight: 500;
+ letter-spacing: normal;
+}
+
+.user-status-online {
display: block;
float: left;
- color:#99e47b;
+ color: #99e47b;
padding-left: 10px;
}
-.offline{
- color:#cbced1;
- display: block;
- float: left;
- padding-left: 10px;
-}
-.away{
-color:#ffd21f;
-display: block;
- float: left;
- padding-left: 10px;
-}
-.invisible{
- color:#cbced1;
+
+.online {
display: block;
- float: left;
- padding-left: 10px;
-}
-.busy{
- color:#f5455c;
- display: block;
- float: left;
- padding-left: 10px;
+ float: left;
+ color: #99e47b;
+ padding-left: 10px;
}
-.float-status{
+.offline {
+ color: #cbced1;
+ display: block;
+ float: left;
+ padding-left: 10px;
+}
+
+.away {
+ color: #ffd21f;
+ display: block;
+ float: left;
+ padding-left: 10px;
+}
+
+.invisible {
+ color: #cbced1;
+ display: block;
+ float: left;
+ padding-left: 10px;
+}
+
+.busy {
+ color: #f5455c;
+ display: block;
+ float: left;
+ padding-left: 10px;
+}
+
+.float-status {
position: relative !important;
float: right;
display: flex;
align-items: self-end;
}
-.float-status-image{
+.float-status-image {
position: relative !important;
float: right;
display: flex;
@@ -337,7 +362,7 @@ display: block;
padding-right: 5px;
}
-.div-do-audio{
+.div-do-audio {
border: 1px solid red !important;
overflow: auto;
}
@@ -346,3 +371,21 @@ display: block;
flex: auto;
margin-right: 9px;
}
+
+.divColor {
+ color: #000;
+ width: 10ch;
+ height: 10ch;
+}
+
+.audioDiv {
+ border-radius: 25px;
+ background: #cbced1;
+ padding: 20px;
+ height: 50px;
+}
+
+.audioButtonPlay {
+ margin-bottom: 100%;
+ right: 50%;
+}
\ No newline at end of file
diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts
index ad1a1ac3f..cd3922145 100644
--- a/src/app/shared/chat/messages/messages.page.ts
+++ b/src/app/shared/chat/messages/messages.page.ts
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, ModalController, PopoverController } from '@ionic/angular';
+import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -32,6 +32,8 @@ import { File } from '@awesome-cordova-plugins/file/ngx';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { SessionStore } from 'src/app/store/session.service';
import { HttpErrorResponse } from '@angular/common/http';
+import { Howl } from 'howler';
+import { runInThisContext } from 'vm';
const IMAGE_DIR = 'stored-images';
@@ -90,6 +92,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
sessionStore = SessionStore
+ audioPlay: Howl = null;
+ isPlaying = false;
+ audioProgress = 0;
+ audioDuration = 0;
+ audioTimer:any;
+ @ViewChild('range', {static: false}) range: IonRange;
constructor(
public popoverController: PopoverController,
@@ -1061,6 +1069,54 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
// msg.receptorReceive()
// alert('cool!')
}
+
+ start(track) {
+ if(this.audioPlay){
+ this.audioPlay.stop();
+ }
+ this.audioPlay = new Howl({
+ src: [track.changingThisBreaksApplicationSecurity],
+ onplay: () => {
+ console.log('audio play')
+ this.isPlaying = true;
+ this.updateProgress()
+ },
+ onend: () => {
+ console.log('audio end')
+ this.isPlaying = false;
+ clearTimeout(this.audioTimer)
+ this.audioProgress = 0
+
+ },
+ })
+ this.audioPlay.play();
+ }
+
+ togglePlayer(pause) {
+ this.isPlaying = !pause;
+ if(pause) {
+ this.audioPlay.pause();
+ } else {
+ this.audioPlay.play();
+ }
+ }
+
+ seek() {
+ let newValue = +this.range.value;
+ let duration = this.audioPlay.duration();
+ this.audioPlay.seek(duration * (newValue / 100));
+ }
+
+ updateProgress() {
+ let seek = this.audioPlay.seek();
+ this.audioProgress = (seek / this.audioPlay.duration()) * 100 || 0;
+ console.log(this.audioDuration)
+ this.audioTimer = setTimeout(() => {
+ this.updateProgress()
+ },1000)
+ }
+
+
}
diff --git a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
index 056da1da2..3214adf1d 100644
--- a/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
+++ b/src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html
@@ -131,10 +131,6 @@
-<<<<<<< HEAD
-=======
-
->>>>>>> secrete-group