From ac911e6816b5c0e4a902a4d19c6af6ff60fe7b88 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sat, 11 Dec 2021 22:39:04 +0000 Subject: [PATCH] Madiator icon added --- src/common/settings.ts | 7 +++--- src/icons/lbry/madiator-logo.svg | 38 ++++++++++++++++++++++++++++++++ src/manifest.json | 3 ++- src/scripts/ytContent.tsx | 37 ++++++++++++++++++++----------- 4 files changed, 68 insertions(+), 17 deletions(-) create mode 100644 src/icons/lbry/madiator-logo.svg diff --git a/src/common/settings.ts b/src/common/settings.ts index dfb4ea4..feab124 100644 --- a/src/common/settings.ts +++ b/src/common/settings.ts @@ -4,12 +4,13 @@ export interface PlatformSettings { domainPrefix: string display: string + theme: string } export const platformSettings: Record = { - 'madiator.com': { domainPrefix: 'https://madiator.com/', display: 'madiator.com' }, - odysee: { domainPrefix: 'https://odysee.com/', display: 'odysee' }, - app: { domainPrefix: 'lbry://', display: 'App' }, + 'madiator.com': { domainPrefix: 'https://madiator.com/', display: 'Madiator.com', theme: '#075656' }, + odysee: { domainPrefix: 'https://odysee.com/', display: 'Odysee', theme: '#1e013b' }, + app: { domainPrefix: 'lbry://', display: 'App', theme: '#075656' }, }; export const getPlatfromSettingsEntiries = () => { diff --git a/src/icons/lbry/madiator-logo.svg b/src/icons/lbry/madiator-logo.svg new file mode 100644 index 0000000..207a04c --- /dev/null +++ b/src/icons/lbry/madiator-logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/manifest.json b/src/manifest.json index 1761243..9a0456c 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -37,7 +37,8 @@ "popup.html", "tools/YTtoLBRY.html", "icons/lbry/lbry-logo.svg", - "icons/lbry/odysee-logo.svg" + "icons/lbry/odysee-logo.svg", + "icons/lbry/madiator-logo.svg" ], "icons": { "16": "icons/wol/icon16.png", diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx index a53d45e..317882f 100644 --- a/src/scripts/ytContent.tsx +++ b/src/scripts/ytContent.tsx @@ -7,7 +7,11 @@ const sleep = (t: number) => new Promise(resolve => setTimeout(resolve, t)); interface ButtonSettings { text: string icon: string - style?: JSX.CSSProperties + style?: + { + icon?: JSX.CSSProperties + button?: JSX.CSSProperties + } } const buttonSettings: Record = { @@ -16,12 +20,16 @@ const buttonSettings: Record = { icon: chrome.runtime.getURL('icons/lbry/lbry-logo.svg') }, 'madiator.com': { - text: 'Watch on LBRY', - icon: chrome.runtime.getURL('icons/lbry/lbry-logo.svg') + text: 'Watch on', + icon: chrome.runtime.getURL('icons/lbry/madiator-logo.svg'), + style: { + button: { flexDirection: 'row-reverse' }, + icon: { transform: 'scale(1.2)' } + } }, odysee: { - text: 'Watch on Odysee', icon: chrome.runtime.getURL('icons/lbry/odysee-logo.svg'), - style: { backgroundColor: '#1e013b' }, + text: 'Watch on Odysee', + icon: chrome.runtime.getURL('icons/lbry/odysee-logo.svg') }, }; @@ -42,22 +50,25 @@ export function WatchOnLbryButton({ platform = 'app', pathname, time }: ButtonPa return
- - {buttonSetting.text} -
} style={{ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '12px', borderRadius: '2px', - backgroundColor: '#075656', + backgroundColor: platformSetting.theme, border: '0', color: 'whitesmoke', padding: '10px 16px', marginRight: '5px', fontSize: '14px', textDecoration: 'none', - ...buttonSetting.style, - }} /> + ...buttonSetting.style?.button, + }}> + + {buttonSetting.text} + ; }