swiper component added to web

This commit is contained in:
Eudes Inácio
2024-05-17 15:27:02 +01:00
parent ceaa283aef
commit 53bdb15b2c
8 changed files with 109 additions and 8 deletions
+47
View File
@@ -51,6 +51,8 @@
"@capacitor/storage": "^1.2.5",
"@capawesome/capacitor-file-picker": "^5.3.0",
"@capawesome/capacitor-screen-orientation": "^5.0.1",
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -4329,6 +4331,33 @@
"node": ">=10.0.0"
}
},
"node_modules/@ffmpeg/ffmpeg": {
"version": "0.12.10",
"resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz",
"integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==",
"dependencies": {
"@ffmpeg/types": "^0.12.2"
},
"engines": {
"node": ">=18.x"
}
},
"node_modules/@ffmpeg/types": {
"version": "0.12.2",
"resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz",
"integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==",
"engines": {
"node": ">=16.x"
}
},
"node_modules/@ffmpeg/util": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz",
"integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ==",
"engines": {
"node": ">=18.x"
}
},
"node_modules/@firebase/analytics": {
"version": "0.6.18",
"resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz",
@@ -46791,6 +46820,24 @@
"integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
"dev": true
},
"@ffmpeg/ffmpeg": {
"version": "0.12.10",
"resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz",
"integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==",
"requires": {
"@ffmpeg/types": "^0.12.2"
}
},
"@ffmpeg/types": {
"version": "0.12.2",
"resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz",
"integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA=="
},
"@ffmpeg/util": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz",
"integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ=="
},
"@firebase/analytics": {
"version": "0.6.18",
"resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz",
+2
View File
@@ -67,6 +67,8 @@
"@capacitor/storage": "^1.2.5",
"@capawesome/capacitor-file-picker": "^5.3.0",
"@capawesome/capacitor-screen-orientation": "^5.0.1",
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
+2
View File
@@ -29,6 +29,7 @@ import { Network } from '@ionic-native/network/ngx';
import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx';
import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx';
import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
import { FFmpeg } from '@ffmpeg/ffmpeg';
@@ -218,6 +219,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
FileOpener,
DocumentViewer,
FFMpeg,
FFmpeg,
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptorService, multi: true },
chatTokenInterceptor,
tokenInterceptor,
@@ -164,6 +164,7 @@ video {
}
.post-content {
margin: 0 auto;
margin-top: 20px;
margin-bottom: 35px;
}
.post-title-time {
+51 -5
View File
@@ -1,5 +1,7 @@
import { Injectable } from '@angular/core';
import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';
@Injectable({
providedIn: 'root'
@@ -7,15 +9,59 @@ import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
export class VideoconvertService {
constructor(
private ffmpeg: FFMpeg
private ffmpeg: FFMpeg,
private ffmpegWeb: FFmpeg
) { }
async convertVideo(inputPath, outputPath,filename, formart) {
const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`;
async convertVideo(inputPath, outputPath, filename, formart) {
try {
const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`;
const result = await this.ffmpeg.exec(ffmpegCommand)
const result = await this.ffmpeg.exec(ffmpegCommand)
console.log('Convert returns ', `${outputPath}${filename}.${formart}`);
console.log('Convert returns ', `${outputPath}${filename}.${formart}`);
} catch (error) {
console.error('Error during conversion:', error);
throw error; // Re-throwing the error for handling in the component
}
}
async convertVideoWeb(inputPath, outputPath, filename, format) {
try {
console.log('Conversion started...');
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
const coreURL = await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript');
const wasmURL = await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm');
await this.ffmpegWeb.load();
const inputType = inputPath.type.split('/').pop();
console.log(inputType)
await this.ffmpegWeb.writeFile(`input.${inputType}`, await fetchFile(inputPath));
await this.ffmpegWeb.exec(['-i', `input.${inputType}`, 'output.mp4']);
const outputData: any = await this.ffmpegWeb.readFile('output.mp4');
const outputBlob = new Blob([outputData.buffer], { type: 'video/mp4' });
const outputFile = new File([outputBlob], `${filename}.mp4`, { type: 'video/mp4' });
console.log('Conversion completed.');
return outputFile;
} catch (error) {
console.error('Error during conversion:', error);
throw error;
}
}
removeTextBeforeSlash(inputString, mark) {
if (inputString.includes(mark)) {
const parts = inputString.split(mark);
return parts.length > 1 ? parts[1] : inputString;
} else {
return inputString;
}
}
}
@@ -248,6 +248,9 @@ export class NewPublicationPage implements OnInit {
console.log(erro)
})
} else if (this.checkFileType.checkFileType(blobFile.mimeType) == 'video'){
let convertedVideo = await this.videoconvertService.convertVideoWeb(blobFile.blob,"src/assets/videos/","output",'mp4')
this.convertBlobToBase64(blobFile.blob).then((value: string) => {
this.filesSizeSum = this.filesSizeSum + blobFile.size
@@ -259,7 +262,7 @@ export class NewPublicationPage implements OnInit {
const newAttachment = new PublicationAttachmentEntity(
{
base64: this.removeTextBeforeSlash(value, ','),
extension: FileExtension,
extension: 'mp4',
blobFile: file,
FileType: this.checkFileType.checkFileType(FileExtension) as any,
OriginalFileName: 'load video'
+1 -1
View File
@@ -5,7 +5,7 @@
</ion-header> -->
<ion-content>
<swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation">
<swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation" autoHeight="true">
<swiper-slide *ngFor="let files of publicationList.Files let k = index">
<div >
<img *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
+1 -1
View File
@@ -4,4 +4,4 @@ import { environment as oaprProd } from './suport/oapr'
import { DevDev } from './suport/dev'
export const environment: Environment = DevDev;
export const environment: Environment = oaprProd;