From 5de38921ffe814549b70c17981f35c126888a0db Mon Sep 17 00:00:00 2001
From: Liana N Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Tue, 6 Sep 2022 16:01:45 -0500
Subject: [PATCH 1/3] =?UTF-8?q?Sets=20=E2=80=98has=20captions=20or=20subti?=
 =?UTF-8?q?tles=20accessibility=E2=80=99=20label=20if=20uploaded=20subtitl?=
 =?UTF-8?q?e=20file=20language=20is=20the=20same=20as=20the=20video=20file?=
 =?UTF-8?q?=20language?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/edit/DetailsTabView.vue        | 13 ++++++--
 .../supplementaryLists/SubtitlesList.vue      |  4 +++
 .../supplementaryLists/SupplementaryList.vue  | 30 ++++++++++++++++---
 .../frontend/shared/constants.js              |  2 +-
 .../shared/views/LanguageDropdown.vue         |  7 ++++-
 .../frontend/shared/vuex/file/actions.js      |  1 +
 6 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 3fe8ae61ec..2f92856869 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -337,7 +337,10 @@
       <!-- Subtitles -->
       <VLayout v-if="videoSelected" row wrap class="section">
         <VFlex xs12>
-          <SubtitlesList :nodeId="firstNode.id" />
+          <SubtitlesList
+            :nodeId="firstNode.id"
+            @addFile="subtitleFileLanguageComparison"
+          />
         </VFlex>
       </VLayout>
 
@@ -383,7 +386,7 @@
   import VisibilityDropdown from 'shared/views/VisibilityDropdown';
   import Checkbox from 'shared/views/form/Checkbox';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-  import { NEW_OBJECT, FeatureFlagKeys } from 'shared/constants';
+  import { NEW_OBJECT, FeatureFlagKeys, AccessibilityCategories } from 'shared/constants';
   import { validate as validateCompletionCriteria } from 'shared/leUtils/CompletionCriteria';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
@@ -801,6 +804,12 @@
           eventLabel: 'File',
         });
       },
+      subtitleFileLanguageComparison(file) {
+        if (this.oneSelected && this.language === file.language) {
+          this.accessibility = [...this.accessibility, AccessibilityCategories.CAPTIONS_SUBTITLES];
+          console.log({ ...this.accessibility });
+        }
+      },
     },
     $trs: {
       basicInfoHeader: 'Basic information',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
index 8de6f510cc..c83c8c7f75 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
@@ -11,6 +11,7 @@
       :readonly="readonly"
       :nodeId="nodeId"
       @upload="trackUpload"
+      @addFile="addFileHandler"
     />
   </div>
 
@@ -53,6 +54,9 @@
           eventLabel: 'Related file',
         });
       },
+      addFileHandler(f) {
+        this.$emit('addFile', f);
+      },
     },
     $trs: {
       subtitlesHeader: 'Captions and subtitles',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
index d10af80944..b5c7764eb9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <VList two-line>
+  <VList>
     <SupplementaryItem
       v-for="file in files"
       :key="file.id"
@@ -18,7 +18,7 @@
       @upload="$emit('upload')"
     >
       <template #default="{ openFileDialog }">
-        <VListTile @click.stop>
+        <VListTile inactive class="languageTile py-2">
           <VListTileContent v-if="!addingFile">
             <ActionLink
               data-test="add-file"
@@ -26,10 +26,12 @@
               @click="addingFile = true"
             />
           </VListTileContent>
-          <VListTileContent v-else style="max-width: 250px; height: auto;">
+          <VListTileContent v-else class="captionLanguageDropdown">
             <LanguageDropdown
+              id="captionLanguage"
               v-model="selectedLanguage"
               data-test="select-language"
+              dropAbove
               :excludeLanguages="currentLanguages"
               hide-details
             />
@@ -117,7 +119,10 @@
     methods: {
       ...mapActions('file', ['updateFile', 'deleteFile']),
       add(file) {
-        this.makeFile(file).then(this.reset);
+        this.makeFile(file).then(f => {
+          this.$emit('addFile', f);
+          this.reset();
+        });
       },
       makeFile(file) {
         return this.updateFile({
@@ -142,3 +147,20 @@
   };
 
 </script>
+<style lang="less" scoped>
+
+  .languageTile:hover {
+    background-color: var(--v-greyBackground-base);
+  }
+
+  /deep/ .languageTile > .v-list__tile {
+    height: 56px;
+  }
+
+  .captionLanguageDropdown {
+    max-width: 250px;
+    height: auto;
+    overflow: visible;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/constants.js b/contentcuration/contentcuration/frontend/shared/constants.js
index fbc0b23b1f..8203c1eff4 100644
--- a/contentcuration/contentcuration/frontend/shared/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/constants.js
@@ -196,7 +196,7 @@ export const ContentModalities = {
 export const AccessibilityCategoriesMap = {
   // Note: audio is not included, as it is rendered in the UI differently.
   document: ['ALT_TEXT', 'HIGH_CONTRAST', 'TAGGED_PDF'],
-  video: ['SIGN_LANGUAGE', 'AUDIO_DESCRIPTION'],
+  video: ['SIGN_LANGUAGE', 'AUDIO_DESCRIPTION', 'CAPTIONS_SUBTITLES'],
   exercise: ['ALT_TEXT'],
   html5: ['ALT_TEXT', 'HIGH_CONTRAST'],
 };
diff --git a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
index 4c7984e96a..84f199cefa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
@@ -20,7 +20,7 @@
     :menu-props="menuProps"
     :multiple="multiple"
     :chips="multiple"
-    attach="#language"
+    :attach="$attrs.id ? `#${$attrs.id}` : '.language-dropdown'"
     @change="input = ''"
     @focus="$emit('focus')"
   >
@@ -73,6 +73,10 @@
         type: Boolean,
         default: false,
       },
+      dropAbove: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -92,6 +96,7 @@
         return {
           minWidth: 300,
           maxWidth: 300,
+          top: this.dropAbove,
         };
       },
       languages() {
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
index 3988e35abe..1a63391c67 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
@@ -99,6 +99,7 @@ export function updateFile(context, { id, ...payload }) {
         }
       }
     }
+    return { id, ...fileData };
   });
 }
 

From 522bdabe1bc5c0b6b2db3e774fa34be63fdd89bc Mon Sep 17 00:00:00 2001
From: Liana N Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:52:11 -0500
Subject: [PATCH 2/3] Removed debugging statement

---
 .../frontend/channelEdit/components/edit/DetailsTabView.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 2f92856869..1ec821667c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -807,7 +807,6 @@
       subtitleFileLanguageComparison(file) {
         if (this.oneSelected && this.language === file.language) {
           this.accessibility = [...this.accessibility, AccessibilityCategories.CAPTIONS_SUBTITLES];
-          console.log({ ...this.accessibility });
         }
       },
     },

From 118e7c17a02a7f76faeb064d0d83130cfef96892 Mon Sep 17 00:00:00 2001
From: Liana N Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Thu, 8 Sep 2022 15:03:17 -0500
Subject: [PATCH 3/3] Removed unused variable

---
 .../frontend/channelEdit/components/edit/DetailsTabView.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 099468195e..aaea921f17 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -388,7 +388,6 @@
   import Checkbox from 'shared/views/form/Checkbox';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { NEW_OBJECT, FeatureFlagKeys, AccessibilityCategories } from 'shared/constants';
-  import { validate as validateCompletionCriteria } from 'shared/leUtils/CompletionCriteria';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   // Define an object to act as the place holder for non unique values.