AMS flag funcationality

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue

@@ -30,7 +30,9 @@
                                                          :characterLimit="60"
                                                          :isH3="true"></EditSaveFieldWithCharacterCount>
                         <h3 class="my-0"
-                            v-else>{{ block.title }}</h3>
+                            v-else>
+                            {{ block.title }}
+                        </h3>
                         <Tick :complete="block.isReadyToPublish()"
                               class="pl-10"></Tick>
                     </div>
@@ -50,7 +52,8 @@
                                     ariaLabel="Move section down"
                                     class="contribute-block-component-button"></IconButton>
                     </div>
-                    <IconButton v-if="!canBeDuplicated" 
+                    <IconButton v-if="!canBeDuplicated && !contributeResourceAVFlag && block.blockType === BlockTypeEnum.Media"></IconButton>
+                    <IconButton v-else
                                 @click="duplicateBlock"
                                 iconClasses="fa-regular fa-clone"
                                 ariaLabel="Duplicate section"
@@ -131,6 +134,7 @@
     import ContributeImageCarouselBlock from "./ContributeImageCarouselBlock.vue";
     import { QuestionBlockModel } from "../models/contribute-resource/blocks/questionBlockModel";
     import { EventBus } from './contributeResourceEvents';
+    import { resourceData } from '../data/resource';
 
     export default Vue.extend({
         components: {
@@ -162,10 +166,12 @@
                 discardBlockModalOpen: false,
                 BlockTypeEnum: BlockTypeEnum,
                 isOpen: true,
+                contributeResourceAVFlag: true
             };
         },
         created() {
             this.isOpen = true;
+            this.getContributeResAVResourceFlag();
         },
         watch: {
             isOpen(newVal, oldVal) {
@@ -180,6 +186,11 @@
                 event.target.blur();
                 event.target.parentElement.blur();
                 this.$emit('duplicate');
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
             }
         }
     });

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue

@@ -2,17 +2,17 @@
     <div class="contribute-case-component lh-padding-fluid">
         <div class="lh-container-xl py-15">
             <div class="py-10 text-center placeholder-text"
-                 v-if="!hasContentOnPage">You have not added any content to this page yet
+                 v-if="!hasContentOnPage">
+                You have not added any content to this page yet
             </div>
             <template v-else>
-                <FilteredBlockCollectionView
-                    :resourceType="resourceType"
-                    :blockCollection="blockCollection"
-                    :selection="blockCollection => blockCollection.getBlocksByPage(page).filter(block => block.blockType !== BlockTypeEnum.Question)"
-                    :can-be-duplicated="duplicatingBlocks"
-                    :blocksToDuplicate="blocksToDuplicate"
-                    @annotateWholeSlideImage="showSlideWithAnnotations"
-                    @duplicateBlock="blockId => $emit('duplicateBlock', blockId)"/>
+                <FilteredBlockCollectionView :resourceType="resourceType"
+                                             :blockCollection="blockCollection"
+                                             :selection="blockCollection => blockCollection.getBlocksByPage(page).filter(block => block.blockType !== BlockTypeEnum.Question)"
+                                             :can-be-duplicated="duplicatingBlocks"
+                                             :blocksToDuplicate="blocksToDuplicate"
+                                             @annotateWholeSlideImage="showSlideWithAnnotations"
+                                             @duplicateBlock="blockId => $emit('duplicateBlock', blockId)" />
             </template>
 
             <ContributeAddContentBlock @add="choosingNewContentBlock = true"></ContributeAddContentBlock>
@@ -25,13 +25,19 @@
                    ref="addMediaInput"
                    multiple
                    @change="uploadNewMediaFiles"
-                   class="visually-hidden"/>
+                   class="visually-hidden" />
+
+            <Modal v-if="avUnavailableMessage">
+                <div v-html="audioVideoUnavailableView"></div>
+                <button type="button" class="nhsuk-button nhsuk-button--secondary mt-2 col-4 col-sm-3 col-md-2" @click="cancelAVUnavailModal">Cancel</button>
+            </Modal>   
         </div>
     </div>
 </template>
 
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
+    import { resourceData } from '../data/resource';
     import ContributeBlock from './ContributeBlock.vue';
     import ContributeAddContentBlock from './ContributeAddContentBlock.vue';
     import ContributeChooseContentBlockType from './ContributeChooseContentBlockType.vue';
@@ -40,11 +46,14 @@
     import {
         FileUploadType,
         getAllowedFileExtensionsInAcceptFormat,
-        startUploadsFromFileElement
+        startUploadsFromFileElement,
+        getMediaTypeFromFileExtensionContributeCaseOrAssessment
     } from '../helpers/fileUpload';
     import FilteredBlockCollectionView from './components/questions/FilteredBlockCollectionView.vue';
     import { WholeSlideImageModel } from "../models/contribute-resource/blocks/wholeSlideImageModel";
     import { ResourceType } from "../constants";
