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.

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

Conversation

elaye
Copy link

@elaye elaye commented Sep 11, 2019

This PR adds a fullscreen button to the video controls

r? @ferjm



This change is Reviewable

@highfive
Copy link

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.

@highfive highfive added the S-awaiting-review There is new code that needs to be reviewed. label Sep 11, 2019
Copy link
Contributor

@ferjm ferjm left a comment

Choose a reason for hiding this comment

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

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.

@ferjm ferjm added S-needs-code-changes Changes have not yet been made that were requested by a reviewer. and removed S-awaiting-review There is new code that needs to be reviewed. labels Sep 11, 2019
@highfive highfive added S-awaiting-review There is new code that needs to be reviewed. and removed S-needs-code-changes Changes have not yet been made that were requested by a reviewer. labels Sep 11, 2019
@elaye
Copy link
Author

elaye commented Sep 11, 2019

Ok, I added the ability to exit fullscreen mode to the toggleFullscreen method

Copy link
Contributor

@ferjm ferjm left a comment

Choose a reason for hiding this comment

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

Thanks! Only a couple of minor comments left.

@@ -368,6 +387,16 @@
this.media.muted = !this.media.muted;
}

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

Choose a reason for hiding this comment

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

We need to check if document.fullscreenElement is the media element.

</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>'}
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

@ferjm
Copy link
Contributor

ferjm commented Sep 12, 2019

Thank you!

@bors-servo r+

@bors-servo
Copy link
Contributor

📌 Commit 9cbdfd6 has been approved by ferjm

@highfive highfive added S-awaiting-merge The PR is in the process of compiling and running tests on the automated CI. and removed S-awaiting-review There is new code that needs to be reviewed. labels Sep 12, 2019
@bors-servo
Copy link
Contributor

⌛ Testing commit 9cbdfd6 with merge 96de31b...

bors-servo pushed a commit that referenced this pull request Sep 12, 2019
…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

☀️ 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
@highfive highfive removed the S-awaiting-merge The PR is in the process of compiling and running tests on the automated CI. label Sep 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a fullscreen button to the video controls
4 participants