+
diff --git a/projects/questionset-editor-library/src/lib/components/question/question.component.spec.data.ts b/projects/questionset-editor-library/src/lib/components/question/question.component.spec.data.ts
index f5529c520..0f2cf8f62 100644
--- a/projects/questionset-editor-library/src/lib/components/question/question.component.spec.data.ts
+++ b/projects/questionset-editor-library/src/lib/components/question/question.component.spec.data.ts
@@ -3764,6 +3764,24 @@ export const videoSolutionObject= {
"value": "do_2137972441518325761398"
};
+export const audioSolutionObject= {
+ "id": "4772d9da-569f-46bb-a8b1-9faf742d0640",
+ "type": "audio",
+ "value": "do_2137972441518325761398"
+};
+
+export const mediaAudioArray = [
+ {
+ "id": "do_2137972441518325761398",
+ "src": "/assets/public/content/assets/do_2137972441518325761398/earth.mp3",
+ "type": "audio",
+ "assetId": "do_2137972441518325761398",
+ "name": "earth",
+ "baseUrl": "https://dev.inquiry.sunbird.org",
+ "thubmnail": "/assets/public/content/assets/do_21379724415183257613675/earth.png"
+ }
+];
+
export const mediaVideoArray = [
{
"id": "do_2137972441518325761398",
diff --git a/projects/questionset-editor-library/src/lib/components/question/question.component.spec.ts b/projects/questionset-editor-library/src/lib/components/question/question.component.spec.ts
index a102e1fc2..75881dbf3 100644
--- a/projects/questionset-editor-library/src/lib/components/question/question.component.spec.ts
+++ b/projects/questionset-editor-library/src/lib/components/question/question.component.spec.ts
@@ -28,7 +28,9 @@ import {
interactionMatchEditorState,
RubricData,
videoSolutionObject,
- mediaVideoArray
+ mediaVideoArray,
+ audioSolutionObject,
+ mediaAudioArray
} from "./question.component.spec.data";
import { of, throwError } from "rxjs";
import * as urlConfig from "../../services/config/url.config.json";
@@ -802,13 +804,24 @@ describe("QuestionComponent", () => {
it('#getQuestionSolution() should return video solution', () => {
component.mediaArr = mediaVideoArray;
+ component.selectedSolutionType = "video";
spyOn(component, 'getQuestionSolution').and.callThrough();
spyOn(component, 'getMediaById').and.callThrough();
- spyOn(component, 'getVideoSolutionHtml').and.callThrough();
+ spyOn(component, 'getAssetSolutionHtml').and.callThrough();
const solution = component.getQuestionSolution(videoSolutionObject);
expect(solution).toBeDefined();
})
+ it('#getQuestionSolution() should return audio solution', () => {
+ component.mediaArr = mediaAudioArray;
+ component.selectedSolutionType = "audio";
+ spyOn(component, 'getQuestionSolution').and.callThrough();
+ spyOn(component, 'getMediaById').and.callThrough();
+ spyOn(component, 'getAssetSolutionHtml').and.callThrough();
+ const solution = component.getQuestionSolution(audioSolutionObject);
+ expect(solution).toBeDefined();
+ })
+
it('#getQuestionSolution() should return html solution', () => {
const solutionObject = {
"id": "4772d9da-569f-46bb-a8b1-9faf742d0640",
@@ -827,10 +840,25 @@ describe("QuestionComponent", () => {
expect(mediaobj).toBeDefined();
});
- it('#getVideoSolutionHtml() should return videoSolutionHtml', () => {
- spyOn(component, 'getVideoSolutionHtml').and.callThrough();
- const videoSolutionHtml = component.getVideoSolutionHtml(mediaVideoArray[0].thubmnail, mediaVideoArray[0].src, mediaVideoArray[0].id);
- expect(videoSolutionHtml).toBeDefined();
+ it('#getMediaById() should return audio object', () => {
+ component.mediaArr = mediaAudioArray;
+ spyOn(component, 'getMediaById').and.callThrough();
+ const mediaobj = component.getMediaById(mediaAudioArray[0].id);
+ expect(mediaobj).toBeDefined();
+ });
+
+ it('#getAssetSolutionHtml() should return assetSolutionHtml', () => {
+ spyOn(component, 'getAssetSolutionHtml').and.callThrough();
+ component.selectedSolutionType = "video";
+ const assetSolutionHtml = component.getAssetSolutionHtml(mediaVideoArray[0].thubmnail, mediaVideoArray[0].src, mediaVideoArray[0].id);
+ expect(assetSolutionHtml).toBeDefined();
+ });
+
+ it('#getAssetSolutionHtml() should return assetSolutionHtml', () => {
+ spyOn(component, 'getAssetSolutionHtml').and.callThrough();
+ component.selectedSolutionType = "audio";
+ const assetSolutionHtml = component.getAssetSolutionHtml(mediaAudioArray[0].thubmnail, mediaAudioArray[0].src, mediaAudioArray[0].id);
+ expect(assetSolutionHtml).toBeDefined();
});
it("call #getMcqQuestionHtmlBody() to verify questionBody", () => {
@@ -1467,6 +1495,12 @@ describe("QuestionComponent", () => {
component.deleteSolution();
expect(component.mediaArr).toBeDefined();
});
+ it("#deleteSolution() should call deleteSolution and define mediaArr for audio type", () => {
+ component.editorState = mockData.editorState;
+ component.selectedSolutionType = "audio";
+ component.deleteSolution();
+ expect(component.mediaArr).toBeDefined();
+ });
it("#validateQuestionData() should call validateQuestionData and question is undefined", () => {
component.editorState = mockData.editorState;
component.editorState.question = undefined;
@@ -1739,31 +1773,34 @@ describe("QuestionComponent", () => {
component.addResourceToQuestionset();
});
- it("#videoDataOutput() should call videoDataOutput and event data is empty", () => {
+ it("#assetDataOutput() should call assetDataOutput and event data is empty", () => {
const event = "";
spyOn(component, "deleteSolution");
- component.videoDataOutput(event);
+ component.assetDataOutput(event);
expect(component.deleteSolution).toHaveBeenCalled();
});
- it("#videoDataOutput() should call videoDataOutput and event data is not empty", () => {
+ it("#assetDataOutput() should call assetDataOutput and event data is not empty", () => {
const event = { name: "event name", identifier: "1234" };
- component.videoDataOutput(event);
+ component.assetDataOutput(event);
+ expect(component.assetSolutionData).toBeDefined();
});
- it("#videoDataOutput() should call videoDataOutput for thumbnail", () => {
+ it("#assetDataOutput() should call assetDataOutput for thumbnail", () => {
const event = {
name: "event name",
identifier: "1234",
thumbnail: "sample data",
};
- component.videoDataOutput(event);
+ component.assetDataOutput(event);
+ expect(component.assetSolutionData).toBeDefined();
});
- it("#videoDataOutput() should call videoDataOutput for thumbnail", () => {
+ it("#assetDataOutput() should call assetDataOutput for thumbnail", () => {
const event = {
name: "event name",
identifier: "1234",
thumbnail: "sample data",
};
- component.videoDataOutput(event);
+ component.assetDataOutput(event);
+ expect(component.assetSolutionData).toBeDefined();
});
it("#subMenuChange() should set the sub-menu value ", () => {
spyOn(component,'subMenuChange').and.callThrough();
diff --git a/projects/questionset-editor-library/src/lib/components/question/question.component.ts b/projects/questionset-editor-library/src/lib/components/question/question.component.ts
index 52114917b..f51adc709 100644
--- a/projects/questionset-editor-library/src/lib/components/question/question.component.ts
+++ b/projects/questionset-editor-library/src/lib/components/question/question.component.ts
@@ -37,17 +37,21 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
@Output() questionEmitter = new EventEmitter
();
private onComponentDestroy$ = new Subject();
toolbarConfig: any = {};
+ public showAssetPicker = false;
+ public terms = false;
public editorState: any = {};
public showPreview = false;
public mediaArr: any = [];
- public videoShow = false;
+ public assetShow = false;
public showFormError = false;
public actionType: string;
+ assetType: string;
selectedSolutionType: string;
showSolutionDropDown = true;
showSolution = false;
- videoSolutionName: string;
- videoThumbnail: string;
+ assetSolutionName: string;
+ assetSolutionData: any;
+ assetThumbnail: string;
solutionUUID: string;
solutionTypes: any = [{
type: 'html',
@@ -56,6 +60,10 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
{
type: 'video',
value: 'video'
+ },
+ {
+ type: 'audio',
+ value: 'audio'
}];
questionMetaData: any;
questionInteractionType;
@@ -270,13 +278,13 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
this.solutionUUID = this.editorState.solutions[0].id;
this.showSolutionDropDown = false;
this.showSolution = true;
- if (this.selectedSolutionType === 'video') {
+ if (this.selectedSolutionType === 'video' || this.selectedSolutionType === 'audio') {
const index = _.findIndex(this.questionMetaData.media, (o) => {
- return o.type === 'video' && o.id === this.editorState.solutions[0].value;
+ return o.type === this.selectedSolutionType && o.id === this.editorState.solutions[0].value;
});
- this.videoSolutionName = this.questionMetaData.media[index].name;
- this.videoThumbnail = this.questionMetaData.media[index].thumbnail;
- }
+ this.assetSolutionName = this.questionMetaData.media[index].name;
+ this.assetThumbnail = this.questionMetaData.media[index].thumbnail;
+ }
if (this.selectedSolutionType === 'html') {
this.editorState.solutions = this.editorState.solutions[0].value;
}
@@ -733,58 +741,62 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
- videoDataOutput(event) {
+ assetDataOutput(event) {
if (event) {
- this.videoSolutionName = event.name;
+ this.assetSolutionData = event;
+ this.assetSolutionName = event.name;
this.editorState.solutions = event.identifier;
- this.videoThumbnail = event.thumbnail;
- const videoMedia: any = {};
- videoMedia.id = event.identifier;
- videoMedia.src = event.src;
- videoMedia.type = 'video';
- videoMedia.assetId = event.identifier;
- videoMedia.name = event.name;
- videoMedia.thumbnail = this.videoThumbnail;
- videoMedia.baseUrl = _.get(this.editorService.editorConfig, 'context.host') || document.location.origin;
- if (videoMedia.thumbnail) {
+ this.assetThumbnail = event.thumbnail;
+ const assetMedia: any = {};
+ assetMedia.id = event.identifier;
+ assetMedia.src = event.src;
+ assetMedia.type = this.assetType;
+ assetMedia.assetId = event.identifier;
+ assetMedia.name = event.name;
+ assetMedia.thumbnail = this.assetThumbnail;
+ assetMedia.baseUrl = _.get(this.editorService.editorConfig, 'context.host') || document.location.origin;
+ if (assetMedia.thumbnail) {
const thumbnailMedia: any = {};
- thumbnailMedia.src = this.videoThumbnail;
+ thumbnailMedia.src = this.assetThumbnail;
thumbnailMedia.type = 'image';
- thumbnailMedia.id = `video_${event.identifier}`;
+ thumbnailMedia.id = `${this.assetType}_${event.identifier}`;
thumbnailMedia.baseUrl = _.get(this.editorService.editorConfig, 'context.host') || document.location.origin;
this.mediaArr.push(thumbnailMedia);
}
- this.mediaArr.push(videoMedia);
+ this.mediaArr.push(assetMedia);
this.showSolutionDropDown = false;
this.showSolution = true;
} else {
this.deleteSolution();
}
- this.videoShow = false;
+ this.assetShow = false;
}
selectSolutionType(data: any) {
const index = _.findIndex(this.solutionTypes, (sol: any) => {
return sol.value === data;
});
+ this.assetType = data;
this.selectedSolutionType = this.solutionTypes[index].type;
- if (this.selectedSolutionType === 'video') {
- const showVideo = true;
- this.videoShow = showVideo;
- } else {
+ if (this.selectedSolutionType === 'video' || this.selectedSolutionType === 'audio') {
+ const showAsset = true;
+ this.assetShow = showAsset;
+ }
+ else {
this.showSolutionDropDown = false;
}
}
deleteSolution() {
- if (this.selectedSolutionType === 'video') {
+ if (this.selectedSolutionType === 'video' || this.selectedSolutionType === 'audio') {
this.mediaArr = _.filter(this.mediaArr, (item: any) => item.id !== this.editorState.solutions);
- }
+ }
this.showSolutionDropDown = true;
this.selectedSolutionType = '';
- this.videoSolutionName = '';
+ this.assetType = '';
+ this.assetSolutionName = '';
this.editorState.solutions = '';
- this.videoThumbnail = '';
+ this.assetThumbnail = '';
this.showSolution = false;
}
@@ -928,12 +940,12 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
getQuestionSolution(solutionObj) {
if (solutionObj?.type === 'html') {
return {[solutionObj?.id]: solutionObj.value};
- } else if (solutionObj?.type === 'video') {
- const videoMedia = this.getMediaById(solutionObj?.value);
- const videoThumbnail = videoMedia?.thumbnail ? videoMedia?.thumbnail : '';
- const videoSolution = this.getVideoSolutionHtml(videoThumbnail, videoMedia?.src, videoMedia.id);
- return {[solutionObj.id]: videoSolution};
- }
+ } else if (solutionObj?.type === 'video' || solutionObj?.type === 'audio') {
+ const assetMedia = this.getMediaById(solutionObj?.value);
+ const assetThumbnail = assetMedia?.thumbnail ? assetMedia?.thumbnail : '';
+ const assetSolution = this.getAssetSolutionHtml(assetThumbnail, assetMedia?.src, assetMedia.id);
+ return {[solutionObj.id]: assetSolution};
+ }
}
getMediaById(mediaId) {
@@ -949,10 +961,15 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
return responseDeclaration;
}
- getVideoSolutionHtml(posterURL, srcUrl, solutionMediaId) {
- const videoSolutionHtml = ''
- const videoSolutionValue = videoSolutionHtml.replace('{posterUrl}', posterURL).replace('{sourceURL}', srcUrl).replace('{sourceURL}', srcUrl).replace('{solutionMediaId}', solutionMediaId);
- return videoSolutionValue;
+ getAssetSolutionHtml(posterURL, srcUrl, solutionMediaId) {
+ let assetSolutionHtml
+ if (this.selectedSolutionType === 'video') {
+ assetSolutionHtml = ''
+ } else if(this.selectedSolutionType === 'audio') {
+ assetSolutionHtml = ''
+ }
+ const assetSolutionValue = assetSolutionHtml.replace('{posterUrl}', posterURL).replace('{sourceURL}', srcUrl).replace('{sourceURL}', srcUrl).replace('{solutionMediaId}', solutionMediaId);
+ return assetSolutionValue;
}
getMtfQuestionHtmlBody(question, templateId) {
@@ -1338,7 +1355,6 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
}
onStatusChanges(event) {
- console.log(event);
if (_.has(event, 'isValid')) {
this.questionMetadataFormStatus = event.isValid;
}
diff --git a/projects/questionset-editor-library/src/lib/questionset-editor-library.module.ts b/projects/questionset-editor-library/src/lib/questionset-editor-library.module.ts
index b5e69138e..043562902 100644
--- a/projects/questionset-editor-library/src/lib/questionset-editor-library.module.ts
+++ b/projects/questionset-editor-library/src/lib/questionset-editor-library.module.ts
@@ -38,6 +38,7 @@ import {TermAndConditionComponent} from './components/term-and-condition/term-an
import { MatchComponent } from './components/match/match.component';
import { QualityParamsModalComponent } from './components/quality-params-modal/quality-params-modal.component';
+import { AssetsBrowserComponent } from './components/assets-browser/assets-browser.component';
@NgModule({
declarations: [
QuestionsetEditorLibraryComponent,
@@ -68,6 +69,7 @@ import { QualityParamsModalComponent } from './components/quality-params-modal/q
ProgressStatusComponent,
TermAndConditionComponent,
QualityParamsModalComponent,
+ AssetsBrowserComponent,
MatchComponent
],
imports: [CommonModule, FormsModule, ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'}), RouterModule.forChild([]), SuiModule,
diff --git a/projects/questionset-editor-library/src/lib/services/config/editor.config.json b/projects/questionset-editor-library/src/lib/services/config/editor.config.json
index ca85ae50f..333399224 100644
--- a/projects/questionset-editor-library/src/lib/services/config/editor.config.json
+++ b/projects/questionset-editor-library/src/lib/services/config/editor.config.json
@@ -14,6 +14,11 @@
"size": "50",
"sizeType": "MB",
"accepted": "mp4, webm"
+ },
+ "audio": {
+ "size": "50",
+ "sizeType": "MB",
+ "accepted": "mp3, wav"
}
},
"questionPrimaryCategories": ["Multiple Choice Question", "Subjective Question", "Match The Following Question"],
diff --git a/projects/questionset-editor-library/src/lib/services/config/label.config.json b/projects/questionset-editor-library/src/lib/services/config/label.config.json
index 7b1ea5962..e3682af77 100644
--- a/projects/questionset-editor-library/src/lib/services/config/label.config.json
+++ b/projects/questionset-editor-library/src/lib/services/config/label.config.json
@@ -53,7 +53,7 @@
"answers":"Answers",
"answersRequired":"Answer is required",
"answersPopupText":"Please provide an answer for the question. Check preview to understand how it would look.",
- "selectImage":"Select Image",
+ "selectImage":"Select Image",
"myImages":"My Images",
"allImage":"All Image",
"uploadAndUse":"Upload and Use",
@@ -67,9 +67,32 @@
"copyRightsAndLicense":"Copyright & License",
"dropChooseFile":"Drop or choose file to upload before entering the details",
"charactersLeft":"Characters left:",
+ "myAssets": {
+ "image": "My Images",
+ "video": "My Video(s)",
+ "audio": "My Audio"
+ },
+ "allAssets": {
+ "image": "All Image",
+ "video": "All Video(s)",
+ "audio": "All Audio"
+ },
+ "selectAsset": {
+ "image":"Select Image",
+ "video":"Select Video",
+ "audio":"Select Audio"
+ },
+ "chooseOrDragAsset": {
+ "image": "Choose or drag and drop your image here",
+ "video": "Choose or drag and drop your video here",
+ "audio": "Choose or drag and drop your audio here"
+ },
"myVideos":"My Video(s)",
"allVideos":"All Video(s)",
"selectVideo":"Select Video",
+ "myAudios": "My Audio(s)",
+ "allAudios":"All Audio(s)",
+ "selectAudio":"Select Audio",
"searchPlaceholder":"Search...",
"addAnImage":"Add an image",
"confirmDeleteContent":"Confirm Delete Content",
@@ -101,6 +124,7 @@
"pageNumber":"Page No",
"confirmQuestionNotSaved":"This question will not be saved, are you sure you want to go back to questionset?",
"video":"Video",
+ "audio":"Audio",
"textImage":"Text+Image",
"chooseType":"Choose type",
"solution":"Solution",
@@ -145,6 +169,26 @@
"termsAndConditions": {
"001": "I understand and confirm that all resources and assets created through the content editor or uploaded on the platform shall be available for free and public use without limitations on the platform (web portal, applications and any other end user interface that the platform would enable) and will be licensed under terms & conditions and policy guidelines of the platform. In doing so, the copyright and license of the original author is not infringed."
},
+ "emptySearchMessage": {
+ "image": "No images found, please try searching for something else",
+ "video": "No videos found, please try searching for something else",
+ "audio": "No audios found, please try searching for something else"
+ },
+ "chooseFileMsg": {
+ "image": "Please choose an image file",
+ "video": "Please choose a video file",
+ "audio": "Please choose a audio file"
+ },
+ "assetSearchFailed": {
+ "image": "Image search failed",
+ "video": "Video search failed",
+ "audio": "Audio search falied"
+ },
+ "assetUploadFailed": {
+ "image": "Image upload failed",
+ "audio": "Video upload failed",
+ "video": "Audio upload failed"
+ },
"messages": {
"error": {
"001": "Something went wrong, Please try later",