Skip to content

Instantly share code, notes, and snippets.

@dylanjha
Last active December 17, 2021 17:17
Show Gist options
  • Save dylanjha/288ff24af1ba30e4234b76a50d581be4 to your computer and use it in GitHub Desktop.
Save dylanjha/288ff24af1ba30e4234b76a50d581be4 to your computer and use it in GitHub Desktop.
React airplay control for media-chrome
const ButtonPressedKeys = ['Enter', ' '];
const AirPlayButton = ({ onClick }) => {
const onKeyPress = (evt) => {
const { key } = evt;
if (!ButtonPressedKeys.includes(key)) return;
onClick(evt);
};
return (
<div
role="button"
aria-label="AirPlay"
tabIndex="0"
onClick={onClick}
onKeyPress={onKeyPress}
style={{ display: 'inline-block', verticalAlign: 'center' }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 125 125"
fill="#eee"
height="100%"
>
<defs>
<path
id="prefix__a"
d="M81 88.8c.4.5.4 1.3-.1 1.7-.2.2-.5.3-.8.3H44.9c-.7 0-1.2-.5-1.2-1.2 0-.3.1-.6.3-.8l17.5-20.1c.5-.6 1.3-.6 1.9-.1l.1.1L81 88.8zm-4.1-11.1l-2.8-3.3h10.5c.9.1 1.7-.1 2.5-.4.5-.3 1-.7 1.2-1.2.4-.8.5-1.7.4-2.5V45.8c.1-.9-.1-1.7-.4-2.5-.3-.5-.7-1-1.2-1.2-.8-.4-1.7-.5-2.5-.4h-44c-.9-.1-1.7.1-2.5.4-.5.3-1 .7-1.2 1.2-.4.8-.5 1.7-.4 2.5v24.4c-.1.9.1 1.7.4 2.5.3.5.7 1 1.2 1.2.8.4 1.7.5 2.5.4h10.5l-2.8 3.3h-6.7c-3 0-4-.3-5-.9-1.1-.6-1.9-1.4-2.5-2.5-.6-1.1-.9-2.1-.9-5V46.7c0-3 .3-4 .9-5.1.6-1.1 1.4-1.9 2.5-2.5 1.1-.6 2.1-.9 5-.9h42.2c3 0 4 .3 5.1.9 1.1.6 1.9 1.4 2.5 2.5.6 1.1.9 2.1.9 5.1v22.5c0 3-.3 4-.9 5-.6 1.1-1.4 1.9-2.5 2.5-1.1.6-2.1.9-5.1.9l-6.9.1z"
/>
</defs>
<clipPath id="prefix__b">
<use xlinkHref="#prefix__a" overflow="visible" />
</clipPath>
<g clipPath="url(#prefix__b)">
<defs>
<path id="prefix__c" d="M10.1 10.5H115v104.9H10.1z" />
</defs>
<clipPath id="prefix__d">
<use xlinkHref="#prefix__c" overflow="visible" />
</clipPath>
<g clipPath="url(#prefix__d)">
<path d="M24.8 30.1h75.4v68.8H24.8z" />
</g>
</g>
</svg>
</div>
);
};
export default AirPlayButton;
import AirPlayButton from './airplay-button';
function Player () {
const [hasAirplay, setHasAirplay] = useState(false);
const muxVideoRef = useRef(null);
useEffect(() => {
const onPlaybackTargetChanged = (event) => {
setHasAirplay(!!event.availability);
};
if (window.WebKitPlaybackTargetAvailabilityEvent) {
// muxVideoRef is a ref to the `<mux-video>` DOM element
muxVideoRef.current.addEventListener('webkitplaybacktargetavailabilitychanged', onPlaybackTargetChanged);
}
}, [])
return (
<media-controller>
<mux-video ref={muxVideoRef} />
{/* all your other controls */}
{hasAirplay && <AirPlayButton onClick={() => muxVideoRef.current.webkitShowPlaybackTargetPicker()} />}
</media-controller>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment