record video on diferente divice solved

android/app/src/main/AndroidManifest.xml

@@ -19,7 +19,8 @@
     android:roundIcon="@mipmap/ic_launcher_round"
     android:supportsRtl="true"
     android:theme="@style/AppTheme"
-    android:usesCleartextTraffic="true">
+    android:usesCleartextTraffic="true"
+    android:requestLegacyExternalStorage="true">
 
     <activity
       android:name=".MainActivity"

src/app/shared/publication/new-publication/new-publication.page.html

@@ -100,41 +100,26 @@
     </div>
 
 
-    <!-- Current -->
-  <!--   <div *ngIf="!captureContent">
-      <div class="ion-item-container-no-border mb-20"
-        *ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
-         <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label>
-        <div class="d-flex justify-content-between">
-          <div class="d-flex">
-            <ion-thumbnail slot="start">
-              <ion-img [(ngModel)]="publication.FileBase64" name="image" ngDefaultControl
-                [src]="publication.FileBase64"></ion-img>
-            </ion-thumbnail>
 
-            <ion-label class="pl-10">
-              <p>{{publication.OriginalFileName}}.{{publication.FileExtension}}</p>
-              <p hidden>size</p>
-            </ion-label>
-          </div>
-          <button class="btn-no-color" (click)="deletePublicationImage()">
-            <ion-icon name="close"></ion-icon>
-          </button>
-        </div>
-      </div>
-    </div> -->
 
-    <div class="hide-desktop">
-      <ion-label (click)="loadVideo()">
+    <div style="display: flex;">
+      <div (click)="chossePhotoOrVideo()">
         <div class="attach-icon">
-          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
+            src="assets/images/icons-add-photo.svg"></ion-icon>
           <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
             src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
+
         </div>
-        <div class="attach-document cursor-pointer">
-          <ion-label>Tirar Fotografia</ion-label>
+        <div class="attach-document">
+          <ion-label>Câmera</ion-label>
         </div>
-      </ion-label>
+      </div>
+    </div>
+   
+    <div *ngIf="photoOrVideo" class="container-multiselect pt-10" style="width: 200px;">
+      <button id="container-multiselect" class="multiselect-button" (click)="takePicture()">Fotografia</button>
+      <button id="container-multiselect" class="multiselect-button" (click)="startVideoRecording()">Video</button>
     </div>
 
     <div >
@@ -145,7 +130,7 @@
             src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
         </div>
         <div class="attach-document cursor-pointer">
-          <ion-label>Anexar Fotografia</ion-label>
+          <ion-label>Galeria</ion-label>
         </div>
       </ion-label>
     </div>

src/app/shared/publication/new-publication/new-publication.page.scss

@@ -156,6 +156,10 @@ font-size: rem(25);
   display: block;
 }
 
+.container-multiselect {
+  display: grid;
+}
+
 
 
 

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -16,6 +16,9 @@ import { LakefsRepositoryService } from '../../repository/lakefs/lakefs-reposito
 import { ok, err, Result } from 'neverthrow';
 import { SocketConnectionMCRService } from "src/app/services/socket-connection-mcr.service"
 import { CMAPIService } from "src/app/shared/repository/CMAPI/cmapi.service";
