LBRYFoundation/Watch-on-LBRY
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/Watch-on-LBRY.git synced 2025-08-31 01:11:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/master'

Browse source
This commit is contained in:
Shiba 2022-07-26 10:31:07 +00:00
commit 8a1a329d2e
2 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/scripts/ytContent.tsx
View file

@ -38,31 +38,37 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
if (!target || !source) return null
const url = getLbryUrlByTarget(target)
return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
return <div
style={{
display: 'grid',
gridTemplateRows: '36px',
gridAutoColumns: 'auto',
alignContent: 'center'
}}
>
<a href={`${url.href}`} target='_blank' role='button'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '12px',
gap: '7px',
borderRadius: '2px',
backgroundColor: target.platform.theme,
backgroundImage: target.platform.theme,
padding: '0 16px',
margin: '0 4px',
fontWeight: 'bold',
border: '0',
color: 'whitesmoke',
padding: '10px 16px',
marginRight: source?.type === 'channel' ? '10px' : '4px',
fontSize: '14px',
textDecoration: 'none',
backgroundColor: target.platform.theme,
backgroundImage: target.platform.theme,
...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 }} />
<img src={target.platform.button.icon} height={24} style={{ ...target.platform.button.style?.icon }} />
<span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
</a>
</div>
@ -72,17 +78,25 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
if (!target || !source) return null
const url = getLbryUrlByTarget(target)
return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
return <div
style={{
display: 'grid',
gridTemplateRows: '36px',
gridAutoColumns: 'auto',
alignContent: 'center'
}}
>
<a href={`${url.href}`} target='_blank' role='button'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '12px',
gap: '7px',
borderRadius: '2px',
paddingRight: '10px',
fontWeight: 'bold',
border: '0',
color: 'whitesmoke',
marginRight: '10px',
fontSize: '14px',
textDecoration: 'none',
...target.platform.button.style?.button,
@ -91,8 +105,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
videoElement.pause()
})}
>
<img src={target.platform.button.icon} height={16}
style={{ transform: 'scale(1.5)', ...target.platform.button.style?.icon }} />
<img src={target.platform.button.icon} height={24} style={{ ...target.platform.button.style?.icon }} />
<span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
</a>
</div>
@ -110,16 +123,20 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
null
if (!mountPlayerButtonBefore) render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
else {
if (mountPlayerButtonBefore.previousSibling !== playerButtonMountPoint)
if (playerButtonMountPoint.getAttribute('data-id') !== params.source.id) {
mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore)
playerButtonMountPoint.setAttribute('data-id', params.source.id)
}
render(<WatchOnLbryPlayerButton target={params.target} source={params.source} />, playerButtonMountPoint)
}
const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type])
if (!mountButtonBefore) render(<WatchOnLbryButton />, playerButtonMountPoint)
else {
if (mountButtonBefore.previousSibling !== buttonMountPoint)
if (buttonMountPoint.getAttribute('data-id') !== params.source.id) {
mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore)
buttonMountPoint.setAttribute('data-id', params.source.id)
}
render(<WatchOnLbryButton target={params.target} source={params.source} />, buttonMountPoint)
}
}
@ -174,7 +191,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
const params: Parameters<typeof requestResolveById>[0] = sources.map((source) => ({ id: source.id, type: source.type }))
const platform = targetPlatformSettings[settings.targetPlatform]
const results = await requestResolveById(params)
const results = await requestResolveById(params) ?? []
const targets: Record<string, Target | null> = Object.fromEntries(
sources.map((source) => {
const result = results[source.id]
@ -251,8 +268,6 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
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'))

4
src/settings/index.ts
View file

@ -111,9 +111,9 @@ export const sourcePlatfromSettings = {
mountPoints: {
mountButtonBefore: {
video: 'ytd-video-owner-renderer~#subscribe-button',
channel: '#channel-header-container #buttons'
channel: '#channel-header-container #buttons #subscribe-button'
},
mountPlayerButtonBefore: 'ytd-player .ytp-right-controls',
mountPlayerButtonBefore: 'ytd-watch-flexy ytd-player .ytp-right-controls',
},
videoPlayer: '#ytd-player video',
videoDescription: 'ytd-video-secondary-info-renderer #description',