some changes

2026-04-19 13:02:56 +00:00 · 2023-11-10 15:37:12 +01:00
parent d864c70b9f
commit 28432cc874
10 changed files with 382 additions and 240 deletions
@@ -27,6 +27,8 @@ import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { CapacitorVideoPlayer } from 'capacitor-video-player';
 import { CaptureError, CaptureImageOptions, MediaCapture, MediaFile } from '@awesome-cordova-plugins/media-capture/ngx';
 import { Capacitor } from '@capacitor/core';
+import { File } from '@ionic-native/file/ngx';
+import { Media } from '@ionic-native/media/ngx';

 const config = {
  quality: 0.5,
@@ -207,48 +209,47 @@ export class NewPublicationPage implements OnInit {
      let options: CaptureImageOptions = { limit: 1 }
      const data = await this.mediaCapture.captureVideo(options)
      this.video = data[0];
-  /*     console.log(this.video)
-      if (result && result.length > 0) {
-        const videoFile = result[0];
-        const copiedVideoPath = await this.copyVideoToDataDirectory(videoFile);
-  
-        if (copiedVideoPath) {
-          const base64Video = await this.convertVideoToBase64(copiedVideoPath);
-          console.log(base64Video);
-        }
-      } */
+      console.log(data)
+      const originalFilePath = 'file:///storage/emulated/0/DCIM/Camera/20231110_125118.mp4';
+      const mediaFile = new Media();
+      mediaFile.create(data[0].fullPath)
+      console.log(mediaFile)
+      this.mediaFileToBase64(data[0])
+        .then((base64Data) => {
+          console.log('Base64 data:', base64Data);
+          // Now you can use the base64 data as needed
+        })
+        .catch((error) => {
+          console.error('Error converting to base64:', error);
+          // Handle errors
+        });


-
-      /* this.convertVideoToBase64(data[0].fullPath) */
-      /* this.fileType = "video/mp4"
-      await Filesystem.writeFile({
-        path: data[0].name,
-        data: data[0].fullPath,
-        directory: FilesystemDirectory.Data,
-      }).then(async (dir) => {
-        console.log('DIR ', dir)
-        const base64Video = await this.convertVideoToBase64(dir.uri); */
-        let resultUrl = decodeURIComponent('documents://' + data[0].fullPath);
-        Filesystem.readFile({ path: resultUrl, encoding: Encoding.UTF8, })
-
-          .then(async (content) => {
-            console.log(JSON.stringify(content))
-            const base64Data = btoa(content.data);
-
-            console.log(base64Data);
-             this.filecontent = true;
-            this.capturedVideo = "data:video/mp4;base64," + content.data;
-            this.photoOrVideo = false;
-          })
-          .catch((err) => console.error(err));
-     /*  }); */
-
    } catch (error) {
      console.log('record video error: ', error)
    }
  }

+  mediaFileToBase64(mediaFile) {
+    return new Promise((resolve, reject) => {
+      // Create a FileReader
+      const reader = new FileReader();
+
+      // Set the callback for when the file is loaded
+      reader.onloadend = () => {
+        resolve(reader.result);
+      };
+
+      // Set the callback for errors
+      reader.onerror = (error) => {
+        reject(error);
+      };
+
+      // Read the file as Data URL (base64)
+      reader.readAsDataURL(mediaFile);
+    });
+  }
+


  async loadVideo() {
@@ -588,25 +589,25 @@ export class NewPublicationPage implements OnInit {
    })
  }

- 
+
  async copyVideoToDataDirectory(videoFile: any): Promise<string | null> {
    try {
      const { uri } = videoFile;
      const fileName = uri.substring(uri.lastIndexOf('/') + 1);
      const targetPath = Directory.Data + fileName; // Set your target directory path
-  
+
      await Filesystem.copy({
        from: uri,
        to: targetPath,
      });
-  
+
      return targetPath;
    } catch (error) {
      console.error(error);
      return null;
    }
  }
-  
+
  async convertVideoToBase64(videoPath: string): Promise<string | null> {
    try {
      const file = await Filesystem.readFile({ path: videoPath, directory: FilesystemDirectory.Data });
@@ -620,6 +621,34 @@ export class NewPublicationPage implements OnInit {
      return null;
    }
  }
-  
+
+  async copyAndReadFile(filePath: string): Promise<string> {
+    try {
+      // Copy the file to the app's data directory
+      const copyResult = await Filesystem.copy({
+        from: filePath,
+        to: '20231110_125118.mp4', // or any desired name
+        directory: Directory.Data,
+      });
+
+      const copiedFilePath = copyResult.uri; // Use 'uri' instead of 'to'
+
+      // Read the copied file as base64
+      const readResult = await Filesystem.readFile({
+        path: copiedFilePath,
+        directory: Directory.Data,
+        encoding: Encoding.UTF8,
+      });
+
+      const base64Data = readResult.data;
+      console.log('Base64 data:', base64Data);
+
+      return base64Data;
+    } catch (error) {
+      console.error('Error copying/reading file:', error);
+      throw error;
+    }
+  }
+

 }
@@ -43,12 +43,11 @@

      <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
        <ion-card-content>
-          <div class="post-img" >
-            <img *ngIf="publication.FileExtension == 'jpeg'" (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" [lazyLoad]="publication.FileBase64">
+          <div (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" class="post-img" >
+            <img *ngIf="publication.FileExtension != 'mp4'" [lazyLoad]="publication.FileBase64">

-            <video *ngIf="publication.FileExtension == 'mp4'" playsinline controls
-              preload="auto">
-              <source [src]="'data:video/mp4;base64,'+publication.FileBase6" type="video/mp4">
+            <video *ngIf="publication.FileExtension == 'mp4'"  controls="controls" preload="metadata"  webkit-playsinline="webkit-playsinline">
+              <source src="{{publication.FileBase64}}" type="video/mp4">
            </video>

          </div>
@@ -36,13 +36,21 @@
  

  <!-- Captured -->
-  <div class="ion-item-container-no-border" *ngIf="capturedImage">
+  <div class="ion-item-container-no-border" *ngIf="captureContent">
    <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)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage"></ion-img>
+        <ion-thumbnail *ngIf="fileType == 'image'" slot="start">
+          <ion-img [(ngModel)]="captureContent" name="image" ngDefaultControl [src]="captureContent"></ion-img>
        </ion-thumbnail>
+
+        <ion-thumbnail slot="start">
+          <video *ngIf="fileType == 'video'" width="70" height="70" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
+            <source type="video/mp4" [src]="captureContent">
+          </video>
+        </ion-thumbnail>
+
+        
  
        <ion-label class="pl-10">
          <p>{{capturedImageTitle}}</p>
@@ -57,28 +65,31 @@


  <!-- Current -->
-  <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 *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>
-      <button class="btn-no-color" (click)="deletePublicationImage()" >
-        <ion-icon name="close"></ion-icon>
-      </button>
    </div>
  </div>
  
+  

  <div class="ion-item-container-no-border hide-desktop">
-    <ion-label (click)="takePicture()">
+    <ion-label (click)="loadVideo()">
      <div class="attach-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>
@@ -90,7 +101,7 @@
  </div>

  <div class="ion-item-container-no-border">
-    <ion-label (click)="laodPicture()" class="cursor-pointer">
+    <ion-label (click)="loadVideo()" class="cursor-pointer">
      <div class="attach-icon">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
@@ -34,8 +34,9 @@
    <div class="post-item px-20">
      <div (click)="openPreview(publication)" class="post-img">
        <img *ngIf="publication.FileExtension == 'jpeg'" src="{{publication.FileBase64}}" alt="image" tappable>
-        <video *ngIf="publication.FileExtension == 'mp4'" controls>
-          <source type="video/mp4" src="data:video/mp4;{{publication.FileBase64}}">
+       
+        <video *ngIf="publication.FileExtension == 'mp4'" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
+          <source type="video/mp4" [src]="publication.FileBase64">
        </video>
      </div>
      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
@@ -39,9 +39,17 @@

    <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
      <ion-card-content>
-        <div  class="post-img cursor-pointer" (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
+        <div *ngIf="publication.FileExtension != 'mp4'"  class="post-img cursor-pointer" (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
          <img [lazyLoad]="publication.FileBase64">
        </div>
+
+        <div *ngIf="publication.FileExtension == 'mp4'"  class="post-img  cursor-pointer" (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
+          <video controls="controls" preload="metadata"  webkit-playsinline="webkit-playsinline" class="videoPlayer">
+            <source [src]="publication.FileBase64" type="video/mp4" />
+           </video>
+        </div>
+
+
        <div class="post-content">
          <div class="post-title-time">
            <div class="post-title">
@@ -47,6 +47,19 @@
  .div-logo img{
    width: 100%;
  }
+
+  .video-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
  .div-profile{
    font-size: rem(45);
    float: right;