+    import { MediaTypeEnum } from '../models/contribute-resource/blocks/mediaTypeEnum';
+    import Modal from '../globalcomponents/Modal.vue';
 
     export default Vue.extend({
         props: {
@@ -59,16 +68,25 @@
             ContributeAddContentBlock,
             ContributeChooseContentBlockType,
             FilteredBlockCollectionView,
+            Modal,
         },
         data() {
             return {
                 choosingNewContentBlock: false,
                 BlockTypeEnum,
+                contributeResourceAVFlag: true,
+                avUnavailableMessage: false
             };
         },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
         computed: {
             hasContentOnPage(): boolean {
                 return this.blockCollection?.getBlocksByPage(this.page)?.filter(block => block.blockType !== BlockTypeEnum.Question).length > 0;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
             }
         },
         methods: {
@@ -90,14 +108,42 @@
                 }
             },
             async uploadNewMediaFiles(event: any): Promise<void> {
-                startUploadsFromFileElement(
-                    event.target as HTMLInputElement,
-                    (fileId, mediaType) => this.blockCollection.addMediaBlock(fileId, mediaType, this.page)
-                );
+                var targetItem = event.target as HTMLInputElement;
+                var startUpload = true;
+
+                if (targetItem.value !== '') {
+                    for (let i = 0; i < targetItem.files.length; i++) {
+                        const file = targetItem.files[i] as File;
+                        const fileExtension = file.name.split('.').pop();
+                        const mediaType = getMediaTypeFromFileExtensionContributeCaseOrAssessment(`.${fileExtension}`);
+
+                        if (!this.contributeResourceAVFlag && (mediaType === MediaTypeEnum.Audio || mediaType === MediaTypeEnum.Video)) {
+                            startUpload = false;
+                            this.avUnavailableMessage = true;
+                        }
+                        else { startUpload = true; }
+                    }
+                }
+
+                if (startUpload) {
+                    startUploadsFromFileElement(
+                        event.target as HTMLInputElement,
+                        (fileId, mediaType) => this.blockCollection.addMediaBlock(fileId, mediaType, this.page)
+                    );
+                }
+                targetItem.value = '';
             },
             showSlideWithAnnotations(wholeSlideImageToShow: WholeSlideImageModel) {
                 this.$emit('annotateWholeSlideImage', wholeSlideImageToShow, false);
             },
+            cancelAVUnavailModal() {
+                this.avUnavailableMessage = false;
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            }
         },
     });
 </script>

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ChooseContentBlockOption.vue

@@ -1,18 +1,22 @@
 <template>
     <div class="contribute-add-content-block-component-option">
         <div class="contribute-add-content-block-component-option--icon">
-            <img v-bind:src="imgSrc" class="flexible-image"/>
+            <img v-bind:src="imgSrc" class="flexible-image" />
         </div>
         <div class="contribute-add-content-block-component-option--description">
             <h5>{{blockTypeName}}</h5>
             <p>{{blockDescription}}</p>
+            <div v-if="!contributeResourceAVFlag && blockTypeName === 'Media'">
+                <div v-html="audioVideoUnavailableView"></div>
+            </div>
         </div>
         <Button v-on:click="$emit('choose')">Select</Button>
     </div>
 </template>
 
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
+    import { resourceData } from '../../../data/resource';
 
     import Button from "../../../globalcomponents/Button.vue";
 
@@ -27,6 +31,26 @@
             blockTypeName: String,
             blockDescription: String,
         },
+        data() {
+            return {
+                contributeResourceAVFlag: true
+            }
+        },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
+        computed: {
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
+            },
+        },
+        methods: {
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            }
+        }
     })
 </script>
 

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ContributeMediaBlock.vue

@@ -2,14 +2,18 @@
     <div class="contribute-media-block">
         <MediaBlockAttachment v-if="mediaBlock.mediaType === MediaTypeEnum.Attachment"
                               v-on:updatePublishingStatus="updatePublishingStatus"
-                              v-bind:attachment="attachment"/>
+                              v-bind:attachment="attachment" />
         <MediaBlockImage v-if="mediaBlock.mediaType === MediaTypeEnum.Image"
                          v-on:updatePublishingStatus="updatePublishingStatus"
-                         v-bind:image="image"/>
-        <MediaBlockVideo v-if="mediaBlock.mediaType === MediaTypeEnum.Video"
+                         v-bind:image="image" />
+
+        <MediaBlockVideo v-if="mediaBlock.mediaType === MediaTypeEnum.Video && contributeResourceAVFlag"
                          v-on:updatePublishingStatus="updatePublishingStatus"
