LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Allow users to hide content they've already viewed

Browse source
This commit is contained in:
David Garrett 2022-11-21 19:12:54 -05:00
parent f36282555c
commit 17332979b6
9 changed files with 156 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.vs/lbry-desktop/v17/.wsuo
View file

Binary file not shown.

19
ui/component/channelForm/view.jsx
View file

@ -106,6 +106,7 @@ function ChannelForm(props: Props) {
const languageParam = params.languages;
const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
const secondaryLanguage = Array.isArray(languageParam) && languageParam.length >= 2 && languageParam[1];
const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); // UPDATE: Experimenting with hiding watched content
const submitLabel = React.useMemo(() => {
if (isClaimingInitialRewards) {
return __('Claiming credits...');
@ -240,6 +241,23 @@ function ChannelForm(props: Props) {
errorMsg = __('Invalid %error_type%', { error_type: (thumbError && 'thumbnail') || (coverError && 'cover image') });
}
// UPDATE: Add "Hide Watched" to channel pages
function getHideWatchedElem() {
return (
<div className={classnames(`card claim-search__menus`)}>
<FormField
label={__('Hide Watched')}
name="hide_watched"
type="checkbox"
checked={hideWatched}
onChange={() => {
setHideWatched((prev) => !prev);
}}
/>
</div>
);
}
React.useEffect(() => {
let nameError;
if (!name && name !== undefined) {
@ -526,6 +544,7 @@ function ChannelForm(props: Props) {
<ClaimAbandonButton uri={uri} abandonActionCallback={() => replace(`/$/${PAGES.CHANNELS}`)} />
</div>
)}
{getHideWatchedElem()}
</>
}
/>

34
ui/component/claimListDiscover/view.jsx
View file

@ -318,25 +318,21 @@ function ClaimListDiscover(props: Props) {
if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
} else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
// Warning - hack below
// If users are following more than 10 channels or tags, limit results to stuff less than a year old
// For more than 20, drop it down to 6 months
// This helps with timeout issues for users that are following a ton of stuff
// https://github.com/lbryio/lbry-sdk/issues/2420
if (
(options.channel_ids && options.channel_ids.length > 20) ||
(options.any_tags && options.any_tags.length > 20)
) {
options.release_time = `>${Math.floor(moment().subtract(3, CS.FRESH_MONTH).startOf('week').unix())}`;
} else if (
(options.channel_ids && options.channel_ids.length > 10) ||
(options.any_tags && options.any_tags.length > 10)
) {
options.release_time = `>${Math.floor(moment().subtract(1, CS.FRESH_YEAR).startOf('week').unix())}`;
} else {
// Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
options.release_time = `<${Math.floor(moment().startOf('minute').unix())}`;
}
// UPDATE: Commented out these lines of code to truly sort by oldest first...
//if (
// (options.channel_ids && options.channel_ids.length > 20) ||
// (options.any_tags && options.any_tags.length > 20)
//) {
// options.release_time = `>${Math.floor(moment().subtract(3, CS.FRESH_MONTH).startOf('week').unix())}`;
//} else if (
// (options.channel_ids && options.channel_ids.length > 10) ||
// (options.any_tags && options.any_tags.length > 10)
//) {
// options.release_time = `>${Math.floor(moment().subtract(1, CS.FRESH_YEAR).startOf('week').unix())}`;
//} else {
// // Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
// options.release_time = `<${Math.floor(moment().startOf('minute').unix())}`;
//}
}
}

24
ui/component/claimListHeader/view.jsx
View file

@ -67,6 +67,7 @@ function ClaimListHeader(props: Props) {
const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
const urlParams = new URLSearchParams(search);
const freshnessParam = freshness || urlParams.get(CS.FRESH_KEY) || defaultFreshness;
const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); // UPDATE: Experimenting with hiding watched content
const contentTypeParam = urlParams.get(CS.CONTENT_KEY);
const streamTypeParam =
streamType || (CS.FILE_TYPES.includes(contentTypeParam) && contentTypeParam) || defaultStreamType || null;
@ -99,6 +100,23 @@ function ClaimListHeader(props: Props) {
? languageParam !== languageSetting && languageParam !== null
: languageParam !== CS.LANGUAGES_ALL && languageParam !== null;
// UPDATE: Experimenting with hiding watched content
// Adding a Hide Watched checkbox to the main menu
function getHideWatchedElem() {
return (
<div className={`claim-search__checkbox`}>
<FormField
name="hide_watched"
type="checkbox"
checked={hideWatched}
onChange={() => {
setHideWatched((prev) => !prev);
}}
/>
</div>
);
}
React.useEffect(() => {
if (action !== 'POP' && isFiltered()) {
setExpanded(true);
@ -483,8 +501,8 @@ function ClaimListHeader(props: Props) {
})}
</FormField>
</div>
)}
)}
{channelIdsInUrl && (
<div className={'claim-search__input-container'}>
<label>{__('Advanced Filters from URL')}</label>
@ -496,6 +514,10 @@ function ClaimListHeader(props: Props) {
/>
</div>
)}
<div className={'checkbox-label'}>
<label>Hide Watched Content</label>
{getHideWatchedElem()}
</div>
</div>
</>
)}

