Skip to content

/ servo

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

Add fullscreen button to video controls #24179

Merged
merged 4 commits into from Sep 12, 2019
Merged

Add fullscreen button to video controls #24179

merged 4 commits into from Sep 12, 2019

Conversation

@elaye
Copy link

elaye commented Sep 11, 2019 •
edited by SimonSapin

This PR adds a fullscreen button to the video controls

r? @ferjm

  • ./mach build -d does not report any errors
  • ./mach test-tidy does not report any errors
  • These changes fix #24164

This change is Reviewable
Elie Genard
Add fullscreen button to video controls
Loading status checks…
040960c
@highfive
Copy link

highfive commented Sep 11, 2019

Thanks for the pull request, and welcome! The Servo team is excited to review your changes, and you should hear from @ferjm (or someone else) soon.
@ferjm
ferjm reviewed Sep 11, 2019
View changes
Copy link
Member

ferjm left a comment

Thanks! Looking good :)

I replied to your questions on the issue. I think we can make the toggleFullscreen method not only enter but also exit fullscreen mode with the API properties and method that I mentioned there.
Elie Genard
Add fullscreen exit to toggle callback
Loading status checks…
670b116
@elaye
Copy link
Author

elaye commented Sep 11, 2019

Ok, I added the ability to exit fullscreen mode to the toggleFullscreen method
@ferjm
ferjm reviewed Sep 11, 2019
View changes
Copy link
Member

ferjm left a comment

Thanks! Only a couple of minor comments left.
resources/media-controls.js Outdated
@@ -368,6 +387,16 @@
this.media.muted = !this.media.muted;
}

toggleFullscreen() {
const fullscreenEnabled = document.fullscreenEnabled && document.fullscreenElement;

This comment has been minimized.

Sign in to view
Copy link
@ferjm

ferjm Sep 11, 2019

Member

We need to check if document.fullscreenElement is the media element.
resources/media-controls.js
</span>
<button id="volume-switch"></button>
<input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
${isAudioOnly ? "" : '<button id="fullscreen-switch" class="fullscreen"></button>'}

This comment has been minimized.

Sign in to view
Copy link
@ferjm

ferjm Sep 11, 2019

Member

It's really not a big deal, but it would be very nice if we could change the icon depending on whether we are out (icon with arrows pointing out) or in (icon with arrows pointing in) of fullscreen mode. Or use a neutral icon instead.
Elie Genard added 2 commits Sep 11, 2019
Elie Genard
Increase controls min-width
a7459b7
Elie Genard
Change control button image when fullscreen is active
Loading status checks…
9cbdfd6
@ferjm
Copy link
Member

ferjm commented Sep 12, 2019

Thank you!

@bors-servo r+
@bors-servo
Copy link
Contributor

bors-servo commented Sep 12, 2019

📌 Commit 9cbdfd6 has been approved by ferjm
@bors-servo
Copy link
Contributor

bors-servo commented Sep 12, 2019

⌛ Testing commit 9cbdfd6 with merge 96de31b...
bors-servo added a commit that referenced this pull request Sep 12, 2019
@bors-servo
Auto merge of #24179 - elaye:add-media-controls-fullscreen-button, r=…
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
Loading status checks…
96de31b 
…ferjm

Add fullscreen button to video controls

This PR adds a fullscreen button to the video controls

r? @ferjm

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #24164

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/24179)
<!-- Reviewable:end -->
@bors-servo
Copy link
Contributor

bors-servo commented Sep 12, 2019

☀️ Test successful - linux-rel-css, linux-rel-wpt, status-taskcluster
Approved by: ferjm
Pushing 96de31b to master...
@bors-servo bors-servo merged commit 9cbdfd6 into servo:master Sep 12, 2019
2 of 3 checks passed
2 of 3 checks passed
continuous-integration/appveyor/pr AppVeyor build failed
Details
Taskcluster (pull_request) TaskGroup: success
Details
homu Test successful
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ferjm ferjm

Assignees

@ferjm ferjm

Labels
None yet
Projects
None yet
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

Add a fullscreen button to the video controls
4 participants
@elaye @highfive @ferjm @bors-servo
You can’t perform that action at this time.