Fix post-editor preview mode #7532
14 changed files with 61 additions and 24 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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--"
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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),
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 **/
|
||||
|
|
|
@ -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} />
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -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]) {
|
||||
|
|
|
@ -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';
|
||||
|
|
13
ui/scss/component/_file-thumbnail.scss
Normal file
13
ui/scss/component/_file-thumbnail.scss
Normal 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;
|
||||
}
|
26
yarn.lock
26
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue