Add functionality for 'mark audio as needing update'.

oppia · seanlip · Aug 5, 2017 · Aug 1, 2017 · Aug 2, 2017 · Aug 2, 2017
commit 6a3e4db251470a42c44ad2932a07b312e3c3125b
diff --git a/core/templates/dev/head/components/forms/AudioTranslationsEditorDirective.js b/core/templates/dev/head/components/forms/AudioTranslationsEditorDirective.js
@@ -22,7 +22,12 @@ oppia.directive('audioTranslationsEditor', [
       restrict: 'E',
       scope: {
         subtitledHtml: '=',
+        // A function that must be called at the outset of every attempt to
+        // edit, even if the action is not subsequently taken through to
+        // completion.
         getOnStartEditFn: '&onStartEdit',
+        // A function that must be called on completion of an action which
+        // changes the audio translation data in a persistent way.
         getOnChangeFn: '&onChange'
       },
       templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
@@ -48,6 +53,12 @@ oppia.directive('audioTranslationsEditor', [
               explorationId, filename);
           };
 
+          $scope.toggleNeedsUpdateAttribute = function(languageCode) {
+            $scope.getOnStartEditFn()();
+            $scope.subtitledHtml.toggleNeedsUpdateAttribute(languageCode);
+            $scope.getOnChangeFn()();
+          };
+
           $scope.openAddAudioTranslationModal = function() {
             var allowedAudioLanguageCodes = (
               LanguageUtilService.getComplementAudioLanguageCodes(

diff --git a/core/templates/dev/head/components/forms/audio_translations_editor_directive.html b/core/templates/dev/head/components/forms/audio_translations_editor_directive.html
@@ -4,17 +4,23 @@
     <h4 class="oppia-audio-translations-header">Audio Translations</h4>
     <div ng-repeat="(languageCode, audioTranslation) in subtitledHtml.getBindableAudioTranslations()">
       <div class="row">
-        <div class="col-lg-2 col-md-2 col-sm-2 oppia-audio-language-description">
+        <div class="col-lg-3 col-md-3 col-sm-3 audio-language-description">
+          <span class="needs-update-marker"
+                ng-attr-tooltip="<[audioTranslation.needsUpdate ? 'Audio might not match text. Delete and reupload the file, or click to unflag.' : 'Click to mark this audio translation as not matching text.']>"
+                ng-click="toggleNeedsUpdateAttribute(languageCode)">
+            <i ng-if="audioTranslation.needsUpdate" class="material-icons needs-update">&#xE002;</i>
+            <i ng-if="!audioTranslation.needsUpdate" class="material-icons is-current">&#xE876;</i>
+          </span>
           <[getAudioLanguageDescription(languageCode)]>
         </div>
-        <div class="col-lg-9 col-md-9 col-sm-9">
+        <div class="col-lg-8 col-md-8 col-sm-8">
           <audio controls preload="none" controlsList="nodownload">
             <source ng-src="<[getAudioTranslationFullUrl(audioTranslation.filename)]>" type="audio/mpeg">
           </audio>
         </div>
         <div class="col-lg-1 col-md-1 col-sm-1">
           <button type="button"
-                  class="oppia-delete-audio-translation-button oppia-transition-200"
+                  class="delete-audio-translation-btn oppia-transition-200"
                   ng-click="openDeleteAudioTranslationModal(languageCode)"
                   title="Delete audio translation"
                   ng-if="isEditable()">
@@ -25,8 +31,8 @@ <h4 class="oppia-audio-translations-header">Audio Translations</h4>
     </div>
   </span>
 
-  <span class="oppia-add-audio-translation-btn-container" ng-if="isEditable() && !subtitledHtml.isFullyTranslated()">
-    <button ng-click="openAddAudioTranslationModal()" class="oppia-add-audio-translation-btn">
+  <span class="add-audio-translation-btn-container" ng-if="isEditable() && !subtitledHtml.isFullyTranslated()">
+    <button ng-click="openAddAudioTranslationModal()" class="add-audio-translation-btn">
       <i class="material-icons md-18">&#xE050;</i>
       Add audio translation...
     </button>
@@ -39,36 +45,49 @@ <h4 class="oppia-audio-translations-header">Audio Translations</h4>
     font-weight: bold;
   }
 
-  audio-translations-editor .oppia-audio-language-description {
+  audio-translations-editor .audio-language-description {
     margin: 6px 0;
   }
 
-  audio-translations-editor .oppia-delete-audio-translation-button {
+  audio-translations-editor .needs-update-marker {
+    cursor: pointer;
+  }
+  audio-translations-editor .needs-update-marker i {
+    font-size: 18px;
+  }
+  audio-translations-editor .needs-update-marker i.needs-update {
+    color: red;
+  }
+  audio-translations-editor .needs-update-marker i.is-current {
+    color: green;
+  }
+
+  audio-translations-editor .delete-audio-translation-btn {
     background: none;
     border: 0;
     color: #000;
     cursor: pointer;
     margin: 6px 0;
     opacity: 0.5;
     position: absolute;
-    right: -6px;
+    right: -14px;
   }
-  audio-translations-editor .oppia-delete-audio-translation-button:hover {
+  audio-translations-editor .delete-audio-translation-btn:hover {
     opacity: 1;
   }
 
-  audio-translations-editor .oppia-add-audio-translation-btn-container {
+  audio-translations-editor .add-audio-translation-btn-container {
     bottom: 6px;
     color: #333;
     position: absolute;
     right: 24px;
   }
-  audio-translations-editor .oppia-add-audio-translation-btn-container:hover,
-  audio-translations-editor .oppia-add-audio-translation-btn-container:focus {
+  audio-translations-editor .add-audio-translation-btn-container:hover,
+  audio-translations-editor .add-audio-translation-btn-container:focus {
     color: #0844aa;
   }
 
-  audio-translations-editor .oppia-add-audio-translation-btn {
+  audio-translations-editor .add-audio-translation-btn {
     background: none repeat scroll 0 0 transparent;
     border: none;
     font-size: 12px;

diff --git a/...templates/dev/head/components/forms/mark_all_audio_as_needing_update_modal_directive.html b/...templates/dev/head/components/forms/mark_all_audio_as_needing_update_modal_directive.html
@@ -0,0 +1,14 @@
+<div class="modal-header">
+  <h3>Update Audio Translations</h3>
+</div>
+
+<div class="modal-body">
+  <p>
+    Would you like to flag all existing audio translations as 'may not match content'?
+  </p>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-default" ng-click="cancel()">No</button>
+  <button class="btn btn-default" ng-click="flagAll()">Yes</button>
+</div>
diff --git a/core/templates/dev/head/domain/exploration/AudioTranslationObjectFactory.js b/core/templates/dev/head/domain/exploration/AudioTranslationObjectFactory.js
@@ -28,6 +28,10 @@ oppia.factory('AudioTranslationObjectFactory', [function() {
     this.needsUpdate = true;
   };
 
+  AudioTranslation.prototype.toggleNeedsUpdateAttribute = function() {
+    this.needsUpdate = !this.needsUpdate;
+  };
+
   AudioTranslation.prototype.toBackendDict = function() {
     return {
       filename: this.filename,

diff --git a/core/templates/dev/head/domain/exploration/SubtitledHtmlObjectFactory.js b/core/templates/dev/head/domain/exploration/SubtitledHtmlObjectFactory.js
@@ -45,7 +45,7 @@ oppia.factory('SubtitledHtmlObjectFactory', [
       return this._audioTranslations[languageCode];
     };
 
-    SubtitledHtml.prototype.markAudioAsNeedingUpdate = function() {
+    SubtitledHtml.prototype.markAllAudioAsNeedingUpdate = function() {
       for (var languageCode in this._audioTranslations) {
         this._audioTranslations[languageCode].markAsNeedingUpdate();
       }
@@ -82,6 +82,11 @@ oppia.factory('SubtitledHtmlObjectFactory', [
       delete this._audioTranslations[languageCode];
     };
 
+    SubtitledHtml.prototype.toggleNeedsUpdateAttribute = function(
+        languageCode) {
+      this._audioTranslations[languageCode].toggleNeedsUpdateAttribute();
+    };
+
     SubtitledHtml.prototype.hasNoHtml = function() {
       return !this._html;
     };

diff --git a/core/templates/dev/head/pages/exploration_editor/editor_tab/StateContentEditorDirective.js b/core/templates/dev/head/pages/exploration_editor/editor_tab/StateContentEditorDirective.js
@@ -34,11 +34,11 @@ oppia.directive('stateContentEditor', [
         '/pages/exploration_editor/editor_tab/' +
         'state_content_editor_directive.html'),
       controller: [
-        '$scope', 'stateContentService', 'editabilityService',
+        '$scope', '$modal', 'stateContentService', 'editabilityService',
         'editorFirstTimeEventsService', 'explorationInitStateNameService',
         'editorContextService',
         function(
-            $scope, stateContentService, editabilityService,
+            $scope, $modal, stateContentService, editabilityService,
             editorFirstTimeEventsService, explorationInitStateNameService,
             editorContextService) {
           $scope.HTML_SCHEMA = {
@@ -54,6 +54,32 @@ oppia.directive('stateContentEditor', [
             $scope.contentEditorIsOpen = false;
           };
 
+          var openMarkAllAudioAsNeedingUpdateModal = function() {
+            $modal.open({
+              templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
+                '/components/forms/' +
+                'mark_all_audio_as_needing_update_modal_directive.html'),
+              backdrop: true,
+              resolve: {},
+              controller: [
+                '$scope', '$modalInstance',
+                function($scope, $modalInstance) {
+                  $scope.flagAll = function() {
+                    $modalInstance.close();
+                  };
+
+                  $scope.cancel = function() {
+                    $modalInstance.dismiss('cancel');
+                  };
+                }
+              ]
+            }).result.then(function() {
+              var currentStateContent = stateContentService.displayed;
+              currentStateContent.markAllAudioAsNeedingUpdate();
+              stateContentService.saveDisplayedValue();
+            });
+          };
+
           $scope.$on('externalSave', function() {
             if ($scope.contentEditorIsOpen) {
               saveContent();
@@ -76,6 +102,9 @@ oppia.directive('stateContentEditor', [
           $scope.onSaveContentButtonClicked = function() {
             editorFirstTimeEventsService.registerFirstSaveContentEvent();
             saveContent();
+            if (stateContentService.savedMemento.hasAudioTranslations()) {
+              openMarkAllAudioAsNeedingUpdateModal();
+            }
             $scope.getOnSaveContentFn()();
           };
 
@@ -85,16 +114,14 @@ oppia.directive('stateContentEditor', [
           };
 
           $scope.onAudioTranslationsStartEditAction = function() {
+            // Close the content editor and save all existing changes to the
+            // HTML.
             if ($scope.contentEditorIsOpen) {
               saveContent();
             }
           };
 
           $scope.onAudioTranslationsEdited = function() {
-            // The HTML should be unchanged, because any "start edit" action for
-            // the audio translations would have called
-            // $scope.onAudioTranslationsStartEditAction() and closed the open
-            // HTML editor.
             stateContentService.saveDisplayedValue();
           };
         }

diff --git a/core/templates/dev/head/pages/exploration_editor/feedback_tab/FeedbackTab.js b/core/templates/dev/head/pages/exploration_editor/feedback_tab/FeedbackTab.js
@@ -224,7 +224,7 @@ oppia.controller('FeedbackTab', [
                 stateName, stateDict);
               state.content.setHtml(suggestion.suggestion_html);
               if (result.audioUpdateRequired) {
-                state.content.markAudioAsNeedingUpdate();
+                state.content.markAllAudioAsNeedingUpdate();
               }
               explorationData.data.version += 1;
               explorationStatesService.setState(stateName, state);