Merge branch 'develop' of bitbucket.org:equilibriumito/gabinete-digital-fo into feature/aganda-show-list-box

src/app/modals/view-media/view-media.page.html

@@ -20,18 +20,18 @@
       <ion-slides style="width: 100%; height: 100%;" [options]="sliderOpts">
         <ion-slide>
           <div class="swiper-zoom-container">
-            <div *ngIf="type == 'application/img'">
+            <div>
               <img src="{{image}}">
             </div>
-            <div *ngIf="type == 'application/pdf'">
-              <iframe width="100%" height="100%" [src]="base64Sanitize" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"></iframe>
+            <!-- <div *ngIf="type == 'application/pdf'">
+              <iframe width="100%" height="100%" [src]="base64Sanitize" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"></iframe> -->
               
               <!-- <pdf-viewer [src]="image"
               [render-text]="true"
               [original-size]="false"
               style="width: 400px; height: 500px"
   ></pdf-viewer> -->
-            </div>
+            <!-- </div> -->
           </div>
         </ion-slide>
       </ion-slides>

src/app/pages/agenda/event-actions-popover/event-actions-popover.page.html

@@ -8,6 +8,7 @@
 
   <div class="buttons">
     <button *ngIf="activityInstanceName == 'Aprovar Evento'" class="btn-cancel" shape="round" (click)="emendarTask()">Rever</button>
+    <button *ngIf="activityInstanceName == 'Aprovar Evento'" class="btn-cancel" shape="round" (click)="editTask()">Editar</button>
     <button *ngIf="activityInstanceName == 'Aprovar Evento'" class="btn-cancel" shape="round" (click)="approveTask()">Aprovar</button>
     <div class="solid"></div>
     <button *ngIf="activityInstanceName != 'Aprovar Evento'" class="btn-cancel" shape="round" (click)="editTask()">Editar</button>

src/app/pages/agenda/view-event/view-event.page.html

@@ -57,7 +57,7 @@
             <ion-label>
               <p>{{customDate}}</p>
               <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
-              <p>
+              <p *ngIf="loadedEvent.EventRecurrence">
                 <span *ngIf="loadedEvent.EventRecurrence.Type == 0">Diário</span>
                 <span *ngIf="loadedEvent.EventRecurrence.Type == 1">Semanal</span>
                 <span *ngIf="loadedEvent.EventRecurrence.Type == 2">Mensal</span>

src/app/pages/agenda/view-event/view-event.page.ts

@@ -166,7 +166,9 @@ export class ViewEventPage implements OnInit {
           window.history.back();
         }
         else {
-          this.router.navigate(['/home', params["params"].caller]);
+          // this.router.navigate(['/home', params["params"].caller]);
+          this.RouteService.goBack();
+          
         }
       });
     }

src/app/pages/chat/group-messages/group-messages.page.html

@@ -11,7 +11,7 @@
         </div>
         <div class="middle-container" *ngIf="!showMessageOptions">
           <div class="middle add-ellipsis">
-            <ion-label class="title">{{wsChatMethodsService.getGroupRoom(roomId).name}}</ion-label>
+            <ion-label class="title">{{groupNameFormart}}</ion-label>
           </div>
         </div>
         <div class="middle-container-options" *ngIf="showMessageOptions">

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -68,6 +68,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   selectedMsgId: string;
   roomCountDownDate: any;
   downloadFile: any;
+  groupNameFormart = "";
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
@@ -82,6 +83,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showAvatar = true;
   audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
   sessionStore = SessionStore
+  isAdmin = false;
   constructor(
     private modalController: ModalController,
     public popoverController: PopoverController,
@@ -116,6 +118,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory({});
     this.wsChatMethodsService.getGroupRoom(this.roomId).scrollDown = this.scrollToBottomClicked;
     this.wsChatMethodsService.openRoom(this.roomId)
+    this.groupNameFormart = this.wsChatMethodsService.getGroupRoom(this.roomId).name.split('-').join(' ') 
 
     setTimeout(() => {
       this.scrollToBottomClicked()
@@ -362,7 +365,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     } catch (err) { }
   }
 
-  getRoomInfo() {
+  async getRoomInfo() {
     this.showLoader = true;
     // this.chatService.getRoomInfo(this.roomId).subscribe(room => {
     //   this.room = room['room'];
@@ -373,6 +376,24 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     //   this.getGroupContacts(this.room);
     //   this.showLoader = false;
     // });
+    this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory({});
+    let room = await this.chatService.getRoomInfo(this.roomId).toPromise();
+    // console.log('ROOM',room)
+    this.room = room['room'];
+    if (this.room.name) {
+      this.roomName = this.room.name.split('-').join(' ');
+    }
+    
+
+    if(SessionStore.user.ChatData.data.userId == this.room.u._id){
+      this.isAdmin = true
+    } else {
+      this.isAdmin = false
+    }
+
+    if (this.room.customFields.countDownDate) {
+      this.roomCountDownDate = this.room.customFields.countDownDate;
+    }
   }
 
   async getChatMembers() {
@@ -507,6 +528,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       componentProps: {
         roomId: this.roomId,
         members: this.members,
+        isAdmin: this.isAdmin,
       },
     });
     await modal.present();

src/app/pages/events/events.page.ts

@@ -24,6 +24,7 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { Storage } from '@ionic/storage';
 import { PermissionList } from 'src/app/models/permission/permissionList';
 import { PermissionService } from 'src/app/services/permission.service';
+import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
 @Component({
   selector: 'app-events',
   templateUrl: './events.page.html',
@@ -471,6 +472,22 @@ export class EventsPage implements OnInit {
 
   }
 
+  async openEventDetail(id: any) {
+    // 
+
+    const modal = await this.modalController.create({
+      component: ViewEventPage,
+      componentProps: {
+        eventId: id,
+      },
+      cssClass: 'view-event',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+
+  }
+
   LoadList() {
     this.processes.GetTaskListExpediente(false).subscribe(result => {
       // 

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html

@@ -101,9 +101,8 @@
       </div>
 
     <div *ngIf="loadedEvent" class="aside-right flex-column height-100">
-      {{ loadedEvent.activityInstanceName }}
       <div class="aside-buttons">
-        <button full class="btn-cancel" shape="round" *ngIf="loadedEvent.activityInstanceName == 'Aprovar Evento'">Editar evento</button>
+        <button (click)="editar(loadedEvent.serialNumber)" full class="btn-cancel" shape="round" *ngIf="loadedEvent.activityInstanceName == 'Aprovar Evento'">Editar evento</button>
         <button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-cancel" shape="round" *ngIf="loadedEvent.activityInstanceName == 'Aprovar Evento'">Aprovar</button>
         <button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Rever</button>
         <div class="solid"></div>

src/app/shared/chat/group-messages/group-messages.page.html

@@ -3,7 +3,7 @@
     <div class="main-header">
       <div class="header-top">
         <div class="middle">
-          <ion-label class="title">{{wsChatMethodsService.getGroupRoom(roomId).name}}</ion-label>
+          <ion-label class="title">{{groupNameFormart }}</ion-label>
         </div>
         <div class="right">
           <button title="Menu" class="btn-no-color" (click)="openGroupMessagesOptions()">

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -102,6 +102,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
   audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
   sessionStore = SessionStore
+  groupNameFormart = "";
 
   constructor(
     public wsChatMethodsService: WsChatMethodsService,
@@ -131,6 +132,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     private fileOpener: FileOpener,
 
 
+
   ) {
     
     this.loggedUserChat = authService.ValidatedUserChat['data'];
@@ -148,6 +150,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     // 
     this.wsChatMethodsService.openRoom(this.roomId)
     this.wsChatMethodsService.getGroupRoom(this.roomId).scrollDown = this.scrollToBottomClicked
+    this.groupNameFormart = this.wsChatMethodsService.getGroupRoom(this.roomId).name.split('-').join(' ') 
+
+
 
     this.showAvatar = false
 

src/app/shared/chat/messages/messages.page.html

@@ -213,7 +213,15 @@
   </div>
   <div class="width-100 pl-20 pr-20">
     <span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
-    <audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
+    <div class=" audioDiv d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded">
+    <!-- <button class="audioButtonPlay" fill="clear" (click)="start(audioRecorded)" *ngIf="!isPlaying"> <ion-icon slot="icon-only" name="play"></ion-icon> </button>
+    <button class="audioButtonPlay" fill="clear" (click)="togglePlayer(true)" *ngIf="isPlaying"> <ion-icon slot="icon-only" name="pause"></ion-icon> </button> -->
+    <div (click)="start(audioRecorded)" *ngIf="!isPlaying" > <ion-icon slot="icon-only" name="play"></ion-icon> </div>
+    <div (click)="togglePlayer(isPlaying)" *ngIf="isPlaying"> <ion-icon slot="icon-only" name="pause"></ion-icon> </div>
+    <!-- <label>{{audioDuration}}</label> -->
+    <ion-range #range [(ngModel)]="audioProgress" max="100" (mouseup)="seek()"></ion-range>
+    </div>
+    <!-- <audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio> -->
   </div>
 
   <div class="container width-100 d-flex">

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%;
+}

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)
+  }
+
+
 }
 
 

src/app/shared/gabinete-digital/edit-event-to-approve/edit-event.page.html

@@ -131,10 +131,6 @@
                 <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
               </div>
               <div class="ion-input-class width-100">
-<<<<<<< HEAD
-=======
-
->>>>>>> secrete-group
 
                 <mat-form-field appearance="none"
                 class="width-100 date-hour-picker">