-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move Netflix player fetching to a custom hook
- Loading branch information
Showing
4 changed files
with
54 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { useState, useEffect } from "react"; | ||
import { querySelectorMutation, ChildMutationType } from "../util/util"; | ||
|
||
// todo: investigate performance of these kinds of hooks. currently using more than | ||
// one MutationObserver just to keep things modular, which is probably not efficient. maybe combine them and broadcast out state changes in a better way | ||
|
||
const NETFLIX_PLAYER_CLASS = "watch-video--player-view"; | ||
const NETFLIX_VIDEO_CLASS = `${NETFLIX_PLAYER_CLASS} video` | ||
|
||
export function useNetflixPlayer(): [Element | null, HTMLVideoElement | null] { | ||
const [netflixPlayer, setNetflixPlayer] = useState<Element | null>(document.querySelector(`.${NETFLIX_PLAYER_CLASS}`)); | ||
const [videoElem, setVideoElem] = useState<HTMLVideoElement | null>(document.querySelector(`.${NETFLIX_VIDEO_CLASS}`) as HTMLVideoElement | null); | ||
|
||
useEffect(() => { | ||
// We insert our components into the Netflix DOM, but they constantly | ||
// mutate it. Watch for changes so we know when to re-render. | ||
const netflixObserver = new MutationObserver(mutationCallback); | ||
function mutationCallback(mutationsList: MutationRecord[]) { | ||
for (const mutation of mutationsList) { | ||
if (mutation.type !== 'childList') { | ||
continue; | ||
} | ||
const video = querySelectorMutation(mutation, `.${NETFLIX_VIDEO_CLASS}`); | ||
if (video) { | ||
setVideoElem(video.type === ChildMutationType.Added ? video.elem as HTMLVideoElement : null); | ||
const player = document.querySelector(`.${NETFLIX_PLAYER_CLASS}`); | ||
setNetflixPlayer(player); | ||
} | ||
} | ||
} | ||
const config = { attributes: false, childList: true, subtree: true }; | ||
netflixObserver.observe(document.body, config); | ||
|
||
return () => { | ||
netflixObserver.disconnect(); | ||
}; | ||
}, []); | ||
|
||
return [netflixPlayer, videoElem]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters