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

🍣 button changes

Browse source
This commit is contained in:
Shiba 2022-07-25 23:25:33 +00:00
parent 8f88dbebe7
commit de43b990f2
2 changed files with 37 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
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={target.platform === targetPlatformSettings.app ? '' : '_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={target.platform === targetPlatformSettings.app ? '' : '_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)
}
}

6
src/settings/index.ts
View file

@ -84,7 +84,7 @@ export const targetPlatformSettings = {
icon: chrome.runtime.getURL('assets/icons/lbry/madiator-logo.svg'),
style: {
button: { flexDirection: 'row-reverse' },
icon: { transform: 'scale(1.2)' }
icon: { }
}
}
}),
@ -137,9 +137,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',