Fix post-editor preview mode #7532

Merged
infinite-persistence merged 2 commits from fix.mde.preview into master 2022-04-13 18:22:05 +02:00
14 changed files with 61 additions and 24 deletions
Showing only changes of commit 579b98bac2 - Show all commits

View file

@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased for Desktop]
### Added
- Uploads: show placeholder when loading page _community pr!_ ([#7531](https://github.com/lbryio/lbry-desktop/pull/7531))
### Changed

View file

@ -4,5 +4,11 @@
<dict>
<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.cs.disable-library-validation</key>
<true/>
</dict>
</plist>

View file

@ -159,9 +159,9 @@
"lbry-format": "https://github.com/lbryio/lbry-format.git",
"lint-staged": "^7.0.2",
"localforage": "^1.7.1",
"lodash-es": "^4.17.14",
"lodash-es": "^4.17.21",
"mammoth": "^1.4.16",
"moment": "^2.22.0",
"moment": "^2.29.2",
"node-abi": "^2.5.1",
"node-fetch": "^2.6.7",
"node-html-parser": "^5.1.0",

View file

@ -2306,5 +2306,6 @@
"Privacy": "Privacy",
"LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?": "LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?",
"Yes, share with LBRY": "Yes, share with LBRY",
"This refundable boost will improve the discoverability of this %claimTypeText% while active. ": "This refundable boost will improve the discoverability of this %claimTypeText% while active. ",
"--end--": "--end--"
}

View file

@ -347,7 +347,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
<>
{!pending ? (
<NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
<FileThumbnail thumbnail={thumbnailUrl}>
<FileThumbnail uri={uri} thumbnail={thumbnailUrl}>
<div className="claim-preview__hover-actions">
{isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
</div>
@ -364,7 +364,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
</FileThumbnail>
</NavLink>
) : (
<FileThumbnail thumbnail={thumbnailUrl} />
<FileThumbnail uri={uri} thumbnail={thumbnailUrl} />
)}
</>
)}

View file

