Wrap injected JS in IIFE to prevent scope conflicts

This commit is contained in:
Max Goodhart
2020-07-23 19:51:46 -07:00
parent b8109735fa
commit 36fe472fdc

View File

@@ -221,121 +221,123 @@ const viewStateMachine = Machine(
} }
const wc = view.webContents const wc = view.webContents
const info = await wc.executeJavaScript(` const info = await wc.executeJavaScript(`
const sleep = ms => new Promise((resolve) => setTimeout(resolve, ms)) (function() {
const sleep = ms => new Promise((resolve) => setTimeout(resolve, ms))
async function waitForVideo() { async function waitForVideo() {
let tries = 0 let tries = 0
let video let video
while ((!video || !video.src) && tries < 10) { while ((!video || !video.src) && tries < 10) {
video = document.querySelector('video') video = document.querySelector('video')
tries++ tries++
await sleep(200) await sleep(200)
}
if (video) {
return {video}
}
tries = 0
let iframe
while ((!video || !video.src) && tries < 10) {
for (iframe of document.querySelectorAll('iframe')) {
if (!iframe.contentDocument) {
continue
}
video = iframe.contentDocument.querySelector('video')
if (video) {
break
}
} }
tries++ if (video) {
await sleep(200) return {video}
}
if (video) {
return { video, iframe }
}
return {}
}
const periscopeHacks = {
isMatch() {
return location.host === 'www.pscp.tv' || location.host === 'www.periscope.tv'
},
onLoad() {
const playButton = document.querySelector('.PlayButton')
if (playButton) {
playButton.click()
}
},
afterPlay(video) {
const baseVideoEl = document.querySelector('div.BaseVideo')
if (!baseVideoEl) {
return
} }
function positionPeriscopeVideo() { tries = 0
// Periscope videos can be rotated using transform matrix. They need to be rotated correctly. let iframe
const tr = baseVideoEl.style.transform while ((!video || !video.src) && tries < 10) {
if (tr.endsWith('matrix(0, 1, -1, 0, 0, 0)')) { for (iframe of document.querySelectorAll('iframe')) {
video.className = '__rot90__' if (!iframe.contentDocument) {
} else if (tr.endsWith('matrix(-1, 0, 0, -1, 0)')) { continue
video.className = '__rot180__' }
} else if (tr.endsWith('matrix(0, -1, 1, 0, 0, 0)')) { video = iframe.contentDocument.querySelector('video')
video.className = '__rot270__' if (video) {
} break
}
positionPeriscopeVideo()
const obs = new MutationObserver(ml => {
for (const m of ml) {
if (m.attributeName === 'style') {
positionPeriscopeVideo()
return
} }
} }
}) tries++
obs.observe(baseVideoEl, {attributes: true}) await sleep(200)
},
}
async function findVideo() {
if (periscopeHacks.isMatch()) {
periscopeHacks.onLoad()
}
const { video, iframe } = await waitForVideo()
if (!video) {
throw new Error('could not find video')
}
if (iframe) {
const style = iframe.contentDocument.createElement('style')
style.innerHTML = \`${VIDEO_OVERRIDE_STYLE}\`
iframe.contentDocument.head.appendChild(style)
iframe.className = '__video__'
let parentEl = iframe.parentElement
while (parentEl) {
parentEl.className = '__video_parent__'
parentEl = parentEl.parentElement
} }
iframe.contentDocument.body.appendChild(video) if (video) {
} else { return { video, iframe }
document.body.appendChild(video) }
} return {}
video.muted = false
video.autoPlay = true
video.play()
setInterval(() => video.play(), 1000)
// Prevent sites from re-muting the video (Periscope, I'm looking at you!)
Object.defineProperty(video, 'muted', {writable: true, value: false})
if (periscopeHacks.isMatch()) {
periscopeHacks.afterPlay(video)
} }
const info = { title: document.title } const periscopeHacks = {
return info isMatch() {
} return location.host === 'www.pscp.tv' || location.host === 'www.periscope.tv'
findVideo() },
onLoad() {
const playButton = document.querySelector('.PlayButton')
if (playButton) {
playButton.click()
}
},
afterPlay(video) {
const baseVideoEl = document.querySelector('div.BaseVideo')
if (!baseVideoEl) {
return
}
function positionPeriscopeVideo() {
// Periscope videos can be rotated using transform matrix. They need to be rotated correctly.
const tr = baseVideoEl.style.transform
if (tr.endsWith('matrix(0, 1, -1, 0, 0, 0)')) {
video.className = '__rot90__'
} else if (tr.endsWith('matrix(-1, 0, 0, -1, 0)')) {
video.className = '__rot180__'
} else if (tr.endsWith('matrix(0, -1, 1, 0, 0, 0)')) {
video.className = '__rot270__'
}
}
positionPeriscopeVideo()
const obs = new MutationObserver(ml => {
for (const m of ml) {
if (m.attributeName === 'style') {
positionPeriscopeVideo()
return
}
}
})
obs.observe(baseVideoEl, {attributes: true})
},
}
async function findVideo() {
if (periscopeHacks.isMatch()) {
periscopeHacks.onLoad()
}
const { video, iframe } = await waitForVideo()
if (!video) {
throw new Error('could not find video')
}
if (iframe) {
const style = iframe.contentDocument.createElement('style')
style.innerHTML = \`${VIDEO_OVERRIDE_STYLE}\`
iframe.contentDocument.head.appendChild(style)
iframe.className = '__video__'
let parentEl = iframe.parentElement
while (parentEl) {
parentEl.className = '__video_parent__'
parentEl = parentEl.parentElement
}
iframe.contentDocument.body.appendChild(video)
} else {
document.body.appendChild(video)
}
video.muted = false
video.autoPlay = true
video.play()
setInterval(() => video.play(), 1000)
// Prevent sites from re-muting the video (Periscope, I'm looking at you!)
Object.defineProperty(video, 'muted', {writable: true, value: false})
if (periscopeHacks.isMatch()) {
periscopeHacks.afterPlay(video)
}
const info = { title: document.title }
return info
}
findVideo()
}())
`) `)
return info return info
}, },