-                         v-bind:video="video"/>
+                         v-bind:video="video" />
 
+        <div v-if="!contributeResourceAVFlag && (mediaBlock.mediaType === MediaTypeEnum.Video || mediaBlock.mediaType === MediaTypeEnum.Attachment)">
+            <div v-html="audioVideoUnavailableView"></div>
+        </div>        
     </div>
 </template>
 
@@ -23,6 +27,7 @@
     import MediaBlockImage from "./MediaBlockImage.vue";
     import MediaBlockVideo from "./MediaBlockVideo.vue";
     import Tick from "../../../globalcomponents/Tick.vue";
+    import { resourceData } from '../../../data/resource';
 
     import { AttachmentModel } from "../../../models/contribute-resource/blocks/attachmentModel";
     import { FileUploadType } from '../../../helpers/fileUpload';
@@ -43,13 +48,17 @@
         props: {
             mediaBlock: { type: Object } as PropOptions<MediaBlockModel>,
         },
-        data(){
+        data() {
             return {
                 FileUploadType: FileUploadType,
                 FileStore: FileStore /* It looks like FileStore isn't used, but we need it to be exposed here to allow Vue to make the files list reactive */,
                 MediaTypeEnum: MediaTypeEnum,
+                contributeResourceAVFlag: true
             }
         },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
         computed: {
             attachment(): AttachmentModel {
                 return this.mediaBlock.attachment;
@@ -59,11 +68,19 @@
             },
             video(): VideoMediaModel {
                 return this.mediaBlock.video;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
             }
         },
         methods: {
             updatePublishingStatus() {
                 this.mediaBlock.updatePublishingStatus();
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
             }
         }
     })

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue

@@ -501,6 +501,7 @@
                 localScormDetail: null as ScormResourceModel,
                 showError: false,
                 errorMessage: '',
+                contributeResourceAVFlag: true,
             }
         },
         computed: {
@@ -608,9 +609,6 @@
             hierarchyEditLoaded(): boolean {
                 return this.$store.state.hierarchyEditLoaded;
             },
-            contributeResourceAVFlag(): boolean {
-                return this.$store.state.contributeAVResourceFlag;
-            },
             audioVideoUnavailableView(): string {
                 return this.$store.state.getAVUnavailableView;
             },
@@ -631,6 +629,7 @@
             if (!this.$store.state.fileTypes) {
                 this.$store.commit('populateFileTypes');
             }
+            this.getContributeResAVResourceFlag();
             this.uploadResourceTypes = await resourceData.getUploadResourceTypes();
             const allResourceTypes = this.uploadResourceTypes.slice();
             const allowedTypes = this.resourceTypesSupported.split(',');
@@ -647,6 +646,11 @@
             this.localScormDetail = _.cloneDeep(this.scormDetail);
         },
         methods: {
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            },
             setSpecificContentLocalValid(val: boolean) {
                 this.specificContentLocalValid = val;
             },
@@ -906,7 +910,7 @@
                         if (this.selectedResourceType != ResourceType.UNDEFINED) {
                             let fileExtension = this.uploadingFile.name.split(".").pop();
                             let resourceType: ResourceType = ResourceType.GENERICFILE;
-                           if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.SCORM) {
+                            if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.SCORM) {
                                 resourceType = ResourceType.SCORM;
                             } else if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.HTML) {
                                 resourceType = ResourceType.HTML;

LearningHub.Nhs.WebUI/Scripts/vuesrc/helpers/fileUpload.ts

@@ -324,7 +324,17 @@ export const getMediaTypeFromFileExtension = function (fileExtension: string): M
         return MediaTypeEnum.Attachment;
     }
 };
-
+export const getMediaTypeFromFileExtensionContributeCaseOrAssessment = function (fileExtension: string): MediaTypeEnum {
+    if (isIncludedInListIgnoringCase(IMAGE_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Image;
+    } else if (isIncludedInListIgnoringCase(VIDEO_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Video;
+    } else if (isIncludedInListIgnoringCase(AUDIO_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Audio;
+    } else {
+        return MediaTypeEnum.Attachment;
+    }
+};
 export const getUploadTypeFromMediaType = function (mediaType: MediaTypeEnum): FileUploadType {
     switch (mediaType) {
         case MediaTypeEnum.Attachment:

LearningHub.Nhs.WebUI/Scripts/vuesrc/models/contribute-resource/blocks/mediaTypeEnum.ts

@@ -3,4 +3,5 @@ export enum MediaTypeEnum {
     Attachment = 0,
     Image = 1,
     Video = 2,
+    Audio = 3,
 }