@ -175,7 +175,7 @@ function ClaimPreviewTile(props: Props) {
})}
>
<NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>
<FileThumbnail thumbnail={thumbnailUrl} allowGifs>
<FileThumbnail uri={uri} thumbnail={thumbnailUrl} allowGifs>
{!isChannel && (
<React.Fragment>
<div className="claim-preview__hover-actions">

View file

@ -1,9 +1,11 @@
import { connect } from 'react-redux';
import { doResolveUri } from 'redux/actions/claims';
import { makeSelectClaimForUri } from 'redux/selectors/claims';
import { makeSelectContentPositionForUri } from 'redux/selectors/content';
import CardMedia from './view';
const select = (state, props) => ({
position: makeSelectContentPositionForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
});

View file

@ -16,10 +16,11 @@ type Props = {
claim: ?StreamClaim,
doResolveUri: (string) => void,
className?: string,
position?: number,
};
function FileThumbnail(props: Props) {
const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props;
const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className, position } = props;
const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailFromClaim =
@ -29,6 +30,14 @@ function FileThumbnail(props: Props) {
const hasResolvedClaim = claim !== undefined;
const isGif = thumbnail && thumbnail.endsWith('gif');
const media = claim && claim.value && (claim.value.video || claim.value.audio);
const duration = media && media.duration;
const viewedBar = position && duration && (
<div className="file-thumbnail__viewed-bar">
<div className="file-thumbnail__viewed-bar-progress" style={{ width: (position / duration) * 100 + '%' }} />
</div>
);
React.useEffect(() => {
if (!hasResolvedClaim && uri) {
doResolveUri(uri);
@ -39,6 +48,7 @@ function FileThumbnail(props: Props) {
return (
<FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
{children}
{viewedBar}
</FreezeframeWrapper>
);
}
@ -59,6 +69,7 @@ function FileThumbnail(props: Props) {
return (
<Thumb thumb={thumbnailUrl} fallback={fallback} className={className}>
{children}
{viewedBar}
</Thumb>
);
}
@ -69,6 +80,7 @@ function FileThumbnail(props: Props) {
})}
>
{children}
{viewedBar}
</div>
);
}

View file

@ -62,7 +62,7 @@ function WalletSendTip(props: Props) {
const [tipAmount, setTipAmount] = usePersistedState('comment-support:customTip', 1.0);
const [isOnConfirmationPage, setConfirmationPage] = React.useState(false);
const [tipError, setTipError] = React.useState();
const [activeTab, setActiveTab] = usePersistedState(TAB_BOOST);
const [activeTab, setActiveTab] = usePersistedState('comment-tip:tab', TAB_BOOST);
const [disableSubmitButton, setDisableSubmitButton] = React.useState();
/** CONSTS **/

View file

@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react';
import Button from 'component/button';
import ClaimList from 'component/claimList';
import ClaimPreview from 'component/claimPreview';
import Page from 'component/page';
import Paginate from 'component/common/paginate';
import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
@ -87,7 +88,6 @@ function FileListPublished(props: Props) {
}
headerAltControls={
<div className="card__actions--inline">
{fetching && <Spinner type="small" />}
{!fetching && (
<Button
button="alt"
@ -106,8 +106,11 @@ function FileListPublished(props: Props) {
</div>
}
persistedStorageKey="claim-list-published"
uris={urls}
uris={fetching ? [] : urls}
loading={fetching}
/>
{fetching &&
new Array(Number(pageSize)).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
<Paginate totalPages={urlTotal > 0 ? Math.ceil(urlTotal / Number(pageSize)) : 1} />
</>
)}

View file

@ -20,7 +20,7 @@ export const makeSelectMyReactionForUri = (uri) =>
}
const claimId = claim.claim_id;
const myReactions = reactions.my_reactions[claimId];
const myReactions = reactions.my_reactions ? reactions.my_reactions[claimId] : {};
if (myReactions[REACTION_TYPES.LIKE]) {
return REACTION_TYPES.LIKE;
} else if (myReactions[REACTION_TYPES.DISLIKE]) {

View file

@ -26,6 +26,7 @@
@import 'component/file-list';
@import 'component/file-properties';
@import 'component/file-render';
@import 'component/file-thumbnail';
@import 'component/footer';
@import 'component/form-field';
@import 'component/header';

View file

@ -0,0 +1,13 @@
.file-thumbnail__viewed-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: gray;
}
.file-thumbnail__viewed-bar-progress {
height: 5px;
background-color: red;
}

View file

@ -3134,11 +3134,7 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
base64-js@^1.0.2:
version "1.3.1"
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
base64-js@^1.3.1, base64-js@^1.5.1:
base64-js@^1.0.2, base64-js@^1.3.1, base64-js@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@ -8412,9 +8408,10 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.14, lodash-es@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
lodash-es@^4.17.21, lodash-es@^4.2.1:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.camelcase@^4.3.0:
version "4.3.0"
@ -9049,9 +9046,10 @@ modify-filename@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/modify-filename/-/modify-filename-1.1.0.tgz#9a2dec83806fbb2d975f22beec859ca26b393aa1"
moment@^2.22.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
moment@^2.29.2:
version "2.29.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.2.tgz#00910c60b20843bcba52d37d58c628b47b1f20e4"
integrity sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==
move-concurrently@^1.0.1:
version "1.0.1"
@ -9964,9 +9962,9 @@ please-upgrade-node@^3.0.2, please-upgrade-node@^3.2.0:
semver-compare "^1.0.0"
plist@^3.0.1, plist@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.4.tgz#a62df837e3aed2bb3b735899d510c4f186019cbe"
integrity sha512-ksrr8y9+nXOxQB2osVNqrgvX/XQPOXaU4BQMKjYq8PvaY1U18mo+fKgBSwzK+luSyinOuPae956lSVcBwxlAMg==
version "3.0.5"
resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.5.tgz#2cbeb52d10e3cdccccf0c11a63a85d830970a987"
integrity sha512-83vX4eYdQp3vP9SxuYgEM/G/pJQqLUz/V/xzPrzruLs7fz7jxGQ1msZ/mg1nwZxUSuOp4sb+/bEIbRrbzZRxDA==
dependencies:
base64-js "^1.5.1"
xmlbuilder "^9.0.7"