+
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 bddc88aef..87f48783c 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
@@ -3406,6 +3406,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 84b477943..6e2b2d335 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
@@ -27,7 +27,9 @@ import {
interactionChoiceEditorState,
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";
@@ -745,13 +747,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",
@@ -770,10 +783,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", () => {
@@ -1342,6 +1370,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;
@@ -1550,34 +1584,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);
- expect(component.videoSolutionData).toBeDefined();
+ 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);
- expect(component.videoSolutionData).toBeDefined();
+ 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);
- expect(component.videoSolutionData).toBeDefined();
+ 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 cb1e50d5d..9f7abf687 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
@@ -38,20 +38,22 @@ 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;
selectedSolutionTypeIndex: string;
showSolutionDropDown = true;
showSolution = false;
- videoSolutionName: string;
- videoSolutionData: any;
- videoThumbnail: string;
+ assetSolutionName: string;
+ assetSolutionData: any;
+ assetThumbnail: string;
solutionUUID: string;
solutionValue: string;
solutionTypes: any = [{
@@ -61,6 +63,10 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
{
type: 'video',
value: 'video'
+ },
+ {
+ type: 'audio',
+ value: 'audio'
}];
questionMetaData: any;
questionInteractionType;
@@ -252,13 +258,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;
}
@@ -683,59 +689,62 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
- videoDataOutput(event) {
+ assetDataOutput(event) {
if (event) {
- this.videoSolutionData = 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;
}
@@ -761,8 +770,6 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
media: this.mediaArr,
editorState: {}
};
- console.log('getQuestionMetadata');
- console.log(this.editorState);
metadata = _.assign(metadata, this.editorState);
metadata.editorState.question = metadata.question;
metadata.body = metadata.question;
@@ -843,12 +850,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) {
@@ -864,13 +871,17 @@ 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;
}
-
getMcqQuestionHtmlBody(question, templateId) {
const mcqTemplateConfig = {
// tslint:disable-next-line:max-line-length
@@ -1242,7 +1253,6 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
output(event) { }
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 e2f5303eb..b77cdc461 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 { ProgressStatusComponent } from './components/progress-status/progress-s
import {TermAndConditionComponent} from './components/term-and-condition/term-and-condition.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,7 +69,8 @@ import { QualityParamsModalComponent } from './components/quality-params-modal/q
PlainTreeComponent,
ProgressStatusComponent,
TermAndConditionComponent,
- QualityParamsModalComponent
+ QualityParamsModalComponent,
+ AssetsBrowserComponent,
],
imports: [CommonModule, FormsModule, ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'}), RouterModule.forChild([]), SuiModule,
CommonFormElementsModule, InfiniteScrollModule, HttpClientModule, ResourceLibraryModule, A11yModule],
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 195ea0ad1..660906e74 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
@@ -15,6 +15,11 @@
"size": "50",
"sizeType": "MB",
"accepted": "mp4, webm"
+ },
+ "audio": {
+ "size": "50",
+ "sizeType": "MB",
+ "accepted": "mp3, wav"
}
},
"questionPrimaryCategories": ["Multiple Choice Question", "Subjective 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 29e13cd2d..d909285ed 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
@@ -77,7 +77,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",
@@ -91,9 +91,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",
"name":"Name",
@@ -138,6 +161,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",
@@ -247,6 +271,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",