mirror of
https://github.com/LBRYFoundation/Watch-on-LBRY.git
synced 2025-08-23 17:47:26 +00:00
🍣 New button on the video player
This commit is contained in:
Shiba
parent
a6472799a1
commit
29c9b2829a
2 changed files with 92 additions and 21 deletions
|
|
@ -28,8 +28,11 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
|
|||
Object.assign(settings, Object.fromEntries(Object.entries(changes).map(([key, change]) => [key, change.newValue])))
|
||||
})
|
||||
|
||||
const mountPoint = document.createElement('div')
|
||||
mountPoint.style.display = 'flex'
|
||||
const buttonMountPoint = document.createElement('div')
|
||||
buttonMountPoint.style.display = 'flex'
|
||||
|
||||
const playerButtonMountPoint = document.createElement('div')
|
||||
playerButtonMountPoint.style.display = 'flex'
|
||||
|
||||
function WatchOnLbryButton({ source, target }: { source?: Source, target?: Target }) {
|
||||
if (!target || !source) return null
|
||||
|
|
@ -60,19 +63,65 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
|
|||
>
|
||||
<img src={target.platform.button.icon} height={16}
|
||||
style={{ transform: 'scale(1.5)', ...target.platform.button.style?.icon }} />
|
||||
<span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.displayName}</span>
|
||||
<span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
function WatchOnLbryPlayerButton({ source, target }: { source?: Source, target?: Target }) {
|
||||
if (!target || !source) return null
|
||||
const url = getLbryUrlByTarget(target)
|
||||
|
||||
return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
|
||||
<a href={`${url.href}`} target={target.platform === targetPlatformSettings.app ? '' : '_blank'} role='button'
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '12px',
|
||||
fontWeight: 'bold',
|
||||
border: '0',
|
||||
color: 'whitesmoke',
|
||||
marginRight: '10px',
|
||||
fontSize: '14px',
|
||||
textDecoration: 'none',
|
||||
...target.platform.button.style?.button,
|
||||
}}
|
||||
onClick={() => findVideoElementAwait(source).then((videoElement) => {
|
||||
videoElement.pause()
|
||||
})}
|
||||
>
|
||||
<img src={target.platform.button.icon} height={16}
|
||||
style={{ transform: 'scale(1.5)', ...target.platform.button.style?.icon }} />
|
||||
<span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
function updateButton(params: { source: Source, target: Target } | null): void {
|
||||
if (!params) return render(<WatchOnLbryButton />, mountPoint)
|
||||
if (!params) {
|
||||
render(<WatchOnLbryButton />, buttonMountPoint)
|
||||
render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
|
||||
return
|
||||
}
|
||||
|
||||
const mountBefore = document.querySelector(params.source.platform.htmlQueries.mountButtonBefore[params.source.type])
|
||||
if (!mountBefore) return render(<WatchOnLbryButton />, mountPoint)
|
||||
const mountPlayerButtonBefore = params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore ?
|
||||
document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) :
|
||||
null
|
||||
if (!mountPlayerButtonBefore) render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
|
||||
else {
|
||||
if (mountPlayerButtonBefore.previousSibling !== playerButtonMountPoint)
|
||||
mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore)
|
||||
render(<WatchOnLbryPlayerButton target={params.target} source={params.source} />, playerButtonMountPoint)
|
||||
}
|
||||
|
||||
mountBefore.parentElement?.insertBefore(mountPoint, mountBefore)
|
||||
render(<WatchOnLbryButton target={params.target} source={params.source} />, mountPoint)
|
||||
const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type])
|
||||
if (!mountButtonBefore) render(<WatchOnLbryButton />, playerButtonMountPoint)
|
||||
else {
|
||||
if (mountButtonBefore.previousSibling !== buttonMountPoint)
|
||||
mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore)
|
||||
render(<WatchOnLbryButton target={params.target} source={params.source} />, buttonMountPoint)
|
||||
}
|
||||
}
|
||||
|
||||
async function findVideoElementAwait(source: Source) {
|
||||
|
|
@ -205,9 +254,15 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
|
|||
|
||||
// There is no target found via API try to check Video Description for LBRY links.
|
||||
if (!target) {
|
||||
const descriptionElement = document.querySelector(source.platform.htmlQueries.videoDescription)
|
||||
if (descriptionElement) {
|
||||
const anchors = Array.from(descriptionElement.querySelectorAll<HTMLAnchorElement>('a'))
|
||||
const linksContainer =
|
||||
source.type === 'video' ?
|
||||
document.querySelector(source.platform.htmlQueries.videoDescription) :
|
||||
source.platform.htmlQueries.channelLinks ? document.querySelector(source.platform.htmlQueries.channelLinks) : null
|
||||
|
||||
console.log(linksContainer)
|
||||
|
||||
if (linksContainer) {
|
||||
const anchors = Array.from(linksContainer.querySelectorAll<HTMLAnchorElement>('a'))
|
||||
|
||||
for (const anchor of anchors) {
|
||||
if (!anchor.href) continue
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ const targetPlatform = (o: {
|
|||
displayName: string
|
||||
theme: string
|
||||
button: {
|
||||
platformNameText: string,
|
||||
icon: string
|
||||
style?:
|
||||
{
|
||||
|
|
@ -79,6 +80,7 @@ export const targetPlatformSettings = {
|
|||
displayName: 'Madiator.com',
|
||||
theme: 'linear-gradient(130deg, #499375, #43889d)',
|
||||
button: {
|
||||
platformNameText: '',
|
||||
icon: chrome.runtime.getURL('assets/icons/lbry/madiator-logo.svg'),
|
||||
style: {
|
||||
button: { flexDirection: 'row-reverse' },
|
||||
|
|
@ -91,6 +93,7 @@ export const targetPlatformSettings = {
|
|||
displayName: 'Odysee',
|
||||
theme: 'linear-gradient(130deg, #c63d59, #f77937)',
|
||||
button: {
|
||||
platformNameText: 'Odysee',
|
||||
icon: chrome.runtime.getURL('assets/icons/lbry/odysee-logo.svg')
|
||||
}
|
||||
}),
|
||||
|
|
@ -99,6 +102,7 @@ export const targetPlatformSettings = {
|
|||
displayName: 'LBRY App',
|
||||
theme: 'linear-gradient(130deg, #499375, #43889d)',
|
||||
button: {
|
||||
platformNameText: 'LBRY',
|
||||
icon: chrome.runtime.getURL('assets/icons/lbry/lbry-logo.svg')
|
||||
}
|
||||
}),
|
||||
|
|
@ -109,9 +113,13 @@ export const targetPlatformSettings = {
|
|||
const sourcePlatform = (o: {
|
||||
hostnames: string[]
|
||||
htmlQueries: {
|
||||
mountButtonBefore: Record<ResolveUrlTypes, string>,
|
||||
mountPoints: {
|
||||
mountButtonBefore: Record<ResolveUrlTypes, string>,
|
||||
mountPlayerButtonBefore: string | null,
|
||||
}
|
||||
videoPlayer: string,
|
||||
videoDescription: string
|
||||
channelLinks: string | null
|
||||
}
|
||||
}) => o
|
||||
export type SourcePlatform = ReturnType<typeof sourcePlatform>
|
||||
|
|
@ -126,24 +134,32 @@ export const sourcePlatfromSettings = {
|
|||
"youtube.com": sourcePlatform({
|
||||
hostnames: ['www.youtube.com'],
|
||||
htmlQueries: {
|
||||
mountButtonBefore: {
|
||||
video: 'ytd-video-owner-renderer~#subscribe-button',
|
||||
channel: '#channel-header-container #buttons'
|
||||
mountPoints: {
|
||||
mountButtonBefore: {
|
||||
video: 'ytd-video-owner-renderer~#subscribe-button',
|
||||
channel: '#channel-header-container #buttons'
|
||||
},
|
||||
mountPlayerButtonBefore: 'ytd-player .ytp-right-controls',
|
||||
},
|
||||
videoPlayer: '#ytd-player video',
|
||||
videoDescription: 'ytd-video-secondary-info-renderer #description'
|
||||
videoDescription: 'ytd-video-secondary-info-renderer #description',
|
||||
channelLinks: '#channel-header #links-holder'
|
||||
}
|
||||
}),
|
||||
"yewtu.be": sourcePlatform({
|
||||
hostnames: ['yewtu.be', 'vid.puffyan.us', 'invidio.xamh.de', 'invidious.kavin.rocks'],
|
||||
htmlQueries: {
|
||||
mountButtonBefore:
|
||||
{
|
||||
video: '#watch-on-youtube',
|
||||
channel: '#subscribe'
|
||||
mountPoints: {
|
||||
mountButtonBefore:
|
||||
{
|
||||
video: '#watch-on-youtube',
|
||||
channel: '#subscribe'
|
||||
},
|
||||
mountPlayerButtonBefore: null,
|
||||
},
|
||||
videoPlayer: '#player-container video',
|
||||
videoDescription: '#descriptionWrapper'
|
||||
videoDescription: '#descriptionWrapper',
|
||||
channelLinks: null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue