diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7d7543e7e..93b13e5f5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,5 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; import { UsertoolbarComponent } from './components/usertoolbar/usertoolbar.component'; import { EditionComponent } from './components/edition/edition.component'; @@ -41,28 +40,28 @@ import { GridFormatManagementComponent } from './components/grid-format-manageme import { PictogramStyleComponent } from './components/pictogram-style/pictogram-style.component'; import { DwellCursorComponent } from './components/dwell-cursor/dwell-cursor.component'; import { MainComponent } from './components/main/main.component'; -import { MatAutocompleteModule } from "@angular/material/autocomplete"; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { UserPageComponent } from './components/user-page/user-page.component'; -import { MatCardModule } from "@angular/material/card"; -import { MatGridListModule } from "@angular/material/grid-list"; +import { MatCardModule } from '@angular/material/card'; +import { MatGridListModule } from '@angular/material/grid-list'; import { DialogDeleteUserComponent } from './components/dialog-delete-user/dialog-delete-user.component'; import { DialogChangeUserComponent } from './components/dialog-change-user/dialog-change-user.component'; import { DialogAddUserComponent } from './components/dialog-add-user/dialog-add-user.component'; import { DialogTextComponent } from './components/dialog-text/dialog-text.component'; -import { MatInputModule } from "@angular/material/input"; +import { MatInputModule } from '@angular/material/input'; import { MentionComponent } from './components/mention/mention.component'; import { DeletePageComponent } from './components/delete-page/delete-page.component'; import { MatListModule } from '@angular/material/list'; import { DialogDeletePageComponent } from './components/dialog-delete-page/dialog-delete-page.component'; import { MatButtonModule } from '@angular/material/button'; -import { MatDialogModule } from "@angular/material/dialog"; -import { MatMenuModule } from "@angular/material/menu"; -import { MatFormFieldModule } from "@angular/material/form-field"; -import { MatSelectModule } from "@angular/material/select"; -import { MatCheckboxModule } from "@angular/material/checkbox"; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { Spb2augComponent } from './components/spb2aug/spb2aug.component'; import { DialogHelpComponent } from './components/dialog-help/dialog-help.component'; -import { MatIconModule } from "@angular/material/icon"; +import { MatIconModule } from '@angular/material/icon'; import { ResetConfigurationComponent } from './components/reset-configuration/reset-configuration.component'; import { ResetGridComponent } from './components/reset-grid/reset-grid.component'; import { DialogResetGridComponent } from './components/dialog-reset-grid/dialog-reset-grid.component'; @@ -76,7 +75,7 @@ import { DialogLinkAFSRComponent } from './components/dialog-link-afsr/dialog-li import { DialogLinkInteraactionboxComponent } from './components/dialog-link-interaactionbox/dialog-link-interaactionbox.component'; import { LoadingUserComponent } from './components/loading-user/loading-user.component'; import { DialogResetSettingsComponent } from './components/dialog-reset-settings/dialog-reset-settings.component'; -import { LifeCompanion2augComponent } from "./components/life-companion2aug/life-companion2aug.component"; +import { LifeCompanion2augComponent } from './components/life-companion2aug/life-companion2aug.component'; import { ModelGridComponent } from './components/model-grid/model-grid.component'; import { DialogModelGridComponent } from './components/dialog-model-grid/dialog-model-grid.component'; import { DialogExportPagesComponent } from './components/dialog-export-pages/dialog-export-pages.component'; diff --git a/src/app/components/alternative-forms/alternative-forms.component.spec.ts b/src/app/components/alternative-forms/alternative-forms.component.spec.ts index d0dbcd7ee..cf4263fc1 100644 --- a/src/app/components/alternative-forms/alternative-forms.component.spec.ts +++ b/src/app/components/alternative-forms/alternative-forms.component.spec.ts @@ -27,7 +27,9 @@ function createElement(component: any, id: any, numberOfElementForms: number) { DisplayedText: id + i, VoiceText: id + i, LexicInfos: [], - ImageID: id + i + ImageID: id + i, + AudioID: id + i, + VideoID: id + i }); } component.editionService.selectedElements.push( diff --git a/src/app/components/alternative-forms/alternative-forms.component.ts b/src/app/components/alternative-forms/alternative-forms.component.ts index 05842ff6d..69614c008 100644 --- a/src/app/components/alternative-forms/alternative-forms.component.ts +++ b/src/app/components/alternative-forms/alternative-forms.component.ts @@ -35,6 +35,7 @@ export class AlternativeFormsComponent implements OnInit { } imageList = []; + AudioList = []; elementFormNameImageURL: any = ''; elementFormDisplayedWordField = ''; elementFormPronouncedWordField = ''; @@ -289,7 +290,7 @@ export class AlternativeFormsComponent implements OnInit { } /** - * Shows the image corresponding to a combination of selected library (mulberry or arasaac) and searched word (any) + * Shows the image corresponding to a combination of selected library (mulberry or arasaac) and searched word (any) * @param elt library to be used and word to be searched */ previewLibrary(elt: { lib, word }) { @@ -313,7 +314,7 @@ export class AlternativeFormsComponent implements OnInit { } /** - * + * * @param elt library to be used and word to be searched * @returns an url corresponding to the searched image's name in the selected library */ diff --git a/src/app/components/dialog-add-grid/dialog-add-grid.component.ts b/src/app/components/dialog-add-grid/dialog-add-grid.component.ts index cf0514933..b937aded4 100644 --- a/src/app/components/dialog-add-grid/dialog-add-grid.component.ts +++ b/src/app/components/dialog-add-grid/dialog-add-grid.component.ts @@ -27,7 +27,7 @@ export class DialogAddGridComponent implements OnInit { } /** - * Creates a new grid corresponding to selected options (name and type). + * Creates a new grid corresponding to selected options (name and type). * If a grid already exists with the same name, not grid will be created and an error will be shown. * @param newGrid Grid to be checked if already exists */ @@ -45,7 +45,7 @@ export class DialogAddGridComponent implements OnInit { page.ElementIDsList = []; page.NumberOfCols = 0; page.NumberOfRows = 0; - this.boardService.board = new Grid(this.nameGrid, 'Grid', 6, 6, [], [], [page]); + this.boardService.board = new Grid(this.nameGrid, 'Grid', 6, 6, [], [], [page], [], []); } this.boardService.board.software = 'Augcom'; this.boardService.board.ID = this.nameGrid; diff --git a/src/app/components/dialog-export-pages/dialog-export-pages.component.ts b/src/app/components/dialog-export-pages/dialog-export-pages.component.ts index e9ad3843d..ca833f0ff 100644 --- a/src/app/components/dialog-export-pages/dialog-export-pages.component.ts +++ b/src/app/components/dialog-export-pages/dialog-export-pages.component.ts @@ -43,10 +43,10 @@ export class DialogExportPagesComponent implements OnInit { }) let exportedGrid: Grid; if (this.pageToExport.NumberOfRows !== undefined && this.pageToExport.NumberOfCols !== undefined) { - exportedGrid = new Grid('exportedPage', 'Grid', Number(this.pageToExport.NumberOfCols), Number(this.pageToExport.NumberOfRows), this.gridElementOfPage, this.imageListOfPage, [this.pageToExport]); + exportedGrid = new Grid('exportedPage', 'Grid', Number(this.pageToExport.NumberOfCols), Number(this.pageToExport.NumberOfRows), this.gridElementOfPage, this.imageListOfPage, [this.pageToExport], [], []); } else { - exportedGrid = new Grid('exportedPage', 'Grid', 10, 10, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList); + exportedGrid = new Grid('exportedPage', 'Grid', 10, 10, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList, [],[]); } this.downloadFile(JSON.stringify(exportedGrid)); } diff --git a/src/app/components/dialog-model-grid/dialog-model-grid.component.ts b/src/app/components/dialog-model-grid/dialog-model-grid.component.ts index 9a87b93ec..70bb9e3dc 100644 --- a/src/app/components/dialog-model-grid/dialog-model-grid.component.ts +++ b/src/app/components/dialog-model-grid/dialog-model-grid.component.ts @@ -25,11 +25,11 @@ export class DialogModelGridComponent implements OnInit { if (this.boardService.gridModel === 'default') { this.indexDbAccessService.loadDefaultGrid(); } else if (this.boardService.gridModel === 'empty') { - let page = new Page(); + const page = new Page(); page.ID = '#HOME'; page.Name = 'Accueil'; page.ElementIDsList = []; - this.boardService.board = new Grid('newGrid', 'Grid', 6, 6, [], [], [page]); + this.boardService.board = new Grid('newGrid', 'Grid', 6, 6, [], [], [page], [], []); } this.boardService.updateElementList(); } diff --git a/src/app/components/dialog-reset-grid/dialog-reset-grid.component.ts b/src/app/components/dialog-reset-grid/dialog-reset-grid.component.ts index 8ca703f2e..fcde1b557 100644 --- a/src/app/components/dialog-reset-grid/dialog-reset-grid.component.ts +++ b/src/app/components/dialog-reset-grid/dialog-reset-grid.component.ts @@ -28,7 +28,7 @@ export class DialogResetGridComponent implements OnInit { homePage.NumberOfCols = 3; homePage.NumberOfRows = 3; homePage.GapSize = 6; - this.boardService.board = new Grid('nothing', 'Grid', 0, 0, [], [], [homePage]); + this.boardService.board = new Grid('nothing', 'Grid', 0, 0, [], [], [homePage],[], []); this.boardService.updateElementList(); } diff --git a/src/app/components/edition/edition.component.html b/src/app/components/edition/edition.component.html index 008c2d35f..df7af4e11 100644 --- a/src/app/components/edition/edition.component.html +++ b/src/app/components/edition/edition.component.html @@ -11,14 +11,13 @@ 'border-style': 'solid', 'border-color': this.editionService.curentBorderColor}">
+ [style.background-image]="this.sanitizer.bypassSecurityTrustStyle('url(\'' +this.editionService.imageURL+'\')')">
- {{this.editionService.name}} + {{ this.editionService.name }}
-
@@ -27,9 +26,9 @@
+ (click)="this.selectMenu(section)">
- {{this.multilinguism.translate(section)}} + {{ this.multilinguism.translate(section) }}
@@ -40,11 +39,11 @@
- {{this.multilinguism.translate("save")}} + {{ this.multilinguism.translate("save") }}

