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

Only return the casting button when there are devices to cast to. #180

Merged
merged 3 commits into from
Feb 1, 2022
Merged

Only return the casting button when there are devices to cast to. #180

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b02f5aa
Only return the casting button when there are devices to cast to.
dero Jan 31, 2022
7cdfcdd
Hide and show the cast button depending on cast state changes.
dero Jan 31, 2022
3cc1ef6
Not necessary to hide the cast button when it's created.
dero Jan 31, 2022
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
28 changes: 22 additions & 6 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import ErrorPage from './js/pages/Error';
* Settings
*/
import { loadSetting } from './js/utils/settings';
import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE } from './js/constants';
import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE, CAST_BUTTON_HIDDEN_CLASSNAME } from './js/constants';

/**
* Custom Elements definition.
Expand Down Expand Up @@ -170,16 +170,32 @@ window.kinoInitGoogleCast = (function kinoInitGoogleCastIIFE() {
return () => {
if (!castButtonPromise) {
castButtonPromise = new Promise((resolve) => {
const castButton = document.createElement('button');
const castCustomElement = document.createElement('google-cast-launcher');

castButton.setAttribute('aria-label', 'Cast this video');
castButton.appendChild(castCustomElement);
castButton.classList.add(CAST_BUTTON_HIDDEN_CLASSNAME);
Copy link
Member

Choose a reason for hiding this comment

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

This line is not needed as castButton will only be added to the document once promise is resolved right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@beaufortfrancois The button is added to the document as soon as the Google Cast API becomes available after the recent changes – regardless of whether cast devices are available or not.

The button visibility (controlled using the class name) then depends on cast state changes.

Copy link
Member

Choose a reason for hiding this comment

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

My understanding is that applyCastState() is called just before resolve(castButton). As applyCastState() controls the button visibility, the fist castButton.classList.add(CAST_BUTTON_HIDDEN_CLASSNAME); would not shown to the user.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Quite right. 🤦‍♂️

Thank you. Removed in 3cc1ef6.


const applyCastState = () => {
const castState = window.cast.framework.CastContext.getInstance().getCastState();

castButton.classList.toggle(
CAST_BUTTON_HIDDEN_CLASSNAME,
castState === 'NO_DEVICES_AVAILABLE',
);
};

const initCastApi = () => {
window.cast.framework.CastContext.getInstance().setOptions({
receiverApplicationId: window.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
});

const castButton = document.createElement('button');
const castCustomElement = document.createElement('google-cast-launcher');

castButton.setAttribute('aria-label', 'Cast this video');
castButton.appendChild(castCustomElement);
window.cast.framework.CastContext.getInstance().addEventListener(
window.cast.framework.CastContextEventType.CAST_STATE_CHANGED,
applyCastState,
);
applyCastState();

resolve(castButton);
};
Expand Down
1 change: 1 addition & 0 deletions src/js/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,4 @@ export const PIP_CLASSNAME = 'picture-in-picture';
export const CAST_CLASSNAME = 'cast';
export const CAST_HAS_TARGET_NAME = 'cast-has-target';
export const CAST_TARGET_NAME = 'cast-target-name';
export const CAST_BUTTON_HIDDEN_CLASSNAME = 'hidden';
4 changes: 4 additions & 0 deletions src/js/web-components/video-player/VideoPlayer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
border: none;
}

:host .floating-buttons > button.hidden {
display: none;
}

button google-cast-launcher {
height: 24px;
width: auto;
Expand Down