feat(video osd): Add OSD for video playback #477
Conversation
Codecov Report
@@ Coverage Diff @@
## master #477 +/- ##
=========================================
- Coverage 0.62% 0.61% -0.02%
=========================================
Files 77 78 +1
Lines 2073 2120 +47
Branches 294 302 +8
=========================================
Hits 13 13
- Misses 2059 2106 +47
Partials 1 1
Continue to review full report at Codecov.
|
| @@ -83,12 +83,7 @@ export default Vue.extend({ | |||
| shaka.polyfill.installAll(); | |||
| if (shaka.Player.isBrowserSupported()) { | |||
| this.player = new shaka.Player(this.$refs.videoPlayer); | |||
| // TODO: Remove Shaka's OSD and use our own | |||
There was a problem hiding this comment.
@camc314 Shouldn't we start using shaka player instead of shaka-player-ui as well?
There was a problem hiding this comment.
You just need to change the import to have the non-ui version.
There was a problem hiding this comment.
@mrtimscampi I know, but that change is not in this PR, that's why I mention it :).
There was a problem hiding this comment.
It's now using
import shaka from 'shaka-player/dist/shaka-player.compiled';
camc314
force-pushed
the
feat/OSD
branch
2 times, most recently
from
c1b453e to
2905a64
Compare
|
Now that #399 is merged, I am going to make the slider work properly |
Sounds good. Do we do this in another PR or in this one? I also pushed a small fix for an issue when stopping videos (Some of the references in the OSD became undefined. Moving the v-if so the OSD gets properly removed as well fixes it) |
|
Kudos, SonarCloud Quality Gate passed!
|
I've done it in this one. Should fixed and working now
Ah thanks, I missed this, I think I was in the middle of rebasing, I've added the change |
| <v-slider | ||
| min="0" | ||
| :max="runtime" | ||
| validate-on-blur | ||
| :step="0" | ||
| :value="sliderValue" | ||
| hide-details | ||
| thumb-label | ||
| @end="onPositionChange" | ||
| @change="onPositionChange" | ||
| @mousedown="onClick" | ||
| @mouseup="onClick" | ||
| @input="onInputChange" | ||
| > | ||
| <template #prepend> | ||
| <span class="mt-1"> | ||
| {{ getRuntime(realPosition) }} | ||
| </span> | ||
| </template> | ||
| <template #thumb-label> | ||
| {{ getRuntime(sliderValue) }} | ||
| </template> | ||
| <template #append> | ||
| <span class="mt-1"> | ||
| {{ getRuntime(runtime) }} | ||
| </span> | ||
| </template> |
There was a problem hiding this comment.
@camc314 Why we don't make a custom component for this? Seems useless to repeat the same logic that we use in Audio controls here.
We can name it PlaybackProgressSlider.
We will also need this component for the future Full screen page for music playback, so it makes total sense imo.
There was a problem hiding this comment.
@camc314 Use the one in Audio Controls as a template, there are some changes there that haven't been backported here (like the removal of the min prop).
There was a problem hiding this comment.
@ferferga We should probably do this in another PR, since it'll touch other components as well. I'll merge this, then we can work on unifying the common components of the various players.
There was a problem hiding this comment.
@MrTimscampi okay, will do it in the full screen PR then.
All Icons, excluding:
are not currently hooked up to anything
AirPlay and PiP icons are hidden if it is not supported.
Top Left Buttons: Close Player, mini player, PiP mode
Top Right Buttons: SyncPlay, AirPlay, ChromeCast
Bottom Left: Prev Track, Play/Pause, Next Track
Bottom Right: Captions, Settings, Full Screen