+import { CaptureError, CaptureImageOptions, MediaCapture, MediaFile } from '@awesome-cordova-plugins/media-capture/ngx';
+import { Filesystem, Directory, Encoding, FilesystemDirectory } from '@capacitor/filesystem';
+import { Platform } from '@ionic/angular';
 
 enum ActionType {
   newRapid = "1",
@@ -60,6 +63,8 @@ export class NewPublicationPage implements OnInit {
   seletedContent: PublicationAttachmentEntity[] = []
   displayLimit = 4;
   filesSizeSum = 0;
+  photoOrVideo: boolean = false;
+  video: any;
 
 
   publicationFormMV = new PublicationFormMV()
@@ -76,7 +81,10 @@ export class NewPublicationPage implements OnInit {
     private MiddlewareServiceService: MiddlewareServiceService,
     private LakefsRepositoryService: LakefsRepositoryService,
     private SocketConnectionMCRService: SocketConnectionMCRService,
-    private CMAPIService: CMAPIService
+    private CMAPIService: CMAPIService,
+    private mediaCapture: MediaCapture,
+    private httpErrorHandle: HttpErrorHandle,
+    private platform: Platform,
   ) {
     this.publicationTitle = 'Nova Publicação';
 
@@ -173,6 +181,7 @@ export class NewPublicationPage implements OnInit {
       800, // maxHeight
       0.9  // quality
     ).then((picture) => {
+      this.photoOrVideo = false;
       let fileObject = {
         FileBase64: picture,
         FileExtension: this.removeTextBeforeSlash('jpeg', '/')
@@ -246,10 +255,14 @@ export class NewPublicationPage implements OnInit {
         multiple: true,
       });
 
+      console.log(result)
 
     result.files.forEach(async blobFile => {
+      console.log(blobFile)
       if (this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') {
+        console.log()
         this.convertBlobToBase64(blobFile.blob).then((value) => {
+
           this.filesSizeSum = this.filesSizeSum + blobFile.size
           if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
 
@@ -269,6 +282,7 @@ export class NewPublicationPage implements OnInit {
             newAttachment.needUpload()
 
             this.seletedContent.push(newAttachment)
+            console.log(this.seletedContent)
             this.filecontent = true;
           } else {
             if (this.seletedContent.length === 0)
@@ -529,6 +543,7 @@ export class NewPublicationPage implements OnInit {
   }
 
   convertBlobToBase64(blob: Blob) {
+    console.log('Convert blob ',blob)
     return new Promise((resolve, reject) => {
       const reader = new FileReader;
       reader.onerror = reject;
@@ -890,6 +905,58 @@ export class NewPublicationPage implements OnInit {
     this.publicationFormMV.uploadVideosFiles()
 
   }
+
+  chossePhotoOrVideo() {
+    this.photoOrVideo = !this.photoOrVideo
+  }
+
+  async startVideoRecording() {
+    try {
+      let options: CaptureImageOptions = { limit: 1 }
+      const data: any = await this.mediaCapture.captureVideo(options)
+      this.video = data[0];
+      console.log(data)
+      data.forEach(async element => {
+        this.filesSizeSum = this.filesSizeSum + element.size
+        if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
+          const savedFile = await Filesystem.copy({
+            from: element.fullPath,  // directory prop removed, Capacitor parses filename for us
+            to: "video.mp4",
+            toDirectory: FilesystemDirectory.Data
+          });
+          console.log(savedFile.uri)
+          Filesystem.readFile({ path: savedFile.uri })
+
+            .then(async (content) => {
+              this.filecontent = true;
+              let fileObject = new PublicationAttachmentEntity({
+                base64: content.data,
+                extension: 'mp4',
+                OriginalFileName: 'record',
+                FileType: 'video'
+
+              }
+              )
+              this.seletedContent.push(fileObject)
+            })
+            .catch((err) => console.error(err));
+        } else {
+          if (this.seletedContent.length === 0)
+            this.filesSizeSum = 0
+
+          this.httpErrorHandle.validationMessagge('filessize')
+        }
+
+      });
+    } catch (error) {
+      console.log('record video error: ', error)
+    }
+  }
+
+  checkTableDivice() {
+    if (!this.platform.is('desktop'))
+      return true;
+  }
 }
 
 // class UploadFileUseCase {
@@ -1234,4 +1301,7 @@ class ChucksManager {
   setResponse(index, UploadResponse) {
     this.uploads[index] = UploadResponse
   }
+
 }
+
+

src/environments/environment.prod.ts

@@ -4,4 +4,4 @@ import { doneITProd } from './suport/doneIt'
 import { DevDev } from './suport/dev'
 
 
-export const environment: Environment = DevDev;
+export const environment: Environment = oaprProd;