2
ui/component/claimPreview/index.js
View file

@ -21,6 +21,7 @@ import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
import { isClaimNsfw } from 'util/claim';
import ClaimPreview from './view';
import formatMediaDuration from 'util/formatMediaDuration';
import { makeSelectContentWatchedPercentageForUri } from 'redux/selectors/content'; // UPDATE: Added mSCWPFU (Watched content)
const select = (state, props) => {
const claim = props.uri && selectClaimForUri(state, props.uri);
@ -46,6 +47,7 @@ const select = (state, props) => {
wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
lang: selectLanguage(state),
isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80, // UPDATE: Added isWatched, getting percent watched
};
};

16
ui/component/claimPreview/view.jsx
View file

@ -32,6 +32,7 @@ import ClaimPreviewNoContent from './claim-preview-no-content';
import CollectionEditButtons from 'component/collectionEditButtons';
import { useIsMobile } from 'effects/use-screensize';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import usePersistedState from 'effects/use-persisted-state'; // UPDATE: usePersistedState is required for watched content
// preview images used on the landing page and on the channel page
type Props = {
@ -82,6 +83,7 @@ type Props = {
showEdit?: boolean,
dragHandleProps?: any,
unavailableUris?: Array<string>,
isWatched: boolean, // UPDATE: Declare isWatched variable
};
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -141,10 +143,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
showEdit,
dragHandleProps,
unavailableUris,
isWatched, // UPDATE: Variables to use in the ClaimPreviewTile
} = props;
const isMobile = useIsMobile();
const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); //UPDATE: Use hideWatched
const isCollection = claim && claim.value_type === 'collection';
const collectionClaimId = isCollection && claim && claim.claim_id;
const listId = collectionId || collectionClaimId;
@ -255,6 +258,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
}
// Weird placement warning
// Make sure this happens after we figure out if this claim needs to be hidden
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, shouldHide);
@ -278,6 +282,16 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
}, [isValid, uri, isResolvingUri, shouldFetch, resolveUri]);
// UPDATE: Hiding watched content
if (isWatched && hideWatched) {
shouldHide = true;
}
if (shouldHide) {
return null;
}
// END OF UPDATE:
if (shouldHide && !showNullPlaceholder) {
return null;
}

2
ui/component/claimPreviewTile/index.js
View file

@ -10,6 +10,7 @@ import { doFileGet } from 'redux/actions/file';
import { doResolveUri } from 'redux/actions/claims';
import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
import { selectShowMatureContent } from 'redux/selectors/settings';
import { makeSelectContentWatchedPercentageForUri } from 'redux/selectors/content'; // UPDATE: Added percentage watched element
import { isClaimNsfw } from 'util/claim';
import ClaimPreviewTile from './view';
import formatMediaDuration from 'util/formatMediaDuration';
@ -30,6 +31,7 @@ const select = (state, props) => {
showMature: selectShowMatureContent(state),
isMature: claim ? isClaimNsfw(claim) : false,
viewCount: selectViewCountForUri(state, props.uri),
isWatched: makeSelectContentWatchedPercentageForUri(props.uri)(state) > 80, // UPDATE: Get isWatched view percentage and only show < 80%
};
};

11
ui/component/claimPreviewTile/view.jsx
View file