- {{this.multilinguism.translate("nameEmpty")}} + {{ this.multilinguism.translate("nameEmpty") }}
@@ -67,4 +66,4 @@ -{{this.configuration.VERSION}} \ No newline at end of file +{{ this.configuration.VERSION }} diff --git a/src/app/components/edition/edition.component.spec.ts b/src/app/components/edition/edition.component.spec.ts index 972a774cf..9798b5af4 100644 --- a/src/app/components/edition/edition.component.spec.ts +++ b/src/app/components/edition/edition.component.spec.ts @@ -1,12 +1,12 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { EditionComponent } from './edition.component'; -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { Ng2ImgMaxModule } from 'ng2-img-max'; -import { HttpClientModule } from '@angular/common/http'; -import { Router } from '@angular/router'; -import { Grid, GridElement } from '../../types'; +import {EditionComponent} from './edition.component'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {Ng2ImgMaxModule} from 'ng2-img-max'; +import {HttpClientModule} from '@angular/common/http'; +import {Router} from '@angular/router'; +import {Grid, GridElement} from '../../types'; function newBoard(component: any) { component.boardService.board = new Grid( @@ -24,11 +24,15 @@ function newBoard(component: any) { [{ DisplayedText: 'testBeforeModif', VoiceText: 'testBeforeModif', - LexicInfos: [{ default: true }], - ImageID: '' + LexicInfos: [{default: true}], + ImageID: '', + AudioID: '', + VideoID: '' }], [])], [], + [], + [], [] ); } @@ -45,8 +49,10 @@ function addElementToBoard(component: any) { [{ DisplayedText: 'test2BeforeModif', VoiceText: 'test2BeforeModif', - LexicInfos: [{ default: true }], - ImageID: '' + LexicInfos: [{default: true}], + ImageID: '', + AudioID: '', + VideoID: '' }], [])); } @@ -95,7 +101,7 @@ describe('EditionComponent', () => { fixture = TestBed.createComponent(EditionComponent); component = fixture.componentInstance; fixture.detectChanges(); - component.boardService.board = new Grid('gridId', 'grid', 2, 2, [], [], []); + component.boardService.board = new Grid('gridId', 'grid', 2, 2, [], [], [],[],[]); component.indexedDBacess.loadUsersList(); }); @@ -269,30 +275,30 @@ describe('EditionComponent', () => { component.editionService.colorPicked = 'inside'; component.editionService.selectedPalette = '22 magic colors'; fixture.detectChanges(); - + compiled.querySelector('.color').click(); fixture.detectChanges(); - + compiled.querySelector('.close').click(); fixture.detectChanges(); - + expect(component.editionService.curentColor).toEqual('#800000') }); - - + + it('should change the bordercolor value when a bordercolor is selected', () => { const compiled = fixture.debugElement.nativeElement; clickElementOf(compiled, fixture, '.menu-item-title-container', 'Apparence'); component.editionService.colorPicked = 'border'; component.editionService.selectedPalette = '22 magic colors'; fixture.detectChanges(); - + compiled.querySelector('.color').click(); fixture.detectChanges(); - + compiled.querySelector('.close').click(); fixture.detectChanges(); - + expect(component.editionService.curentBorderColor).toEqual('#800000') }); */ diff --git a/src/app/components/edition/edition.component.ts b/src/app/components/edition/edition.component.ts index ab1e19f4c..1c3d761c4 100644 --- a/src/app/components/edition/edition.component.ts +++ b/src/app/components/edition/edition.component.ts @@ -1,23 +1,23 @@ -import { Component, OnInit } from '@angular/core'; -import { DbnaryService } from '../../services/dbnary.service'; -import { BoardService } from '../../services/board.service'; -import { GeticonService } from '../../services/geticon.service'; -import { DomSanitizer } from '@angular/platform-browser'; -import { FolderGoTo, GridElement, Interaction, Page } from '../../types'; -import { IndexeddbaccessService } from '../../services/indexeddbaccess.service'; -import { Router } from '@angular/router'; -import { PaletteService } from '../../services/palette.service'; -import { EditionService } from '../../services/edition.service'; -import { Ng2ImgMaxService } from 'ng2-img-max'; -import { HttpClient } from '@angular/common/http'; -import { MultilinguismService } from '../../services/multilinguism.service'; -import { FunctionsService } from '../../services/functions.service'; -import { GridElementService } from '../../services/grid-element.service'; -import { LayoutService } from "../../services/layout.service"; -import { ConfigurationService } from "../../services/configuration.service"; - -import { ComponentCanDeactivate } from 'src/app/services/pending-changes-guard.service'; -import { Observable } from 'rxjs'; +import {Component, OnInit} from '@angular/core'; +import {DbnaryService} from '../../services/dbnary.service'; +import {BoardService} from '../../services/board.service'; +import {GeticonService} from '../../services/geticon.service'; +import {DomSanitizer} from '@angular/platform-browser'; +import {FolderGoTo, GridElement, Interaction, Page} from '../../types'; +import {IndexeddbaccessService} from '../../services/indexeddbaccess.service'; +import {Router} from '@angular/router'; +import {PaletteService} from '../../services/palette.service'; +import {EditionService} from '../../services/edition.service'; +import {Ng2ImgMaxService} from 'ng2-img-max'; +import {HttpClient} from '@angular/common/http'; +import {MultilinguismService} from '../../services/multilinguism.service'; +import {FunctionsService} from '../../services/functions.service'; +import {GridElementService} from '../../services/grid-element.service'; +import {LayoutService} from '../../services/layout.service'; +import {ConfigurationService} from '../../services/configuration.service'; + +import {ComponentCanDeactivate} from 'src/app/services/pending-changes-guard.service'; +import {Observable} from 'rxjs'; @Component({ selector: 'app-edition', @@ -26,6 +26,7 @@ import { Observable } from 'rxjs'; providers: [Ng2ImgMaxService, HttpClient] }) export class EditionComponent implements OnInit, ComponentCanDeactivate { + /** * Guard that checks before the user leaves the page, if any unsaved modification has been made * @returns true if (no modification has been made) or if (modifications have been made and the user confirmed his wish to quit), false elsewise @@ -42,18 +43,18 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { } - nameEmpty = false; - initialEditionState; initialdbnaryState; + initialEditionState; + initialdbnaryState; popstateFired = false; constructor(public editionService: EditionService, public paletteService: PaletteService, - public router: Router, public multilinguism: MultilinguismService, - public indexedDBacess: IndexeddbaccessService, public functionsService: FunctionsService, - public sanitizer: DomSanitizer, public getIconService: GeticonService, - public dbnaryService: DbnaryService, public boardService: BoardService, - public gridElementService: GridElementService, public layoutService: LayoutService, - public configuration: ConfigurationService) { + public router: Router, public multilinguism: MultilinguismService, + public indexedDBacess: IndexeddbaccessService, public functionsService: FunctionsService, + public sanitizer: DomSanitizer, public getIconService: GeticonService, + public dbnaryService: DbnaryService, public boardService: BoardService, + public gridElementService: GridElementService, public layoutService: LayoutService, + public configuration: ConfigurationService) { } @@ -89,7 +90,7 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { * Resets all the informations of the edition panel to their initial value */ clear() { - this.editionService.imageTextField = ""; + this.editionService.imageTextField = ''; this.editionService.borderCheck = false; this.editionService.insideCheck = false; this.editionService.name = ''; @@ -168,8 +169,10 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { { DisplayedText: this.editionService.name, VoiceText: this.editionService.name, - LexicInfos: [{ default: true }], - ImageID: elt.ElementFormsList[0].ImageID + LexicInfos: [{default: true}], + ImageID: elt.ElementFormsList[0].ImageID, + AudioID: elt.ElementFormsList[0].AudioID, + VideoID: elt.ElementFormsList[0].VideoID } ); } @@ -211,6 +214,10 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { } else { return new FolderGoTo(this.editionService.pageLink); } + } else if (this.editionService.radioTypeFormat === 'sound') { + return 'sound'; + } else if (this.editionService.radioTypeFormat === 'video') { + return 'video'; } else { return 'button'; } @@ -254,11 +261,35 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { this.boardService.board.ImageList = this.boardService.board.ImageList.filter( img => img.ID !== this.editionService.getDefaultForm(element.ElementFormsList).ImageID); + this.boardService.board.AudioList = this.boardService.board.AudioList.filter( + aud => aud.ID !== this.editionService.getDefaultForm(element.ElementFormsList).AudioID); + + this.boardService.board.VideoList = this.boardService.board.VideoList.filter( + vid => vid.ID !== this.editionService.getDefaultForm(element.ElementFormsList).VideoID); + this.boardService.board.ImageList.push({ ID: this.editionService.getDefaultForm(element.ElementFormsList).ImageID, OriginalName: this.editionService.name, Path: this.editionService.imageURL }); + + + this.boardService.board.AudioList.push( + { + ID: this.editionService.getDefaultForm(element.ElementFormsList).AudioID, + OriginalName: this.editionService.name, + Path: this.editionService.audioURL + } + ); + + this.boardService.board.VideoList.push( + { + ID: this.editionService.getDefaultForm(element.ElementFormsList).VideoID, + OriginalName: this.editionService.name, + Path: this.editionService.videoURL + } + ); + } } @@ -277,8 +308,10 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { { DisplayedText: this.editionService.name, VoiceText: this.editionService.name, - LexicInfos: [{ default: true }], - ImageID: tempId + LexicInfos: [{default: true}], + ImageID: tempId, + AudioID: tempId, + VideoID: tempId } ); @@ -312,6 +345,23 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { Path: this.editionService.imageURL }); + this.boardService.board.AudioList.push( + { + ID: tempId, + OriginalName: this.editionService.name, + Path: this.editionService.audioURL + } + ); + + this.boardService.board.VideoList.push( + { + ID: tempId, + OriginalName: this.editionService.name, + Path: this.editionService.videoURL + } + ); + + const currentPage: Page = this.getCurrentPage(); currentPage.ElementIDsList.push(tempId); } @@ -357,23 +407,55 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { this.editionService.name = this.editionService.getDefaultForm(elementToModif.ElementFormsList).DisplayedText; this.editionService.curentColor = this.gridElementService.getStyle(elementToModif).BackgroundColor; this.editionService.curentBorderColor = this.gridElementService.getStyle(elementToModif).BorderColor; - this.editionService.radioTypeFormat = elementToModif.Type === 'button' ? 'button' : 'folder'; + if (elementToModif.Type === 'button') { + this.editionService.radioTypeFormat = 'button'; + } else if (elementToModif.Type === 'sound') { + this.editionService.radioTypeFormat = 'sound'; + } else if (elementToModif.Type === 'video') { + this.editionService.radioTypeFormat = 'video'; + } else { + this.editionService.radioTypeFormat = 'folder'; + } this.editionService.pageLink = elementToModif.Type === 'button' ? '@' : (elementToModif.Type as FolderGoTo).GoTo; const imageToModif = this.boardService.board.ImageList.find(x => x.ID === elementToModif.ElementFormsList[0].ImageID); - if (imageToModif != null && imageToModif !== undefined) { + if (imageToModif != null) { this.editionService.imageURL = imageToModif.Path; } else { this.editionService.imageURL = ''; } - if (elementToModif.ElementFormsList != null && elementToModif.ElementFormsList !== undefined) { + // Mise à jour de l'URL de l'audio + if (elementToModif.Type === 'sound') { + const audioToModif = this.boardService.board.AudioList.find(x => x.ID === elementToModif.ElementFormsList[0].AudioID); + if (audioToModif != null) { + this.editionService.audioURL = audioToModif.Path; + } else { + this.editionService.audioURL = ''; + } + } else { + this.editionService.videoURL = ''; + } + + // Mise à jour de l'URL de la video + if (elementToModif.Type === 'video') { + const videoToModif = this.boardService.board.VideoList.find(x => x.ID === elementToModif.ElementFormsList[0].VideoID); + if (videoToModif != null) { + this.editionService.videoURL = videoToModif.Path; + } else { + this.editionService.videoURL = ''; + } + } else { + this.editionService.audioURL = ''; + } + + if (elementToModif.ElementFormsList != null) { this.editionService.variantList = Object.assign([], elementToModif.ElementFormsList); } else { this.editionService.variantList = []; } - if (elementToModif.InteractionsList != null && elementToModif.InteractionsList !== undefined) { + if (elementToModif.InteractionsList != null) { this.editionService.interractionList = Object.assign([], elementToModif.InteractionsList); } else { this.editionService.interractionList = []; @@ -411,6 +493,8 @@ export class EditionComponent implements OnInit, ComponentCanDeactivate { && this.initialEditionState.pageLink == this.editionService.pageLink && this.initialEditionState.curentBorderColor == this.editionService.curentBorderColor && this.initialEditionState.imageURL == this.editionService.imageURL + && this.initialEditionState.audioURL == this.editionService.audioURL + && this.initialEditionState.videoURL == this.editionService.videoURL && this.initialEditionState.variantList == this.editionService.variantList && this.initialdbnaryState.wordList == this.dbnaryService.wordList && this.initialdbnaryState.typeList == this.dbnaryService.typeList); diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html index 969e34141..59da005e3 100644 --- a/src/app/components/event/event.component.html +++ b/src/app/components/event/event.component.html @@ -2,7 +2,7 @@
- {{this.multilinguism.translate("modifyInteractions")}}: + {{ this.multilinguism.translate("modifyInteractions") }}:
@@ -10,38 +10,55 @@
- {{this.multilinguism.translate(this.getLabel(inter.ID))}} + {{ this.multilinguism.translate(this.getLabel(inter.ID)) }}
- +
- + + (click)="inter.ActionList = removeFrom(action,inter.ActionList)">
+ + +
+

{{ multilinguism.translate("addSoundByFile") }}

+

{{ multilinguism.translate("addVideoByFile") }}

+
+ +
+ + +
- \ No newline at end of file + diff --git a/src/app/components/event/event.component.ts b/src/app/components/event/event.component.ts index a2c4b04a7..fe4397b21 100644 --- a/src/app/components/event/event.component.ts +++ b/src/app/components/event/event.component.ts @@ -128,4 +128,52 @@ export class EventComponent implements OnInit, OnDestroy { interaction.plus = false; }); } + + AddAudioByFile(file) { + if (file.length === 0) { + return; + } + const mimeType = file[0].type; + if (mimeType.match(/audio\/*/) == null) { + return; + } + const reader = new FileReader(); + + // Lecture du fichier audio en tant que Data URL + reader.readAsDataURL(file[0]); + + reader.onload = () => { + this.editionService.audioURL = reader.result; + + }; + + // Gestion des erreurs de lecture + reader.onerror = (error) => { + console.error('Erreur lors de la lecture du fichier audio:', error); + }; + } + + AddVideoByFile(file) { + if (file.length === 0) { + return; + } + const mimeType = file[0].type; + if (mimeType.match(/video\/*/) == null) { + return; + } + const reader = new FileReader(); + + // Lecture du fichier video en tant que Data URL + reader.readAsDataURL(file[0]); + + reader.onload = () => { + this.editionService.videoURL = reader.result; + }; + + // Gestion des erreurs de lecture + reader.onerror = (error) => { + console.error('Erreur lors de la lecture du fichier video:', error); + }; + } + } diff --git a/src/app/components/export/export.component.ts b/src/app/components/export/export.component.ts index 65831e1e4..59e06285d 100644 --- a/src/app/components/export/export.component.ts +++ b/src/app/components/export/export.component.ts @@ -111,9 +111,9 @@ export class ExportComponent implements OnInit { this.pageToExportList.push(this.pageToExport); let exportedGrid: Grid; if (this.pageToExport.NumberOfRows !== undefined && this.pageToExport.NumberOfCols !== undefined) { - exportedGrid = new Grid('exportedPage', 'Grid', Number(this.pageToExport.NumberOfCols), Number(this.pageToExport.NumberOfRows), this.gridElementOfPage, this.imageListOfPage, [this.pageToExport]); + exportedGrid = new Grid('exportedPage', 'Grid', Number(this.pageToExport.NumberOfCols), Number(this.pageToExport.NumberOfRows), this.gridElementOfPage, this.imageListOfPage, [this.pageToExport], [], []); } else { - exportedGrid = new Grid('exportedPage', 'Grid', 10, 10, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList); + exportedGrid = new Grid('exportedPage', 'Grid', 10, 10, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList,[],[]); } this.downloadFile(JSON.stringify(exportedGrid)); } @@ -135,9 +135,9 @@ export class ExportComponent implements OnInit { }); let exportedGrid: Grid; if (newPageHomeRow !== undefined && newPageHomeCol !== undefined) { - exportedGrid = new Grid('exportedPage', 'Grid', newPageHomeCol, newPageHomeRow, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList); + exportedGrid = new Grid('exportedPage', 'Grid', newPageHomeCol, newPageHomeRow, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList,[],[]); } else { - exportedGrid = new Grid('exportedPage', 'Grid', this.boardService.board.NumberOfCols, this.boardService.board.NumberOfRows, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList); + exportedGrid = new Grid('exportedPage', 'Grid', this.boardService.board.NumberOfCols, this.boardService.board.NumberOfRows, this.gridElementOfPage, this.imageListOfPage, this.pageToExportList,[],[]); } this.downloadFile(JSON.stringify(exportedGrid)); } @@ -327,7 +327,7 @@ export class ExportComponent implements OnInit { if (this.checkIfIsFolder(elem)) { if (!this.listPageAlreadyVisited.includes(this.goToValue)) { this.listPageAlreadyVisited.push(this.goToValue); - await this.goInFolderExcell(this.goToValue, index + 1); // await the recursive call + await this.goInFolderWord(this.goToValue, index + 1); // await the recursive call } } } diff --git a/src/app/components/generator-grid/generator-grid.component.ts b/src/app/components/generator-grid/generator-grid.component.ts index 990db25d1..7a010a408 100644 --- a/src/app/components/generator-grid/generator-grid.component.ts +++ b/src/app/components/generator-grid/generator-grid.component.ts @@ -33,6 +33,8 @@ export class GeneratorGridComponent implements OnInit { libToUse = 'arasaacNB'; imageList = []; + audioList = []; + videoList = []; imageUrlList = []; addOnlyOneImage; @@ -41,15 +43,15 @@ export class GeneratorGridComponent implements OnInit { errorType = ''; constructor(public configuration: ConfigurationService, - public boardService: BoardService, - public editionService: EditionService, - public functionsService: FunctionsService, - public dbnaryService: DbnaryService, - public router: Router, - public multilinguism: MultilinguismService, - public indexedDBacess: IndexeddbaccessService, - public layoutService: LayoutService, - public voiceRecognition: VoiceRecognitionService) { + public boardService: BoardService, + public editionService: EditionService, + public functionsService: FunctionsService, + public dbnaryService: DbnaryService, + public router: Router, + public multilinguism: MultilinguismService, + public indexedDBacess: IndexeddbaccessService, + public layoutService: LayoutService, + public voiceRecognition: VoiceRecognitionService) { } ngOnInit(): void { @@ -64,7 +66,7 @@ export class GeneratorGridComponent implements OnInit { generatedPage.NumberOfCols = Number(this.nbCols); generatedPage.NumberOfRows = Number(this.nbRows); generatedPage.GapSize = 6; - this.boardService.board = new Grid('nothing', 'Grid', Number(this.nbCols), Number(this.nbRows), [], [], [generatedPage]); + this.boardService.board = new Grid('nothing', 'Grid', Number(this.nbCols), Number(this.nbRows), [], [], [generatedPage], [],[]); this.boardService.board.NumberOfCols = Number(this.nbCols); this.boardService.board.NumberOfRows = Number(this.nbRows); this.boardService.updateElementList(); @@ -114,7 +116,7 @@ export class GeneratorGridComponent implements OnInit { (arasaacJson as unknown as ArasaacObject)[0].wordList.forEach(word => { if (text !== null && text !== '' && word.toLowerCase() === text.toLocaleLowerCase() && !this.addOnlyOneImage) { this.addOnlyOneImage = true; - this.imageList.push({ lib: 'arasaacNB', word: this.cleanString(word) }); + this.imageList.push({lib: 'arasaacNB', word: this.cleanString(word)}); return; } }, this); @@ -122,7 +124,7 @@ export class GeneratorGridComponent implements OnInit { (arasaacColoredJson as unknown as ArasaacObject)[0].wordList.forEach(word => { if (text !== null && text !== '' && word.toLowerCase() === text.toLocaleLowerCase() && !this.addOnlyOneImage) { this.addOnlyOneImage = true; - this.imageList.push({ lib: 'arasaacColor', word: this.cleanString(word) }); + this.imageList.push({lib: 'arasaacColor', word: this.cleanString(word)}); } }, this); } @@ -132,7 +134,7 @@ export class GeneratorGridComponent implements OnInit { if (text !== null && text !== '' && value.symbol.toLowerCase() === text.toLocaleLowerCase() && !this.addOnlyOneImage) { this.addOnlyOneImage = true; const url = value.symbol; - this.imageList.push({ lib: 'mulberry', word: this.cleanString(url) }); + this.imageList.push({lib: 'mulberry', word: this.cleanString(url)}); return; } }, this); @@ -148,7 +150,7 @@ export class GeneratorGridComponent implements OnInit { (arasaacJson as unknown as ArasaacObject)[0].wordList.forEach(word => { if (text !== null && text !== '' && word.toLowerCase().includes(text.toLocaleLowerCase()) && !this.addOnlyOneImage) { this.addOnlyOneImage = true; - this.imageList.push({ lib: 'arasaacNB', word: this.cleanString(word) }); + this.imageList.push({lib: 'arasaacNB', word: this.cleanString(word)}); return; } }, this); @@ -156,7 +158,7 @@ export class GeneratorGridComponent implements OnInit { (arasaacColoredJson as unknown as ArasaacObject)[0].wordList.forEach(word => { if (text !== null && text !== '' && word.toLowerCase().includes(text.toLocaleLowerCase()) && !this.addOnlyOneImage) { this.addOnlyOneImage = true; - this.imageList.push({ lib: 'arasaacColor', word: this.cleanString(word) }); + this.imageList.push({lib: 'arasaacColor', word: this.cleanString(word)}); } }, this); } @@ -165,7 +167,7 @@ export class GeneratorGridComponent implements OnInit { if (text !== null && text !== '' && value.symbol.toLowerCase().includes(text.toLocaleLowerCase()) && !this.addOnlyOneImage) { this.addOnlyOneImage = true; const url = value.symbol; - this.imageList.push({ lib: 'mulberry', word: this.cleanString(url) }); + this.imageList.push({lib: 'mulberry', word: this.cleanString(url)}); return; } }, this); @@ -236,8 +238,10 @@ export class GeneratorGridComponent implements OnInit { { DisplayedText: name, VoiceText: name, - LexicInfos: [{ default: true }], - ImageID: tempId + LexicInfos: [{default: true}], + ImageID: tempId, + AudioID: tempId, + VideoID: tempId } ); @@ -247,8 +251,8 @@ export class GeneratorGridComponent implements OnInit { this.editionService.interractionList.push({ ID: 'click', ActionList: [ - { ID: 'display', Options: [] }, - { ID: 'say', Options: [] } + {ID: 'display', Options: []}, + {ID: 'say', Options: []} ] }); @@ -295,6 +299,10 @@ export class GeneratorGridComponent implements OnInit { } else { return new FolderGoTo(this.editionService.pageLink); } + } else if (this.editionService.radioTypeFormat === 'sound') { + return 'sound'; + } else if (this.editionService.radioTypeFormat === 'video') { + return 'video'; } else { return 'button'; } diff --git a/src/app/components/import-user/import-user.component.ts b/src/app/components/import-user/import-user.component.ts index 1491765bf..0e2d476ea 100644 --- a/src/app/components/import-user/import-user.component.ts +++ b/src/app/components/import-user/import-user.component.ts @@ -66,7 +66,9 @@ export class ImportUserComponent implements OnInit { DisplayedText: element.ElementFormsList[0].DisplayedText, VoiceText: element.ElementFormsList[0].VoiceText, LexicInfos: [{ default: true }], - ImageID: element.ElementFormsList[0].ImageID + ImageID: element.ElementFormsList[0].ImageID, + AudioID: element.ElementFormsList[0].AudioID, + VideoID: element.ElementFormsList[0].VideoID }); } else { console.log('DEFAULT FORM NOT FOUND FOR ' + element.ID); @@ -74,7 +76,9 @@ export class ImportUserComponent implements OnInit { DisplayedText: element.ID, VoiceText: element.ID, LexicInfos: [{ default: true }], - ImageID: element.ID + ImageID: element.ID, + AudioID: element.ID, + VideoID: element.ID }); } } diff --git a/src/app/components/import/import.component.ts b/src/app/components/import/import.component.ts index d2f008557..1664db72c 100644 --- a/src/app/components/import/import.component.ts +++ b/src/app/components/import/import.component.ts @@ -90,6 +90,7 @@ export class ImportComponent implements OnInit { this.boardService.board.PageList = []; this.boardService.board.ElementList = []; this.boardService.board.ImageList = []; + this.boardService.board.AudioList = []; zipFiles.forEach((fileName) => { if (fileName[fileName.length - 1] !== '/') { zipFolder @@ -211,6 +212,8 @@ export class ImportComponent implements OnInit { VoiceText: name, LexicInfos: [{ default: true }], ImageID: theID, + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }] }]) ); @@ -278,7 +281,9 @@ export class ImportComponent implements OnInit { DisplayedText: element.ElementFormsList[0].DisplayedText, VoiceText: element.ElementFormsList[0].VoiceText, LexicInfos: [{ default: true }], - ImageID: element.ElementFormsList[0].ImageID + ImageID: element.ElementFormsList[0].ImageID, + AudioID: element.ElementFormsList[0].AudioID, + VideoID: element.ElementFormsList[0].VideoID }); } else { console.log('DEFAULT FORM NOT FOUND FOR ' + element.ID); @@ -286,14 +291,16 @@ export class ImportComponent implements OnInit { DisplayedText: element.ID, VoiceText: element.ID, LexicInfos: [{ default: true }], - ImageID: element.ID + ImageID: element.ID, + AudioID: element.ID, + VideoID: element.ID }); } } } importPages(zip) { - let importedGrid: Grid = new Grid('newGrid', 'Grid', 0, 0, [], [], []); + let importedGrid: Grid = new Grid('newGrid', 'Grid', 0, 0, [], [], [],[],[]); const zipFolder: JSZip = new JSZip(); let tempBoard; zipFolder.loadAsync(zip[0]).then((zipFiles) => { diff --git a/src/app/components/information-edition-page/information-edition-page.component.html b/src/app/components/information-edition-page/information-edition-page.component.html index cfb4ca437..8e3a6f6fd 100644 --- a/src/app/components/information-edition-page/information-edition-page.component.html +++ b/src/app/components/information-edition-page/information-edition-page.component.html @@ -15,6 +15,16 @@

{{ multilinguism.translate("buttonDescription") }}

+ + +

{{ multilinguism.translate("soundbuttonDescription") }}

+ + + +

{{ multilinguism.translate("videobuttonDescription") }}

+ @@ -27,7 +37,7 @@ - + - \ No newline at end of file + diff --git a/src/app/components/life-companion2aug/life-companion2aug.component.ts b/src/app/components/life-companion2aug/life-companion2aug.component.ts index 46fc58163..3762d9875 100644 --- a/src/app/components/life-companion2aug/life-companion2aug.component.ts +++ b/src/app/components/life-companion2aug/life-companion2aug.component.ts @@ -145,7 +145,7 @@ export class LifeCompanion2augComponent implements OnInit { // get grid information from fileJson and set it in the new grid private newGrid(metadata: any) { - this.grid = new Grid('importedGrid', 'Grid', 6, 6, [], [], []); + this.grid = new Grid('importedGrid', 'Grid', 6, 6, [], [], [], [],[]); let date: Date; const lastDate: Date = new Date(parseInt(metadata.ConfigurationDescription.attr.lastDate)); try { @@ -310,6 +310,8 @@ export class LifeCompanion2augComponent implements OnInit { VoiceText: element.attr.textContent, LexicInfos: [{ default: true }], ImageID: element.attr.imageId2 ? element.attr.imageId2 : '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]); } else { @@ -325,6 +327,8 @@ export class LifeCompanion2augComponent implements OnInit { VoiceText: element.attr.textContent, LexicInfos: [{ default: true }], ImageID: element.attr.imageId2 ? element.attr.imageId2 : '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]); } @@ -680,6 +684,8 @@ export class LifeCompanion2augComponent implements OnInit { VoiceText: treeKeyListElement.attr.text, LexicInfos: [{ default: true }], ImageID: treeKeyListElement.attr.imageId2 ? treeKeyListElement.attr.imageId2 : '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]); } else { @@ -695,6 +701,8 @@ export class LifeCompanion2augComponent implements OnInit { VoiceText: treeKeyListElement.attr.text, LexicInfos: [{ default: true }], ImageID: treeKeyListElement.attr.imageId2 ? treeKeyListElement.attr.imageId2 : '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]); } @@ -747,6 +755,8 @@ export class LifeCompanion2augComponent implements OnInit { VoiceText: '', LexicInfos: [{ default: true }], ImageID: '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]); this.grid.ElementList.push(buttonNextPage); diff --git a/src/app/components/spb2aug/spb2aug.component.ts b/src/app/components/spb2aug/spb2aug.component.ts index df43069a2..a99480457 100644 --- a/src/app/components/spb2aug/spb2aug.component.ts +++ b/src/app/components/spb2aug/spb2aug.component.ts @@ -43,7 +43,7 @@ export class Spb2augComponent implements OnInit { } ngOnInit(): void { - this.newGrid = new Grid('newGrid', 'Grid', 0, 0, [], [], []); + this.newGrid = new Grid('newGrid', 'Grid', 0, 0, [], [], [],[], []); this.newGrid.software = 'Snap Core first' this.page = new Page(); this.page.ID = '#HOME'; @@ -178,6 +178,8 @@ export class Spb2augComponent implements OnInit { VoiceText: (message) !== null ? message : label, LexicInfos: [{ default: true }], ImageID: (label) !== null ? label : message, + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) const pageUniqueIdFromButtonFolder = buttonsFolder.getAsObject().PageUniqueId; @@ -202,6 +204,8 @@ export class Spb2augComponent implements OnInit { VoiceText: (message) !== null ? message : label, LexicInfos: [{ default: true }], ImageID: (label) !== null ? label : message, + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) const pageUniqueIdFromButtonFolder = buttonsFolder.getAsObject().PageUniqueId; @@ -227,6 +231,8 @@ export class Spb2augComponent implements OnInit { VoiceText: (message) !== null ? message : label, LexicInfos: [{ default: true }], ImageID: (label) !== null ? label : message, + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) } @@ -442,6 +448,8 @@ export class Spb2augComponent implements OnInit { VoiceText: '', LexicInfos: [{ default: true }], ImageID: '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) this.gridElement.cols = 1; @@ -474,6 +482,8 @@ export class Spb2augComponent implements OnInit { VoiceText: '', LexicInfos: [{ default: true }], ImageID: '', + AudioID: '', + VideoID: '' } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) this.gridElement.cols = 1; @@ -517,6 +527,8 @@ export class Spb2augComponent implements OnInit { VoiceText: label, LexicInfos: [{ default: true }], ImageID: label, + AudioID: label, + VideoID: label } ], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }, { ID: 'say', Options: [] }] }]) this.gridElement.x = Number(tabResPos[0]); diff --git a/src/app/components/tile/tile.component.css b/src/app/components/tile/tile.component.css index 0629fd3fe..6ec424420 100644 --- a/src/app/components/tile/tile.component.css +++ b/src/app/components/tile/tile.component.css @@ -1,3 +1,38 @@ +.video-popup { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 1000; +} + +.video-popup-content { + background-color: #fff; + padding: 20px; + border-radius: 5px; + max-width: 80%; + max-height: 80%; +} + +.close { + position: absolute; + top: 10px; + right: 20px; + font-size: 50px; + font-weight: bold; + cursor: pointer; +} + +video { + width: 100%; + height: auto; +} + .elementContainer { min-height: 1cm; min-width: 1cm; diff --git a/src/app/components/tile/tile.component.html b/src/app/components/tile/tile.component.html index 796df91e3..28bef3977 100644 --- a/src/app/components/tile/tile.component.html +++ b/src/app/components/tile/tile.component.html @@ -34,6 +34,15 @@ {{this.boardService.getLabel(element)}} +
+
+ × + +
+
+ diff --git a/src/app/components/tile/tile.component.spec.ts b/src/app/components/tile/tile.component.spec.ts index 9e0c05d13..5d881e549 100644 --- a/src/app/components/tile/tile.component.spec.ts +++ b/src/app/components/tile/tile.component.spec.ts @@ -41,7 +41,9 @@ describe('TileComponent', () => { DisplayedText: 'testBeforeModif', VoiceText: 'testBeforeModif', LexicInfos: [{ default: true }], - ImageID: '' + ImageID: '', + AudioID: '', + VideoID: '' }], [{ ID: 'click', ActionList: [{ ID: 'display', Options: [] }] }]); fixture.detectChanges(); diff --git a/src/app/components/tile/tile.component.ts b/src/app/components/tile/tile.component.ts index 974f67143..d8676e089 100644 --- a/src/app/components/tile/tile.component.ts +++ b/src/app/components/tile/tile.component.ts @@ -1,16 +1,16 @@ -import { Component, Input, OnDestroy, OnInit, } from '@angular/core'; -import { HistoricService } from '../../services/historic.service'; -import { EditionService } from '../../services/edition.service'; -import { BoardService } from '../../services/board.service'; -import { ElementForm, FolderGoTo, GridElement, Vignette } from '../../types'; -import { GeticonService } from '../../services/geticon.service'; -import { UsertoolbarService } from '../../services/usertoolbar.service'; -import { Router } from '@angular/router'; -import { SearchService } from '../../services/search.service'; -import { LayoutService } from '../../services/layout.service'; -import { GridElementService } from '../../services/grid-element.service'; -import { DwellCursorService } from '../../services/dwell-cursor.service'; -import { ConfigurationService } from '../../services/configuration.service'; +import {Component, Input, OnDestroy, OnInit, ViewChild, ElementRef} from '@angular/core'; +import {HistoricService} from '../../services/historic.service'; +import {EditionService} from '../../services/edition.service'; +import {BoardService} from '../../services/board.service'; +import {ElementForm, FolderGoTo, GridElement, Vignette} from '../../types'; +import {GeticonService} from '../../services/geticon.service'; +import {UsertoolbarService} from '../../services/usertoolbar.service'; +import {Router} from '@angular/router'; +import {SearchService} from '../../services/search.service'; +import {LayoutService} from '../../services/layout.service'; +import {GridElementService} from '../../services/grid-element.service'; +import {DwellCursorService} from '../../services/dwell-cursor.service'; +import {ConfigurationService} from '../../services/configuration.service'; @Component({ selector: 'app-tile', @@ -26,6 +26,11 @@ export class TileComponent implements OnInit, OnDestroy { dwellTimer; dblClickTimer; + //for videos buttons + @ViewChild('videoPlayer') videoPlayer: ElementRef | undefined; + videoURL = ''; + show = false; + /** * element currently pressed */ @@ -208,6 +213,104 @@ export class TileComponent implements OnInit, OnDestroy { } // for folder + } else if (element.Type === 'sound') { + const prononcedText = this.boardService.getLabel(element); + const color = this.gridElementService.getStyle(element).BackgroundColor; + const borderColor = this.gridElementService.getStyle(element).BorderColor; + const imgUrl = this.boardService.getImgUrl(element); + const vignette: Vignette = { + Label: prononcedText, + ImagePath: imgUrl, + Color: color, + BorderColor: borderColor, + }; + let otherFormsDisplayed = false; + element.InteractionsList.forEach((inter) => { + if (inter.ID === interaction) { + inter.ActionList.forEach((action) => { + if (action.ID === 'pronomChangeInfo') { + this.changePronomInfo(element.ElementFormsList[0]); + } else if (action.ID === 'display') { + this.historicService.push(vignette); + } else if (action.ID === 'say') { + this.historicService.say('' + prononcedText); + } else if (action.ID === 'otherforms' && element.ElementFormsList.length > 1) { + otherFormsDisplayed = true; + this.boardService.activatedElement = this.boardService + .getNormalTempList() + .indexOf(element); + this.boardService.activatedElementTempList(); + this.pressedElement = null; + } else if (action.ID === 'backFromVariant' && !otherFormsDisplayed) { + this.boardService.activatedElement = -1; + } else if (action.ID === 'back') { + this.boardService.backToPreviousFolder(); + } else if (action.ID === 'backHome') { + this.boardService.backHome(); + } else if (action.ID === 'sound') { + const AudioURL = this.boardService.getAudioUrl(element); + if (AudioURL) { + // Création d'un nouvel élément audioAudioURL + const audio = new Audio(AudioURL); + + // Lecture de l'audio + audio.play().then(() => { + }).catch(error => { + console.error('Error playing audio:', error); + }); + } else { + console.error('No audio URL found in editionService'); + } + } + }); + } + }); + } else if (element.Type === 'video') { + const prononcedText = this.boardService.getLabel(element); + const color = this.gridElementService.getStyle(element).BackgroundColor; + const borderColor = this.gridElementService.getStyle(element).BorderColor; + const imgUrl = this.boardService.getImgUrl(element); + const vignette: Vignette = { + Label: prononcedText, + ImagePath: imgUrl, + Color: color, + BorderColor: borderColor, + }; + let otherFormsDisplayed = false; + element.InteractionsList.forEach((inter) => { + if (inter.ID === interaction) { + inter.ActionList.forEach((action) => { + if (action.ID === 'pronomChangeInfo') { + this.changePronomInfo(element.ElementFormsList[0]); + } else if (action.ID === 'display') { + this.historicService.push(vignette); + } else if (action.ID === 'say') { + this.historicService.say('' + prononcedText); + } else if (action.ID === 'otherforms' && element.ElementFormsList.length > 1) { + otherFormsDisplayed = true; + this.boardService.activatedElement = this.boardService + .getNormalTempList() + .indexOf(element); + this.boardService.activatedElementTempList(); + this.pressedElement = null; + } else if (action.ID === 'backFromVariant' && !otherFormsDisplayed) { + this.boardService.activatedElement = -1; + } else if (action.ID === 'back') { + this.boardService.backToPreviousFolder(); + } else if (action.ID === 'backHome') { + this.boardService.backHome(); + } else if (action.ID === 'sound') { + } else if (action.ID === 'video') { + this.videoURL = this.boardService.getVideoUrl(element); + if (this.videoURL !== '') { + this.show = true; + } else { + console.error('No video was found for this button'); + } + } + }); + } + }); } else if ((element.Type as FolderGoTo).GoTo !== undefined) { let pathTab = this.boardService.currentPath.split('.'); if (pathTab.length >= 2) { @@ -242,6 +345,12 @@ export class TileComponent implements OnInit, OnDestroy { this.boardService.updateElementList(); } + // To allow the pop up of the video to be closed + closePopup(): void { + this.show = false; + this.videoURL = ''; + } + /** * Return true if the element is part of the search result * @@ -292,32 +401,34 @@ export class TileComponent implements OnInit, OnDestroy { * @param num, number of the event triggering the action */ pointerUp(element: GridElement, num) { - this.release[num] = false; - this.release[(num + 1) % 2] = false; - this.press[num] = true; - if ( - !this.userToolBarService.edit && - this.press[num] && - !this.press[(num + 1) % 2] - ) { - window.clearTimeout(this.pressTimer); - window.clearTimeout(this.dblClickTimer); - if (this.down === 1) { - if (this.pressedElement === element) { - this.setClickTimer(element); - } else { - this.down = 0; - this.pressedElement = null; - } - } else if (this.down > 1) { - if (this.pressedElement === element) { - this.action(element, 'doubleClick'); - this.pressedElement = null; - this.down = 0; - } else if (this.pressedElement != null) { - this.down = 1; - this.pressedElement = element; - this.setClickTimer(element); + if(!this.show){ + this.release[num] = false; + this.release[(num + 1) % 2] = false; + this.press[num] = true; + if ( + !this.userToolBarService.edit && + this.press[num] && + !this.press[(num + 1) % 2] + ) { + window.clearTimeout(this.pressTimer); + window.clearTimeout(this.dblClickTimer); + if (this.down === 1) { + if (this.pressedElement === element) { + this.setClickTimer(element); + } else { + this.down = 0; + this.pressedElement = null; + } + } else if (this.down > 1) { + if (this.pressedElement === element) { + this.action(element, 'doubleClick'); + this.pressedElement = null; + this.down = 0; + } else if (this.pressedElement != null) { + this.down = 1; + this.pressedElement = element; + this.setClickTimer(element); + } } } } @@ -344,7 +455,7 @@ export class TileComponent implements OnInit, OnDestroy { '0px ' + (isFolder ? '-2px ' : '0px ') + (this.gridElementService.getStyle(element).BackgroundColor === undefined - || this.gridElementService.getStyle(element).BackgroundColor == null + || this.gridElementService.getStyle(element).BackgroundColor == null ? '#d3d3d3' : this.gridElementService.getStyle(element).BackgroundColor); diff --git a/src/app/services/board.service.ts b/src/app/services/board.service.ts index 0a6356cca..e9c859722 100644 --- a/src/app/services/board.service.ts +++ b/src/app/services/board.service.ts @@ -228,6 +228,8 @@ export class BoardService { /*delete the element that is sentenced to death*/ executer() { const imageTemp = []; + const audioTemp = []; + const videoTemp = []; // TODO // this.board.ElementList = this.board.ElementList.filter(x => { @@ -251,6 +253,21 @@ export class BoardService { }); this.board.ElementList.forEach((elt) => { + const resvid = this.board.VideoList.find( + (video) => video.ID === elt.ElementFormsList[0].VideoID + ); + if (resvid !== null && resvid !== undefined) { + videoTemp.push(resvid); + } + + + const resaud = this.board.AudioList.find( + (audio) => audio.ID === elt.ElementFormsList[0].AudioID + ); + if (resaud !== null && resaud !== undefined) { + audioTemp.push(resaud); + } + const res = this.board.ImageList.find( (img) => img.ID === elt.ElementFormsList[0].ImageID ); @@ -273,6 +290,7 @@ export class BoardService { this.board.ImageList = imageTemp; + this.board.AudioList = audioTemp; this.editionService.sentencedToBeDeletedElement = []; this.updateElementList(); } @@ -299,6 +317,39 @@ export class BoardService { } } + /*get sanitized image URL of an element*/ + getAudioUrl(element: GridElement) { + if (this.board.AudioList != null) { + console.log(this.board.AudioList); + console.log(element.ElementFormsList[0].AudioID); + const path = this.board.AudioList.find(x => x.ID === element.ElementFormsList[0].AudioID); + if (path !== null && path !== undefined) { + return path.Path ; + } else { + return ''; + } + } else { + return ''; + } + } + + /*get sanitized image URL of an element*/ + getVideoUrl(element: GridElement) { + if (this.board.VideoList != null) { + console.log(this.board.VideoList); + console.log(element.ElementFormsList[0].VideoID); + const path = this.board.VideoList.find(x => x.ID === element.ElementFormsList[0].VideoID); + if (path !== null && path !== undefined) { + return path.Path ; + } else { + return ''; + } + } else { + return ''; + } + } + + /*get normal image URL of an element (with no sanitizing)*/ getSimpleImgUrl(element: GridElement) { if (this.board.ImageList != null) { @@ -435,7 +486,9 @@ export class BoardService { DisplayedText: eltform.DisplayedText, VoiceText: eltform.VoiceText, LexicInfos: eltform.LexicInfos, - ImageID: '' + eltform.ImageID + ImageID: '' + eltform.ImageID, + AudioID: '' + eltform.AudioID, + VideoID: '' + eltform.VideoID, }], compElt.InteractionsList.slice() ); @@ -456,7 +509,9 @@ export class BoardService { DisplayedText: 'back', VoiceText: 'back', LexicInfos: [], - ImageID: '#back' + ImageID: '#back', + AudioID: '', + VideoID: '', }]; diff --git a/src/app/services/edition.service.ts b/src/app/services/edition.service.ts index 3f47d9f5e..85b7d88cd 100644 --- a/src/app/services/edition.service.ts +++ b/src/app/services/edition.service.ts @@ -54,12 +54,15 @@ export class EditionService { */ imageURL: any = ''; + audioURL: any = ''; + + videoURL: any = ''; + /** * the type of the current element (button by default) */ radioTypeFormat = 'button'; - menu: string[] = ['information', 'appearance'/*, 'grammar'*/, 'otherForms', 'interactions']; currentEditPage = 'information'; @@ -113,6 +116,8 @@ export class EditionService { this.interractionList = []; this.variantList = []; this.imageURL = ''; + this.audioURL = ''; + this.videoURL = ''; this.radioTypeFormat = 'button'; this.currentEditPage = 'information'; this.curentColor = '#d3d3d3'; diff --git a/src/app/services/functions.service.ts b/src/app/services/functions.service.ts index 815101f3d..d9140be47 100644 --- a/src/app/services/functions.service.ts +++ b/src/app/services/functions.service.ts @@ -39,6 +39,8 @@ export class FunctionsService { 'otherforms', 'back', 'backHome', + 'sound', + 'video' ) } diff --git a/src/app/services/proloquoParser.ts b/src/app/services/proloquoParser.ts index ceb6a020a..61c5ba129 100644 --- a/src/app/services/proloquoParser.ts +++ b/src/app/services/proloquoParser.ts @@ -238,7 +238,9 @@ export class ProloquoParser { DisplayedText: word.mot, VoiceText: word.mot, LexicInfos: [{ default: true }], - ImageID: word.wordID + ImageID: word.wordID, + AudioID: '', + VideoID: '' } ], interList @@ -279,6 +281,8 @@ export class ProloquoParser { GapSize: 5, ElementList: tempElement, ImageList: [], + AudioList: [], + VideoList: [], PageList: tempPage }; } diff --git a/src/app/services/speakForYourselfParser.ts b/src/app/services/speakForYourselfParser.ts index 9a557b9b7..b2115f751 100644 --- a/src/app/services/speakForYourselfParser.ts +++ b/src/app/services/speakForYourselfParser.ts @@ -30,7 +30,7 @@ export class SpeakForYourselfParser { } createGrid() { - const grille: Grid = new Grid('speak4yourself', 'Grid', 12, 12, [], [], []); + const grille: Grid = new Grid('speak4yourself', 'Grid', 12, 12, [], [], [], [], []); this.speak4Yourself.forEach(element => { if (element.page === 'HOME') { @@ -73,7 +73,9 @@ export class SpeakForYourselfParser { DisplayedText: element.mot, VoiceText: element.mot, LexicInfos: [{ default: true }], - ImageID: '' + ImageID: '', + AudioID: '', + VideoID: '' }], [{ ID: 'click', diff --git a/src/app/types.ts b/src/app/types.ts index d45a67b63..1c6c1f85e 100644 --- a/src/app/types.ts +++ b/src/app/types.ts @@ -22,19 +22,23 @@ export class Grid { ElementList: GridElement[]; ImageList: Image[]; + AudioList: Audio[]; + VideoList: Video[]; PageList: Page[]; BackgroundColor: string; - constructor(gridId, gridType, gridCol, gridRow, elemList, imageList, pageList) { + constructor(gridId, gridType, gridCol, gridRow, elemList, imageList, pageList,AudioList,videoList) { this.ID = gridId; this.Type = gridType; this.NumberOfCols = Number(gridCol); this.NumberOfRows = Number(gridRow); this.ElementList = elemList; this.ImageList = imageList; + this.AudioList = AudioList; + this.VideoList = videoList; this.PageList = pageList; } @@ -53,7 +57,7 @@ export class FolderGoTo { */ export class GridElement { ID: string; - Type: 'empty' | 'button' | FolderGoTo; + Type: 'empty' | 'button' | 'sound' | 'video' | FolderGoTo; PartOfSpeech: '-nom-' | '-nom-pr-' | 'nom de famille' | '-adv-' | 'prénom' | '-adj-' | 'variante typographique' | '-verb' | 'pronom' | 'locution-phrase' | 'interjection' | 'onomatopée' | 'pronom démonstratif' | 'adjectif indéfini' | 'pronom indéfini' | 'pronom personnel' | 'conjonction' | 'adjectif numéral' | 'préposition' | 'article partitif' | 'adverbe interrogatif' | 'conjonction de coordination' | 'pronom interrogatif' | 'pronom relatif' | 'pronom possessif' | 'erreur' | 'locution phrase' | 'proverbe' | 'adverbe relatif' | 'nom scientifique' | 'adjectif exclamatif' | 'adjectif interrogatif' | 'adjectif possessif' | 'adjectif démonstratif' | 'patronyme' | 'article défini' | 'interj' | 'locution' | 'article indéfini' | string; VisibilityLevel: number; x: number; @@ -92,7 +96,7 @@ export class GridElement { */ export class GridElementGenerated { ID: string; - Type: 'empty' | 'button' | FolderGoTo; + Type: 'empty' | 'button' | 'sound' | 'video' | FolderGoTo; PartOfSpeech: '-nom-' | '-nom-pr-' | 'nom de famille' | '-adv-' | 'prénom' | '-adj-' | 'variante typographique' | '-verb' | 'pronom' | 'locution-phrase' | 'interjection' | 'onomatopée' | 'pronom démonstratif' | 'adjectif indéfini' | 'pronom indéfini' | 'pronom personnel' | 'conjonction' | 'adjectif numéral' | 'préposition' | 'article partitif' | 'adverbe interrogatif' | 'conjonction de coordination' | 'pronom interrogatif' | 'pronom relatif' | 'pronom possessif' | 'erreur' | 'locution phrase' | 'proverbe' | 'adverbe relatif' | 'nom scientifique' | 'adjectif exclamatif' | 'adjectif interrogatif' | 'adjectif possessif' | 'adjectif démonstratif' | 'patronyme' | 'article défini' | 'interj' | 'locution' | 'article indéfini' | string; VisibilityLevel: number; x: number; @@ -145,6 +149,18 @@ export class Image { Path: string; } +export class Audio { + ID: string; + OriginalName: string; + Path: string; +} + +export class Video { + ID: string; + OriginalName: string; + Path: string; +} + export class Interaction { ID: string; // 'click' | 'longPress' | 'doubleClick'; ActionList: Action[]; @@ -166,6 +182,8 @@ export class ElementForm { VoiceText: string; LexicInfos: any[]; ImageID: string; + AudioID: string; + VideoID: string; } export class Page { diff --git a/src/assets/defaultsave.json b/src/assets/defaultsave.json index 56cdfc784..62070eb26 100644 --- a/src/assets/defaultsave.json +++ b/src/assets/defaultsave.json @@ -802,6 +802,20 @@ "Path": "assets/libs/mulberry-symbols/EN-symbols/grandmother.svg" } ], + "AudioList": [ + { + "ID": "vide", + "OriginalName": "vide", + "Path": "vide" + } + ], + "VideoList": [ + { + "ID": "vide", + "OriginalName": "vide", + "Path": "vide" + } +], "PageList": [ { "ID": "#HOME", diff --git a/src/assets/multilinguism.json b/src/assets/multilinguism.json index fedeedc77..9ac826a43 100644 --- a/src/assets/multilinguism.json +++ b/src/assets/multilinguism.json @@ -367,13 +367,20 @@ { "id" : "deactivateDwell", "FR": "Désactiver la sélection par fixation", "EN": "Disable selection by focus"}, { "id" : "buttonDescription", "FR": "L'élément créé sera un simple bouton", "EN": "The element will be a simple button"}, { "id" : "folderDescription", "FR": "L'élément créé sera un dossier pouvant contenir d'autres boutons", "EN": "The element will be a folder that can contain other buttons"}, + { "id" : "soundbuttonDescription", "FR": "L'élément créé sera un bouton qui lancera un bruit quand il sera utilisé", "EN": "The element will be a button that does a sound when used"}, + { "id" : "videobuttonDescription", "FR": "L'élément créé sera un bouton qui lancera une vidéo quand il sera utilisé", "EN": "The element will be a button that launch a video when used"}, + { "id" : "soundButton", "FR": "Bouton son", "EN": "Sound button"}, + { "id" : "videoButton", "FR": "Bouton vidéo", "EN": "Video button"}, + { "id" : "addSoundByFile", "FR": "Ajouter le son depuis un fichier de votre ordinateur", "EN": "Add the sound by a File from your computer"}, + { "id" : "addVideoByFile", "FR": "Ajouter la vidéo depuis un fichier de votre ordinateur", "EN": "Add the video by a File from your computer"}, { "id" : "warningQuit", "FR": "Voulez vous vraiment quitter ? Les modifications non sauvegardées seront perdues", "EN": "Are you sure you want to quit ? Unsaved changes will be lost"}, { "id" : "export", "FR": "Export", "EN": "Export"}, { "id" : "exportStyle", "FR": "Mise en page", "EN" : "Export style"}, { "id" : "focusSelection", "FR": "Sélection par fixation", "EN": "Selection by focus"}, { "id" : "WordNameFile", "FR": "ClavierAugCom", "EN": "GridFileAugcom"}, { "id" : "WordTitle", "FR": "Clavier Augcom", "EN": "AugCom main grid"}, - { "id" : "WordFolder", "FR": "Sous Dossier", "EN": "Folder"} - + { "id" : "WordFolder", "FR": "Sous Dossier", "EN": "Folder"}, + { "id" : "sound", "FR": "Faire jouer un son", "EN": "Play a sound"}, + { "id" : "video", "FR": "Faire jouer une vidéo", "EN": "Play a video"} ] }