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.

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

Basic UI for Live #1121

Closed
wants to merge 8 commits into
base: master
from

Conversation

Projects
None yet
5 participants
@tomjohnson916
Contributor

tomjohnson916 commented Mar 31, 2014

  • Added LiveDisplay UI component
  • Included LiveDisplay component with default ControlBar.children
  • Added live stream detection on duration change
  • Added vjs-default-skin.vjs-live CSS classes to manage UI display
@dmlap

View changes

Show outdated Hide outdated src/js/player.js
if (duration <= 0 || duration === window.INFINITY) {
this.addClass('vjs-live');
} else {
this.removeClass('vjs-live');

This comment has been minimized.

@dmlap

dmlap Mar 31, 2014

Member

This will probably cause styles to get recalculated on the player every time there is a duration change. That might be expensive. Have you checked this out on mobile devices yet?

@dmlap

dmlap Mar 31, 2014

Member

This will probably cause styles to get recalculated on the player every time there is a duration change. That might be expensive. Have you checked this out on mobile devices yet?

This comment has been minimized.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

not yet, setting up HLS live testing right now. I could just as easily set this to check on loadstart if we feel this is too heavy.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

not yet, setting up HLS live testing right now. I could just as easily set this to check on loadstart if we feel this is too heavy.

This comment has been minimized.

@heff

heff Mar 31, 2014

Member

durationchange should only happen once whenever the source changes (metadata is updated). Is that still a concern?

@heff

heff Mar 31, 2014

Member

durationchange should only happen once whenever the source changes (metadata is updated). Is that still a concern?

This comment has been minimized.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

in most segmented delivery formats (HLS/HDS/DASH) duration change happens regularly in live as the manifest updates on polling, so @dmlap 's concern is legitimate.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

in most segmented delivery formats (HLS/HDS/DASH) duration change happens regularly in live as the manifest updates on polling, so @dmlap 's concern is legitimate.

This comment has been minimized.

@heff

heff Mar 31, 2014

Member

Ok got it. Is the duration even used in that case then? Should we not even be triggering durationchange in a live scenario? I guess whatever iOS does we should be ready for either way.

@heff

heff Mar 31, 2014

Member

Ok got it. Is the duration even used in that case then? Should we not even be triggering durationchange in a live scenario? I guess whatever iOS does we should be ready for either way.

This comment has been minimized.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

duration is used in any live with DVR scenarios.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

duration is used in any live with DVR scenarios.

This comment has been minimized.

@heff

heff Apr 1, 2014

Member

In the live with DVR scenario, what does the duration look like? Would it be caught by the current conditional (duration < 0 || duration === window.INFINITY)?

At what point do we know for sure if the video is live or not? Is it after loadedmetadata? Could it change after loadedmetadata?

Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

@heff

heff Apr 1, 2014

Member

In the live with DVR scenario, what does the duration look like? Would it be caught by the current conditional (duration < 0 || duration === window.INFINITY)?

At what point do we know for sure if the video is live or not? Is it after loadedmetadata? Could it change after loadedmetadata?

Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

@heff

View changes

Show outdated Hide outdated src/js/player.js
@@ -507,6 +507,13 @@ vjs.Player.prototype.onDurationChange = function(){
if (duration) {
this.duration(duration);
}
// Determine if the stream is live and propagate styles down to UI.
if (duration <= 0 || duration === window.INFINITY) {

This comment has been minimized.

@heff

heff Mar 31, 2014

Member

Are there specific cases where if duration == 0, it means live? In other cases it just means we don't have the duration yet, so I think that could cause cases where it says it's live when it isn't.

@heff

heff Mar 31, 2014

Member

Are there specific cases where if duration == 0, it means live? In other cases it just means we don't have the duration yet, so I think that could cause cases where it says it's live when it isn't.

This comment has been minimized.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

Good catch. That should probably be duration < 0, not <=. On some platforms RTMP and HDS live can report -1 which is why I put that in there.

@tomjohnson916

tomjohnson916 Mar 31, 2014

Contributor

Good catch. That should probably be duration < 0, not <=. On some platforms RTMP and HDS live can report -1 which is why I put that in there.

@gkatsev

View changes

Show outdated Hide outdated src/js/control-bar/live-display.js
this.contentEl_ = vjs.createEl('div', {
className: 'vjs-live-display',
innerHTML: '<span class="vjs-control-text">LIVE</span>LIVE',

This comment has been minimized.

@gkatsev

gkatsev Mar 31, 2014

Member

Is the second LIVE outside of the vjs-control-text needed? Would be better to take it out.

@gkatsev

gkatsev Mar 31, 2014

Member

Is the second LIVE outside of the vjs-control-text needed? Would be better to take it out.

This comment has been minimized.

@gkatsev

gkatsev Mar 31, 2014

Member

Never mind. Didn't realize other controls were also doing it and that it was mostly for screen readers.

@gkatsev

gkatsev Mar 31, 2014

Member

Never mind. Didn't realize other controls were also doing it and that it was mostly for screen readers.

This comment has been minimized.

@heff

heff Apr 1, 2014

Member

Actually yeah, in this case the screen reader would read both, "LIVELIVE". If you look at how the durationDisplay works, the control text is used to describe what the value is.

'<span class="vjs-control-text">Duration Time </span>' + '0:00'

So in this case we might have something like

'<span class="vjs-control-text">Stream Type </span>' + 'LIVE'

Not exactly sure on the right term to use there.

@heff

heff Apr 1, 2014

Member

Actually yeah, in this case the screen reader would read both, "LIVELIVE". If you look at how the durationDisplay works, the control text is used to describe what the value is.

'<span class="vjs-control-text">Duration Time </span>' + '0:00'

So in this case we might have something like

'<span class="vjs-control-text">Stream Type </span>' + 'LIVE'

Not exactly sure on the right term to use there.

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Apr 1, 2014

Member

Tests are failing because you need to export the component like these:
https://github.com/videojs/video.js/blob/master/src/js/exports.js#L77

Member

heff commented Apr 1, 2014

Tests are failing because you need to export the component like these:
https://github.com/videojs/video.js/blob/master/src/js/exports.js#L77

@tomjohnson916

This comment has been minimized.

Show comment
Hide comment
@tomjohnson916

tomjohnson916 Apr 1, 2014

Contributor

Updated, fixed tests. Thanks. I could not figure out what was making that fail.

Contributor

tomjohnson916 commented Apr 1, 2014

Updated, fixed tests. Thanks. I could not figure out what was making that fail.

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Apr 1, 2014

Member

Looks like there might still be problems with the minification of this. Seeing errors when trying to create a player with the minified code.

Member

gkatsev commented Apr 1, 2014

Looks like there might still be problems with the minification of this. Seeing errors when trying to create a player with the minified code.

@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Apr 1, 2014

Member

Looks like on iOS, we get the class removed right now. The class gets added but then ends up being removed, even though the duration of the video is set to Infinity.

Member

gkatsev commented Apr 1, 2014

Looks like on iOS, we get the class removed right now. The class gets added but then ends up being removed, even though the duration of the video is set to Infinity.

update to fix infinity capitalization. only do css logic on valid dur…
…ation. set any duration of less than zero to window.Infinity
@gkatsev

This comment has been minimized.

Show comment
Hide comment
@gkatsev

gkatsev Apr 1, 2014

Member

That last update fixed the iOS problem.

Member

gkatsev commented Apr 1, 2014

That last update fixed the iOS problem.

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Apr 1, 2014

Member

(this comment was on an outdated diff, so reposting it)

In the live with DVR scenario, what does the duration look like? Would it be caught by the current conditional (duration < 0 || duration === window.INFINITY)?

At what point do we know for sure if the video is live or not? Is it after loadedmetadata? Could it change after loadedmetadata? Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

Member

heff commented Apr 1, 2014

(this comment was on an outdated diff, so reposting it)

In the live with DVR scenario, what does the duration look like? Would it be caught by the current conditional (duration < 0 || duration === window.INFINITY)?

At what point do we know for sure if the video is live or not? Is it after loadedmetadata? Could it change after loadedmetadata? Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

@tomjohnson916

This comment has been minimized.

Show comment
Hide comment
@tomjohnson916

tomjohnson916 Apr 1, 2014

Contributor

@heff - comments below;

In the live with DVR scenario, what does the duration look like?

  • It looks like VOD. There's a currentTime and a duration. The main difference is that both values update.

At what point do we know for sure if the video is live or not? Is it after loadedmetadata?

  • It varies by streaming type but would be after metadata. RTMP comes across in metadata with a duration of -1. HLS would be determined by the manifest(s) coming back without an ENDLIST tag.

Could it change after loadedmetadata?

  • RTMP no, HLS yes once the final manifest comes down with an ENDLIST tag.

Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

  • We certainly should have a quick meeting on this. The answers vary by streaming type.
Contributor

tomjohnson916 commented Apr 1, 2014

@heff - comments below;

In the live with DVR scenario, what does the duration look like?

  • It looks like VOD. There's a currentTime and a duration. The main difference is that both values update.

At what point do we know for sure if the video is live or not? Is it after loadedmetadata?

  • It varies by streaming type but would be after metadata. RTMP comes across in metadata with a duration of -1. HLS would be determined by the manifest(s) coming back without an ENDLIST tag.

Could it change after loadedmetadata?

  • RTMP no, HLS yes once the final manifest comes down with an ENDLIST tag.

Can we outline the different live scenarios, how we know they're live, and at what point we have that information available?

  • We certainly should have a quick meeting on this. The answers vary by streaming type.
@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Apr 1, 2014

Member

Just loaded the UI and I'm seeing a few issues that need to be addressed.

  • The duration should probably be hidden (as discussed in chat)
  • LIVE isn't positioned inline with everything else. It's sitting awkwardly at the top of the bar.
  • The progress bar should probably be removed/hidden. It's confusing having it there and clickable as if it will do anything. It looks like maybe we're trying to but the CSS isn't working?

For now we're a assuming the live-only case, as opposed to the live-DVR case, which will behave differently.

screen shot 2014-04-01 at 1 35 03 pm

Member

heff commented Apr 1, 2014

Just loaded the UI and I'm seeing a few issues that need to be addressed.

  • The duration should probably be hidden (as discussed in chat)
  • LIVE isn't positioned inline with everything else. It's sitting awkwardly at the top of the bar.
  • The progress bar should probably be removed/hidden. It's confusing having it there and clickable as if it will do anything. It looks like maybe we're trying to but the CSS isn't working?

For now we're a assuming the live-only case, as opposed to the live-DVR case, which will behave differently.

screen shot 2014-04-01 at 1 35 03 pm

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Apr 1, 2014

Member

Sorry, none of that last comment is needed. I hadn't compiled the new CSS file in my example. The player is looking good.

screen shot 2014-04-01 at 2 18 39 pm

Member

heff commented Apr 1, 2014

Sorry, none of that last comment is needed. I hadn't compiled the new CSS file in my example. The player is looking good.

screen shot 2014-04-01 at 2 18 39 pm

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Apr 2, 2014

Member

Tried manually merging and squashing commits, and it kept this from automatically closing, but it's pulled into master now.
6a097c0

Member

heff commented Apr 2, 2014

Tried manually merging and squashing commits, and it kept this from automatically closing, but it's pulled into master now.
6a097c0

@heff heff closed this Apr 2, 2014

@deedos

This comment has been minimized.

Show comment
Hide comment
@deedos

deedos Sep 24, 2014

Contributor

the live dvr feature has been moved to another issue ? thanks

Contributor

deedos commented Sep 24, 2014

the live dvr feature has been moved to another issue ? thanks

@heff

This comment has been minimized.

Show comment
Hide comment
@heff

heff Sep 25, 2014

Member

@seniorflexdeveloper did we make any progress on Live DVR with the DASH work?

Member

heff commented Sep 25, 2014

@seniorflexdeveloper did we make any progress on Live DVR with the DASH work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment