Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enabling/disabling of interactive transcripts #47

Merged
merged 2 commits into from
Jan 3, 2017
Merged

Enabling/disabling of interactive transcripts #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac6f434
Enabling/disabling of interactive transcripts
sendr Jan 3, 2017
8de712f
Merge branch 'dev' of github.com:raccoongang/xblock-video into featur…
sendr Jan 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions video_xblock/static/css/videojs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
margin: 0;
display: flex;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need flex here?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make video container shrink when side-transcripts are displayed, I guess.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't we need to set flex rule on a child node?

Copy link

@z4y4ts z4y4ts Jan 3, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This solution was suggested by @madeira and is working. Setting display: flex; on a video container doesn't work as far as I can see.

}

.video-js .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
Expand Down Expand Up @@ -318,3 +319,38 @@ body {
background-color: #171a1b;
color: #0ea6ec;
}

#transcript {
max-height: 100%;
overflow: scroll;
padding: 0 0 0 20px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
background-color: inherit;
}

.transcript-line {
margin-bottom: 8px;
border: 0;
padding: 0;
color: #0074b5;
line-height: 1.41575em;
}

.transcript-line.is-active {
color: #333;
font-weight: 700;
}

.transcript-line:hover {
text-decoration: underline;
cursor: pointer;
}

.transcript-timestamp {
display: none;
}

.is-hidden {
display: none !important;
}
6 changes: 5 additions & 1 deletion video_xblock/static/js/player_state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ var player_state = {
'currentTime': {{ player_state.current_time }},
'playbackRate': {{ player_state.playback_rate }},
'muted': {{ player_state.muted | yesno:"true,false" }},
'transcriptsEnabled': {{ player_state.transcripts_enabled | yesno:"true,false" }}
};

var xblockUsageId = window.location.hash.slice(1);
Expand All @@ -46,6 +47,7 @@ var setInitialState = function (player, state) {
.volume(state.volume)
.muted(state.muted)
.playbackRate(state.playbackRate);
player.transcriptsEnabled = state.transcriptsEnabled;
};

/**
Expand All @@ -59,6 +61,7 @@ var saveState = function(){
'currentTime': player.ended()? 0 : Math.floor(player.currentTime()),
'playbackRate': player.playbackRate(),
'muted': player.muted(),
'transcriptsEnabled': player.transcriptsEnabled
};

if (JSON.stringify(new_state) !== JSON.stringify(player_state)) {
Expand Down Expand Up @@ -97,7 +100,8 @@ domReady(function() {
.on('ratechange', saveState)
.on('play', saveState)
.on('pause', saveState)
.on('ended', saveState);
.on('ended', saveState)
.on('transcriptstatechanged', saveState);
});

});
4 changes: 2 additions & 2 deletions video_xblock/static/js/toggle-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ domReady(function() {
onClick: function onClick(event) {
var el = event.currentTarget;
el.classList.toggle('vjs-control-enabled');
var _event = this.hasClass('vjs-control-enabled') ? this.enabledEventName() : this.disabledEventName();
this.trigger(_event);
var eventName = this.hasClass('vjs-control-enabled') ? this.enabledEventName() : this.disabledEventName();
this.player_.trigger(eventName);
},

});
Expand Down
25 changes: 23 additions & 2 deletions video_xblock/static/js/videojs-transcript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,45 @@ domReady(function() {

// fire up the plugin
var transcript = this.transcript({
'showTrackSelector': false
'showTrackSelector': false,
'showTitle': false
});

// attach the widget to the page
var transcriptContainer = document.getElementById('transcript');

// Show or hide the transcripts block depending on the transcript state
if (!this.transcriptsEnabled){
transcriptContainer.className += " is-hidden";
};
transcriptContainer.appendChild(transcript.el());

this.on('transcriptenabled', function(){
transcriptContainer.classList.toggle('is-hidden');
this.transcriptsEnabled = true;
this.trigger('transcriptstatechanged');
});
this.on('transcriptdisabled', function(){
transcriptContainer.classList.toggle('is-hidden');
this.transcriptsEnabled = false;
this.trigger('transcriptstatechanged');
});

this.toggleButton({
style: "fa-cc",
enabledEvent: "captionenabled",
disabledEvent: "captiondisabled",
cssClasses: "vjs-custom-caption-button vjs-control",
});
var cssClasses = "vjs-custom-transcript-button vjs-control";
if (this.transcriptsEnabled){
cssClasses += ' vjs-control-enabled';
};
this.toggleButton({
style: "fa-quote-left",
enabledEvent: "transcriptenabled",
disabledEvent: "transcriptdisabled",
cssClasses: "vjs-custom-transcript-button vjs-control",
cssClasses: cssClasses,
});
});
});
13 changes: 11 additions & 2 deletions video_xblock/video_xblock.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,12 @@ class VideoXBlock(StudioEditableXBlockMixin, XBlock):
help=_("Video muted or not")
)

transcripts_enabled = Boolean(
default=False,
scope=Scope.preferences,
help=_("Transcript is enabled or not")
)

handout = String(
default='',
scope=Scope.content,
Expand All @@ -142,7 +148,7 @@ class VideoXBlock(StudioEditableXBlockMixin, XBlock):

editable_fields = ('display_name', 'href', 'start_time', 'end_time', 'account_id', 'player_id', 'handout',
'transcripts', 'download_transcript_allowed')
player_state_fields = ('current_time', 'muted', 'playback_rate', 'volume')
player_state_fields = ('current_time', 'muted', 'playback_rate', 'volume', 'transcripts_enabled')

@property
def player_state(self):
Expand All @@ -155,6 +161,7 @@ def player_state(self):
'playback_rate': self.playback_rate,
'volume': self.volume,
'transcripts': json.loads(self.transcripts) if self.transcripts else [],
'transcripts_enabled': self.transcripts_enabled
}

@staticmethod
Expand All @@ -177,6 +184,7 @@ def player_state(self, state):
self.playback_rate = state.get('playback_rate', self.playback_rate)
self.volume = state.get('volume', self.volume)
self.transcripts = state.get('transcripts', self.transcripts)
self.transcripts_enabled = state.get('transcripts_enabled', self.transcripts_enabled)

def validate_field_data(self, validation, data):
"""
Expand Down Expand Up @@ -319,7 +327,8 @@ def save_player_state(self, request, suffix=''):
'playback_rate': request['playbackRate'],
'volume': request['volume'],
'muted': request['muted'],
'transcripts': self.transcripts
'transcripts': self.transcripts,
'transcripts_enabled': request['transcriptsEnabled']
}
self.player_state = player_state
return {'success': True}
Expand Down