Skip to content

Commit

Permalink
Learner audio updates (oppia#3705)
Browse files Browse the repository at this point in the history 
* Add audio not available message

* lint

* display audio might not match text message to learner when audio translation flagged

* suggested changes

* translate tooltip

* remove language code from scope

* add param to translation

* add to qqq
  • Loading branch information
@tjiang11 @seanlip
tjiang11 authored and seanlip committed Aug 5, 2017
1 parent 3507724 commit 762d91a
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 35 deletions.
2 changes: 2 additions & 0 deletions assets/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,8 @@
"I18N_MODAL_CANCEL_BUTTON": "Cancel",
"I18N_ONE_SUBSCRIBER_TEXT": "You have 1 subscriber.",
"I18N_PLAYER_AUDIO_LANGUAGE": "Language",
"I18N_PLAYER_AUDIO_MIGHT_NOT_MATCH_TEXT": "Audio might not fully match text",
"I18N_PLAYER_AUDIO_NOT_AVAILABLE_IN": "Not available in <[languageDescription]>",
"I18N_PLAYER_AUDIO_TRANSLATION_SETTINGS": "Audio Translation Settings",
"I18N_PLAYER_BACK": "Back",
"I18N_PLAYER_BACK_TO_COLLECTION": "Back to collection",
Expand Down
2 changes: 2 additions & 0 deletions assets/i18n/qqq.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,8 @@
"I18N_MODAL_CANCEL_BUTTON": "Text that is displayed in a button of a modal. On clicking it the modal closes.\n{{Identical|Cancel}}",
"I18N_ONE_SUBSCRIBER_TEXT": "Text displayed under the subscribers tab in creator dashboard. If the creator has one subscriber, this text is displayed which informs him/her about the same.",
"I18N_PLAYER_AUDIO_LANGUAGE": "Text displayed in the audio translation settings modal, asking the learner to pick what language they want to listen to audio translations in.",
"I18N_PLAYER_AUDIO_MIGHT_NOT_MATCH_TEXT": "Text displayed under the audio controls to the learner when the audio translation for the current language is flagged as needing an update by the creator.",
"I18N_PLAYER_AUDIO_NOT_AVAILABLE_IN": "Text displayed in a tooltip over the speaker icon to play audio when there is no audio available in the selected language.",
"I18N_PLAYER_AUDIO_TRANSLATION_SETTINGS": "Title displayed at the top of the audio translation settings modal in the learner view.",
"I18N_PLAYER_BACK": "Text read to users with screenreaders when they navigate through an exploration. - This labels the leftward-pointing arrow that is used to go backward by one card in the exploration.\n{{Identical|Back}}",
"I18N_PLAYER_BACK_TO_COLLECTION": "Text shown to users after they complete an exploration in a collection. - This labels the link that is used to return back to the home page of the collection the user is currently exploring",
Expand Down
41 changes: 30 additions & 11 deletions core/templates/dev/head/pages/exploration_player/AudioControlsDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,40 @@ oppia.directive('audioControls', [
'audio_controls_directive.html'),
controller: [
'$scope', 'AudioTranslationManagerService', 'AudioPlayerService',
'LanguageUtilService',
function(
$scope, AudioTranslationManagerService, AudioPlayerService) {
$scope, AudioTranslationManagerService, AudioPlayerService,
LanguageUtilService) {
// This ID is passed in to AudioPlayerService as a means of
// distinguishing which audio directive is currently playing audio.
var directiveId = Math.random().toString(36).substr(2, 10);

var currentAudioLanguageCode =
AudioTranslationManagerService
.getCurrentAudioLanguageCode();

$scope.currentAudioLanguageDescription =
AudioTranslationManagerService
.getCurrentAudioLanguageDescription();

var getCurrentAudioTranslation = function() {
return $scope.getAudioTranslations()[currentAudioLanguageCode];
};

$scope.AudioPlayerService = AudioPlayerService;

$scope.IMAGE_URL_REWIND_AUDIO_BUTTON = (
UrlInterpolationService.getStaticImageUrl(
'/icons/rewind-five.svg'));

$scope.isAudioAvailableInCurrentLanguage = function() {
return Boolean(getCurrentAudioTranslation());
};

$scope.doesCurrentAudioTranslationNeedUpdate = function() {
return getCurrentAudioTranslation().needsUpdate;
};

$scope.playPauseAudioTranslation = function() {
// TODO(tjiang11): Change from on-demand loading to pre-loading.

Expand Down Expand Up @@ -73,15 +95,7 @@ oppia.directive('audioControls', [
};

var loadAndPlayAudioTranslation = function() {
var currentAudioLanguageCode =
AudioTranslationManagerService.getCurrentAudioLanguageCode();

// TODO(tjiang11): If audio translation is not available
// in the current language, then inform the learner with
// a piece of text below the audio controls.
var audioTranslation =
$scope.getAudioTranslations()[currentAudioLanguageCode];

var audioTranslation = getCurrentAudioTranslation();
if (audioTranslation) {
AudioPlayerService.load(
audioTranslation.filename, directiveId).then(function() {
Expand All @@ -96,7 +110,12 @@ oppia.directive('audioControls', [

$scope.openAudioTranslationSettings = function() {
AudioTranslationManagerService
.showAudioTranslationSettingsModal();
.showAudioTranslationSettingsModal(function(newLanguageCode) {
currentAudioLanguageCode = newLanguageCode;
$scope.currentAudioLanguageDescription =
LanguageUtilService.getAudioLanguageDescription(
newLanguageCode);
});
};
}]
}
Expand Down
16 changes: 12 additions & 4 deletions core/templates/dev/head/pages/exploration_player/AudioTranslationManagerService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@

oppia.factory('AudioTranslationManagerService', [
'$modal', 'AudioPlayerService', 'UrlInterpolationService',
'LanguageUtilService',
function(
$modal, AudioPlayerService, UrlInterpolationService) {
$modal, AudioPlayerService, UrlInterpolationService,
LanguageUtilService) {
var _currentAudioLanguageCode = null;
var _allLanguageCodesInExploration = null;

Expand All @@ -43,7 +45,8 @@ oppia.factory('AudioTranslationManagerService', [
}
};

var _showAudioTranslationSettingsModal = function() {
var _showAudioTranslationSettingsModal = function(
onLanguageChangedCallback) {
$modal.open({
templateUrl: UrlInterpolationService.getDirectiveTemplateUrl(
'/pages/exploration_player/' +
Expand Down Expand Up @@ -83,6 +86,7 @@ oppia.factory('AudioTranslationManagerService', [
_currentAudioLanguageCode = result.languageCode;
AudioPlayerService.stop();
AudioPlayerService.clear();
onLanguageChangedCallback(_currentAudioLanguageCode);
}
});
};
Expand All @@ -94,11 +98,15 @@ oppia.factory('AudioTranslationManagerService', [
getCurrentAudioLanguageCode: function() {
return _currentAudioLanguageCode;
},
getCurrentAudioLanguageDescription: function() {
return LanguageUtilService.getAudioLanguageDescription(
_currentAudioLanguageCode);
},
getAllLanguageCodesInExploration: function() {
return _allLanguageCodesInExploration;
},
showAudioTranslationSettingsModal: function() {
return _showAudioTranslationSettingsModal();
showAudioTranslationSettingsModal: function(onLanguageChangedCallback) {
return _showAudioTranslationSettingsModal(onLanguageChangedCallback);
}
};
}]);
50 changes: 36 additions & 14 deletions core/templates/dev/head/pages/exploration_player/audio_controls_directive.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,50 @@
<i class="fa fa-cog audio-control-button-icon"
ng-if="extraAudioControlsAreShown"
ng-click="openAudioTranslationSettings()"></i>
<img class="audio-control-button-image"
style="margin-top: 4px"
<div class="audio-controls">
<i class="fa fa-cog audio-controls-button-icon"
ng-if="extraAudioControlsAreShown"
ng-src="<[IMAGE_URL_REWIND_AUDIO_BUTTON]>"
ng-click="rewindAudioFiveSec()">
<i class="fa fa-volume-off audio-control-button-icon"
style="min-width: 24px"
ng-click="playPauseAudioTranslation()"
ng-class="{'fa-volume-off': !AudioPlayerService.isPlaying(), 'fa-volume-up': AudioPlayerService.isPlaying()}">
ng-click="openAudioTranslationSettings()"></i>
<img class="audio-controls-button-image"
style="margin-top: 2px"
ng-if="extraAudioControlsAreShown"
ng-src="<[IMAGE_URL_REWIND_AUDIO_BUTTON]>"
ng-click="rewindAudioFiveSec()">
<i class="fa audio-controls-button-icon"
style="min-width: 24px; text-align: left;"
ng-click="playPauseAudioTranslation()"
ng-class="{'fa-volume-off': !AudioPlayerService.isPlaying(), 'fa-volume-up': AudioPlayerService.isPlaying(), 'audio-controls-audio-not-available': !isAudioAvailableInCurrentLanguage()}"
tooltip="<[!isAudioAvailableInCurrentLanguage() ? ('I18N_PLAYER_AUDIO_NOT_AVAILABLE_IN' | translate:{languageDescription:currentAudioLanguageDescription}) : '']>"
tooltip-append-to-body="true"></i>
</div>
<span ng-if="extraAudioControlsAreShown && isAudioAvailableInCurrentLanguage() && doesCurrentAudioTranslationNeedUpdate()" class="audio-controls-message" translate="I18N_PLAYER_AUDIO_MIGHT_NOT_MATCH_TEXT"></span>

<style>
.audio-control-button-icon {
.audio-controls-button-icon {
font-size: 1.5em;
vertical-align: middle;
}

.audio-control-button-image {
.audio-controls-button-image {
width: 21px;
height: 21px;
}

.audio-control-button:hover {
.audio-controls-button-icon:hover, .audio-controls-button-image:hover {
cursor: pointer;
}

.audio-controls-audio-not-available {
color: gray;
}

.audio-controls {
float: right;
text-align: right;
width: 100%;
}

.audio-controls-message {
float: right;
font-size: 12px;
font-style: italic;
}

</style>
4 changes: 0 additions & 4 deletions core/templates/dev/head/pages/exploration_player/tutor_card_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,10 +246,6 @@
top: 14px;
}

.conversation-skin-audio-controls {
float: right;
}

@media screen and (max-width: 959px) {
.conversation-skin-tutor-card .instructions-button {
background-color: #0D48A1;
Expand Down
4 changes: 2 additions & 2 deletions data/explorations/audio_test/audio_test.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ states:
hi-en:
filename: 'test_audio_2_hi_en.mp3'
file_size_bytes: 3
needs_update: false
needs_update: true
html: Congratulations, you have finished!
interaction:
answer_groups: []
Expand All @@ -43,7 +43,7 @@ states:
hi-en:
filename: 'test_audio_3_hi_en.mp3'
file_size_bytes: 2
needs_update: false
needs_update: true
html: <p>Try typing some code.</p>
interaction:
answer_groups:
Expand Down

0 comments on commit 762d91a

Please sign in to comment.