@ -20,6 +20,7 @@ import ClaimMenuList from 'component/claimMenuList';
import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
// $FlowFixMe cannot resolve ...
import PlaceholderTx from 'static/img/placeholderTx.gif';
import usePersistedState from 'effects/use-persisted-state'; // UPDATE: usePersistedState is required for watched content
type Props = {
uri: string,
@ -42,6 +43,7 @@ type Props = {
collectionId?: string,
viewCount: string,
swipeLayout: boolean,
isWatched: boolean, // UPDATE: Declare isWatched variable
};
// preview image cards used in related video functionality, channel overview page and homepage
@ -67,10 +69,12 @@ function ClaimPreviewTile(props: Props) {
mediaDuration,
viewCount,
swipeLayout = false,
isWatched, // UPDATE: Variables to use in the ClaimPreviewTile
} = props;
const isRepost = claim && claim.repost_channel_url;
const isCollection = claim && claim.value_type === 'collection';
const isStream = claim && claim.value_type === 'stream';
const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); //UPDATE: Use hideWatched
// $FlowFixMe
const isPlayable =
claim &&
@ -126,18 +130,23 @@ function ClaimPreviewTile(props: Props) {
let shouldHide = false;
// UPDATE: Hiding watched content
if (isMature && !showMature) {
// Unfortunately needed until this is resolved
// https://github.com/lbryio/lbry-sdk/issues/2785
shouldHide = true;
} else {
shouldHide =
banState.blacklisted || banState.filtered || (!showHiddenByUser && (banState.muted || banState.blocked));
banState.blacklisted ||
banState.filtered ||
(!showHiddenByUser && (banState.muted || banState.blocked)) ||
(isWatched && hideWatched);
}
if (shouldHide) {
return null;
}
// END OF UPDATE:
const isChannelPage = location.pathname.startsWith('/@');

44
ui/component/searchOptions/view.jsx
View file

@ -6,6 +6,7 @@ import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import Icon from 'component/common/icon';
import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state';
const CLAIM_TYPES = {
[SEARCH_OPTIONS.INCLUDE_FILES]: 'Files',
@ -61,6 +62,8 @@ const SearchOptions = (props: Props) => {
delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_IMAGE];
}
const [hideWatched, setHideWatched] = usePersistedState('hideWatched', false); // UPDATE: Experimenting with hiding watched content
React.useEffect(() => {
// We no longer let the user set the search results count, but the value
// will be in local storage for existing users. Override that.
@ -69,6 +72,31 @@ const SearchOptions = (props: Props) => {
}
}, []);
// UPDATE: Adding Hide Watched Content checkbox to search
function getHideWatchedElem() {
return (
<div className={`claim-search__checkbox_searchbox`}>
<FormField
name="hide_watched"
type="checkbox"
checked={hideWatched}
onChange={() => {
setHideWatched((prev) => !prev);
}}
/>
<Icon
className="icon--help"
icon={ICONS.HELP}
tooltip
size={16}
customTooltipText={__(
'Hide content you have already viewed from search results.'
)}
/>
</div>
);
}
function updateSearchOptions(option, value) {
setSearchOption(option, value);
if (onSearchOptionsChanged) {
@ -149,7 +177,8 @@ const SearchOptions = (props: Props) => {
</>
);
const otherOptionsElem = (
// UPDATE: Changed element name to exactMatchElem
const exactMatchElem = (
<>
<div className="filter-values">
<FormField
@ -157,7 +186,6 @@ const SearchOptions = (props: Props) => {
name="exact-match"
checked={options[SEARCH_OPTIONS.EXACT]}
onChange={() => updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])}
label={__('Exact match')}
/>
<Icon
className="icon--help"
@ -169,6 +197,7 @@ const SearchOptions = (props: Props) => {
)}
/>
</div>
</>
);
@ -194,6 +223,13 @@ const SearchOptions = (props: Props) => {
</div>
);
// UPDATE: Declare constant for the Hide Watch Content element
const hideWatchedElem = (
<div>
{getHideWatchedElem()}
</div>
);
const sortByElem = (
<div className="filter-values">
<FormField
@ -211,6 +247,7 @@ const SearchOptions = (props: Props) => {
const uploadDateLabel =
options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS ? __('Creation Date') : __('Upload Date');
// UPDATE: Added row to table for hiding watched content in search settings
return (
<div>
<Button
@ -230,7 +267,8 @@ const SearchOptions = (props: Props) => {
{addRow(__('Type'), typeElem)}
{addRow(uploadDateLabel, uploadDateElem)}
{addRow(__('Sort By'), sortByElem)}
{addRow(__('Other Options'), otherOptionsElem)}
{addRow(__('Exact Match'), exactMatchElem)}
{addRow(__('Hide Watched Content'), hideWatchedElem)}
</tbody>
</table>
</Form>