From b50779f1e50a699721b7b5001579fb92945d0aef Mon Sep 17 00:00:00 2001 From: zeppi Date: Thu, 21 Oct 2021 22:41:45 -0400 Subject: [PATCH] custom share url --- static/app-strings.json | 3 ++ ui/component/settingShareUrl/index.js | 17 +++++++ ui/component/settingShareUrl/view.jsx | 70 +++++++++++++++++++++++++++ ui/component/settingSystem/view.jsx | 4 ++ ui/component/socialShare/index.js | 4 ++ ui/component/socialShare/view.jsx | 19 ++++++-- ui/constants/settings.js | 2 + ui/redux/reducers/settings.js | 2 + 8 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 ui/component/settingShareUrl/index.js create mode 100644 ui/component/settingShareUrl/view.jsx diff --git a/static/app-strings.json b/static/app-strings.json index f42efe9a4..2ca94edf1 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2195,5 +2195,8 @@ "Trending for #Music": "Trending for #Music", "You sent %lbc% as a tip, Mahalo!": "You sent %lbc% as a tip, Mahalo!", "Export All": "Export All", + "Default share url (%name%)": "Default share url (%name%)", + "Custom share url": "Custom share url", + "Share url": "Share url", "--end--": "--end--" } diff --git a/ui/component/settingShareUrl/index.js b/ui/component/settingShareUrl/index.js new file mode 100644 index 000000000..cd9dd5aca --- /dev/null +++ b/ui/component/settingShareUrl/index.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import * as SETTINGS from 'constants/settings'; +import { doSetClientSetting } from 'redux/actions/settings'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import SettingShareUrl from './view'; + +const select = (state) => ({ + customShareUrlEnabled: makeSelectClientSetting(SETTINGS.CUSTOM_SHARE_URL_ENABLED)(state), + customShareUrl: makeSelectClientSetting(SETTINGS.CUSTOM_SHARE_URL)(state), +}); + +const perform = (dispatch) => ({ + setCustomShareUrlEnabled: (val) => dispatch(doSetClientSetting(SETTINGS.CUSTOM_SHARE_URL_ENABLED, val, true)), + setCustomShareUrl: (url) => dispatch(doSetClientSetting(SETTINGS.CUSTOM_SHARE_URL, url, true)), +}); + +export default connect(select, perform)(SettingShareUrl); diff --git a/ui/component/settingShareUrl/view.jsx b/ui/component/settingShareUrl/view.jsx new file mode 100644 index 000000000..c58181ff1 --- /dev/null +++ b/ui/component/settingShareUrl/view.jsx @@ -0,0 +1,70 @@ +// @flow +import { SHARE_DOMAIN_URL, URL } from 'config'; +import React from 'react'; +import { FormField } from 'component/common/form'; + +const DEBOUNCE_TEXT_INPUT_MS = 500; + +type Props = { + customShareUrlEnabled: boolean, + customShareUrl: string, + setCustomShareUrlEnabled: (boolean) => void, + setCustomShareUrl: (string) => void, +}; + +function SettingShareUrl(props: Props) { + const { customShareUrlEnabled, customShareUrl, setCustomShareUrlEnabled, setCustomShareUrl } = props; + const [url, setUrl] = React.useState(customShareUrl); + + React.useEffect(() => { + const timer = setTimeout(() => { + if (url !== customShareUrl) { + setCustomShareUrl(url); + } + }, DEBOUNCE_TEXT_INPUT_MS); + + return () => clearTimeout(timer); + }, [url, customShareUrl, customShareUrlEnabled, setCustomShareUrl]); + + return ( + + + { + if (e.target.checked) { + setCustomShareUrlEnabled(false); + } + }} + /> + { + if (e.target.checked) { + setCustomShareUrlEnabled(true); + } + }} + /> + + {customShareUrlEnabled && ( +
+ setUrl(e.target.value)} + /> +
+ )} + + + ); +} + +export default SettingShareUrl; diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx index 529dfb1ee..c74c83aa1 100644 --- a/ui/component/settingSystem/view.jsx +++ b/ui/component/settingSystem/view.jsx @@ -10,6 +10,7 @@ import I18nMessage from 'component/i18nMessage'; import SettingAutoLaunch from 'component/settingAutoLaunch'; import SettingClosingBehavior from 'component/settingClosingBehavior'; import SettingCommentsServer from 'component/settingCommentsServer'; +import SettingShareUrl from 'component/settingShareUrl'; import SettingsRow from 'component/settingsRow'; import SettingWalletServer from 'component/settingWalletServer'; import Spinner from 'component/spinner'; @@ -385,6 +386,9 @@ export default function SettingSystem(props: Props) { + + + {/* @endif */} ({ claim: makeSelectClaimForUri(props.uri)(state), @@ -10,6 +12,8 @@ const select = (state, props) => ({ user: selectUser(state), title: makeSelectTitleForUri(props.uri)(state), position: makeSelectContentPositionForUri(props.uri)(state), + customShareUrlEnabled: makeSelectClientSetting(SETTINGS.CUSTOM_SHARE_URL_ENABLED)(state), + customShareUrl: makeSelectClientSetting(SETTINGS.CUSTOM_SHARE_URL)(state), }); export default connect(select)(SocialShare); diff --git a/ui/component/socialShare/view.jsx b/ui/component/socialShare/view.jsx index 9849bc098..80be9e4f4 100644 --- a/ui/component/socialShare/view.jsx +++ b/ui/component/socialShare/view.jsx @@ -26,10 +26,22 @@ type Props = { user: any, position: number, collectionId?: number, + customShareUrlEnabled: boolean, + customShareUrl: string, }; function SocialShare(props: Props) { - const { claim, title, referralCode, user, webShareable, position, collectionId } = props; + const { + claim, + title, + referralCode, + user, + webShareable, + position, + collectionId, + customShareUrlEnabled, + customShareUrl, + } = props; const [showEmbed, setShowEmbed] = React.useState(false); const [includeCollectionId, setIncludeCollectionId] = React.useState(Boolean(collectionId)); // unless it *is* a collection? const [showClaimLinks, setShowClaimLinks] = React.useState(false); @@ -37,6 +49,7 @@ function SocialShare(props: Props) { const [startTime, setStartTime]: [string, any] = React.useState(secondsToHms(position)); const startTimeSeconds: number = hmsToSeconds(startTime); const isMobile = useIsMobile(); + const shareDomain = customShareUrlEnabled && customShareUrl ? customShareUrl : SHARE_DOMAIN; if (!claim) { return null; @@ -54,14 +67,14 @@ function SocialShare(props: Props) { const lbryWebUrl: string = generateLbryWebUrl(lbryUrl); const includedCollectionId = collectionId && includeCollectionId ? collectionId : null; const encodedLbryURL: string = generateEncodedLbryURL( - SHARE_DOMAIN, + shareDomain, lbryWebUrl, includeStartTime, startTimeSeconds, includedCollectionId ); const shareUrl: string = generateShareUrl( - SHARE_DOMAIN, + shareDomain, lbryUrl, referralCode, rewardsApproved, diff --git a/ui/constants/settings.js b/ui/constants/settings.js index 2e55ef158..9dc673549 100644 --- a/ui/constants/settings.js +++ b/ui/constants/settings.js @@ -41,6 +41,8 @@ export const VIDEO_THEATER_MODE = 'video_theater_mode'; export const VIDEO_PLAYBACK_RATE = 'video_playback_rate'; export const CUSTOM_COMMENTS_SERVER_ENABLED = 'custom_comments_server_enabled'; export const CUSTOM_COMMENTS_SERVER_URL = 'custom_comments_server_url'; +export const CUSTOM_SHARE_URL_ENABLED = 'custom_share_url_enabled'; +export const CUSTOM_SHARE_URL = 'custom_share_url'; export const SETTINGS_GRP = { APPEARANCE: 'appearance', diff --git a/ui/redux/reducers/settings.js b/ui/redux/reducers/settings.js index 2e9605acd..966c61d36 100644 --- a/ui/redux/reducers/settings.js +++ b/ui/redux/reducers/settings.js @@ -55,6 +55,8 @@ const defaultState = { [SETTINGS.DESKTOP_WINDOW_ZOOM]: 1, [SETTINGS.CUSTOM_COMMENTS_SERVER_ENABLED]: false, [SETTINGS.CUSTOM_COMMENTS_SERVER_URL]: '', + [SETTINGS.CUSTOM_SHARE_URL_ENABLED]: false, + [SETTINGS.CUSTOM_SHARE_URL]: '', [SETTINGS.DARK_MODE_TIMES]: { from: { hour: '21', min: '00', formattedTime: '21:00' },