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

Merge pull request #2614 from lbryio/fixes

Browse source 
use short_url for channels and files and a couple fixes
This commit is contained in:
Sean Yesmunt 2019-07-08 23:22:43 -04:00 committed by GitHub
commit 55a3e2e9ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 162 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -124,7 +124,7 @@
"jsmediatags": "^3.8.1", "jsmediatags": "^3.8.1",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"lbry-format": "https://github.com/lbryio/lbry-format.git", "lbry-format": "https://github.com/lbryio/lbry-format.git",
"lbry-redux": "lbryio/lbry-redux#c83489e78ed368d368ad25552fce25e7de2d64b5", "lbry-redux": "lbryio/lbry-redux#bb82aed61a5569e565daa784eb25fc1d639c0c22",
"lbryinc": "lbryio/lbryinc#43d382d9b74d396a581a74d87e4c53105e04f845", "lbryinc": "lbryio/lbryinc#43d382d9b74d396a581a74d87e4c53105e04f845",
"lint-staged": "^7.0.2", "lint-staged": "^7.0.2",
"localforage": "^1.7.1", "localforage": "^1.7.1",

16
src/ui/component/claimListDiscover/view.jsx
View file

@ -98,6 +98,10 @@ function ClaimListDiscover(props: Props) {
return type === SEARCH_SORT_YOU ? __('Tags You Follow') : __('Channels You Follow'); return type === SEARCH_SORT_YOU ? __('Tags You Follow') : __('Channels You Follow');
} }
function resetList() {
setPage(1);
}
const header = ( const header = (
<h1 className="card__title--flex"> <h1 className="card__title--flex">
<FormField <FormField
@ -105,7 +109,10 @@ function ClaimListDiscover(props: Props) {
type="select" type="select"
name="trending_sort" name="trending_sort"
value={typeSort} value={typeSort}
onChange={e => setTypeSort(e.target.value)} onChange={e => {
resetList();
setTypeSort(e.target.value);
}}
> >
{SEARCH_TYPES.map(type => ( {SEARCH_TYPES.map(type => (
<option key={type} value={type}> <option key={type} value={type}>
@ -123,7 +130,7 @@ function ClaimListDiscover(props: Props) {
className="claim-list__dropdown" className="claim-list__dropdown"
value={personalSort} value={personalSort}
onChange={e => { onChange={e => {
setPage(1); resetList();
setPersonalSort(e.target.value); setPersonalSort(e.target.value);
}} }}
> >
@ -140,7 +147,10 @@ function ClaimListDiscover(props: Props) {
type="select" type="select"
name="trending_time" name="trending_time"
value={timeSort} value={timeSort}
onChange={e => setTimeSort(e.target.value)} onChange={e => {
resetList();
setTimeSort(e.target.value);
}}
> >
{SEARCH_TIMES.map(time => ( {SEARCH_TIMES.map(time => (
<option key={time} value={time}> <option key={time} value={time}>

14
src/ui/component/claimUri/index.js Normal file
View file

@ -0,0 +1,14 @@
import { connect } from 'react-redux';
import { makeSelectShortUrlForUri, doToast } from 'lbry-redux';
import ClaimUri from './view';
const select = (state, props) => ({
shortUrl: makeSelectShortUrlForUri(props.uri)(state),
});
export default connect(
select,
{
doToast,
}
)(ClaimUri);

30
src/ui/component/claimUri/view.jsx Normal file
View file

@ -0,0 +1,30 @@
// @flow
import React from 'react';
import { clipboard } from 'electron';
import Button from 'component/button';
type Props = {
shortUrl: ?string,
uri: string,
doToast: ({ message: string }) => void,
};
function ClaimUri(props: Props) {
const { shortUrl, uri, doToast } = props;
return (
<Button
className="media__uri"
button="alt"
label={shortUrl || uri}
onClick={() => {
clipboard.writeText(shortUrl || uri);
doToast({
message: __('Copied'),
});
}}
/>
);
}
export default ClaimUri;

6
src/ui/page/channel/view.jsx
View file

@ -12,6 +12,7 @@ import ChannelContent from 'component/channelContent';
import ChannelAbout from 'component/channelAbout'; import ChannelAbout from 'component/channelAbout';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import ChannelEdit from 'component/channelEdit'; import ChannelEdit from 'component/channelEdit';
import ClaimUri from 'component/claimUri';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
const PAGE_VIEW_QUERY = `view`; const PAGE_VIEW_QUERY = `view`;
@ -31,7 +32,7 @@ type Props = {
function ChannelPage(props: Props) { function ChannelPage(props: Props) {
const { uri, title, cover, history, location, page, channelIsMine, thumbnail } = props; const { uri, title, cover, history, location, page, channelIsMine, thumbnail } = props;
const { channelName, claimName, claimId } = parseURI(uri); const { channelName } = parseURI(uri);
const { search } = location; const { search } = location;
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined; const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
@ -79,8 +80,7 @@ function ChannelPage(props: Props) {
)} )}
</h1> </h1>
<h2 className="channel__url"> <h2 className="channel__url">
{claimName} <ClaimUri uri={uri} />
{claimId && `#${claimId}`}
</h2> </h2>
</div> </div>
</header> </header>

2
src/ui/page/file/index.js
View file

@ -16,7 +16,6 @@ import {
makeSelectTitleForUri, makeSelectTitleForUri,
makeSelectThumbnailForUri, makeSelectThumbnailForUri,
makeSelectClaimIsNsfw, makeSelectClaimIsNsfw,
doToast,
} from 'lbry-redux'; } from 'lbry-redux';
import { doFetchViewCount, makeSelectViewCountForUri, makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc'; import { doFetchViewCount, makeSelectViewCountForUri, makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings'; import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
@ -54,7 +53,6 @@ const perform = dispatch => ({
setViewed: uri => dispatch(doSetContentHistoryItem(uri)), setViewed: uri => dispatch(doSetContentHistoryItem(uri)),
markSubscriptionRead: (channel, uri) => dispatch(doRemoveUnreadSubscription(channel, uri)), markSubscriptionRead: (channel, uri) => dispatch(doRemoveUnreadSubscription(channel, uri)),
fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)), fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
showToast: options => dispatch(doToast(options)),
}); });
export default connect( export default connect(

170
src/ui/page/file/view.jsx
View file

@ -2,7 +2,6 @@
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
import * as icons from 'constants/icons'; import * as icons from 'constants/icons';
import * as React from 'react'; import * as React from 'react';
import { clipboard } from 'electron';
import { buildURI, normalizeURI } from 'lbry-redux'; import { buildURI, normalizeURI } from 'lbry-redux';
import FileViewer from 'component/fileViewer'; import FileViewer from 'component/fileViewer';
import Thumbnail from 'component/common/thumbnail'; import Thumbnail from 'component/common/thumbnail';
@ -23,6 +22,7 @@ import ClaimTags from 'component/claimTags';
import CommentsList from 'component/commentsList'; import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate'; import CommentCreate from 'component/commentCreate';
import VideoDuration from 'component/videoDuration'; import VideoDuration from 'component/videoDuration';
import ClaimUri from 'component/claimUri';
type Props = { type Props = {
claim: StreamClaim, claim: StreamClaim,
@ -48,7 +48,6 @@ type Props = {
title: string, title: string,
thumbnail: ?string, thumbnail: ?string,
nsfw: boolean, nsfw: boolean,
showToast: ({}) => void,
}; };
class FilePage extends React.Component<Props> { class FilePage extends React.Component<Props> {
@ -150,7 +149,6 @@ class FilePage extends React.Component<Props> {
title, title,
thumbnail, thumbnail,
nsfw, nsfw,
showToast,
} = this.props; } = this.props;
// File info // File info
@ -221,102 +219,94 @@ class FilePage extends React.Component<Props> {
))} ))}
</div> </div>
<div className="grid-area--info media__content media__content--large"> <div className="columns">
<h1 className="media__title media__title--large">{title}</h1> <div className="grid-area--info">
<div className="media__subtext media__subtext--large"> <h1 className="media__title media__title--large">{title}</h1>
<div className="media__subtitle__channel"> <div className="media__subtext media__subtext--large">
<UriIndicator uri={uri} link /> <div className="media__subtitle__channel">
<UriIndicator uri={uri} link />
</div>
</div> </div>
</div> <div className="media__actions media__actions--between">
<div className="media__actions media__actions--between"> <div className="media__action-group--large">
<div className="media__action-group--large"> {claimIsMine && (
{claimIsMine && (
<Button
button="primary"
icon={icons.EDIT}
label={__('Edit')}
navigate="/$/publish"
onClick={() => {
prepareEdit(claim, editUri, fileInfo);
}}
/>
)}
{!claimIsMine && (
<React.Fragment>
{channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
<Button <Button
button="alt" button="primary"
icon={icons.TIP} icon={icons.EDIT}
label={__('Send a tip')} label={__('Edit')}
onClick={() => openModal(MODALS.SEND_TIP, { uri })} navigate="/$/publish"
onClick={() => {
prepareEdit(claim, editUri, fileInfo);
}}
/> />
</React.Fragment> )}
)} {!claimIsMine && (
<Button <React.Fragment>
button="alt" {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
icon={icons.SHARE}
label={__('Share')} <Button
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })} button="alt"
/> icon={icons.TIP}
label={__('Send a tip')}
onClick={() => openModal(MODALS.SEND_TIP, { uri })}
/>
</React.Fragment>
)}
<Button
button="alt"
icon={icons.SHARE}
label={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
/>
</div>
<div className="media__action-group--large">
<FileDownloadLink uri={uri} />
<FileActions
uri={uri}
claimId={claim.claim_id}
showFullscreen={isPreviewType}
viewerContainer={this.viewerContainer}
/>
</div>
</div> </div>
<div className="media__action-group--large"> <div className="media__actions media__actions--between">
<FileDownloadLink uri={uri} /> <div className="media__subtext media__subtext--large">
<FileActions <DateTime uri={uri} show={DateTime.SHOW_DATE} />
uri={uri} </div>
claimId={claim.claim_id}
showFullscreen={isPreviewType} <div className="media__subtext media__subtext--large">
viewerContainer={this.viewerContainer} <VideoDuration uri={uri} />
/>
{claimIsMine && (
<p>
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
</p>
)}
</div>
</div>
<div className="media__info--large">
<ClaimTags uri={uri} type="large" />
<FileDetails uri={uri} />
<div className="media__info-title">{__('Comments')}</div>
<CommentCreate uri={uri} />
<CommentsList uri={uri} />
</div> </div>
</div> </div>
<div className="grid-area--related">
<div className="media__actions media__actions--between"> <div className="media__actions media__actions--between media__actions--nowrap">
<div className="media__subtext media__subtext--large"> <ClaimUri uri={uri} />
<DateTime uri={uri} show={DateTime.SHOW_DATE} /> <div className="file-properties">
</div> {isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
{nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
<div className="media__subtext media__subtext--large"> <FilePrice badge uri={normalizeURI(uri)} />
<VideoDuration uri={uri} /> </div>
{claimIsMine && (
<p>
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
</p>
)}
</div> </div>
<RecommendedContent uri={uri} />
</div> </div>
<div className="media__info--large">
<ClaimTags uri={uri} type="large" />
<FileDetails uri={uri} />
<div className="media__info-title">{__('Comments')}</div>
<CommentCreate uri={uri} />
<CommentsList uri={uri} />
</div>
</div>
<div className="grid-area--related">
<div className="media__uri-wrapper">
<Button
className="media__uri"
button="alt"
label={uri}
onClick={() => {
clipboard.writeText(uri);
showToast({
message: __('Copied'),
});
}}
/>
<div className="file-properties">
{isRewardContent && <Icon size={20} iconColor="red" icon={icons.FEATURED} />}
{nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
<FilePrice badge uri={normalizeURI(uri)} />
</div>
</div>
<RecommendedContent uri={uri} />
</div> </div>
</Page> </Page>
); );

4
src/ui/scss/component/_channel.scss
View file

@ -16,7 +16,7 @@ $metadata-z-index: 1;
align-self: flex-start; align-self: flex-start;
position: absolute; position: absolute;
object-fit: cover; object-fit: cover;
filter: brightness(50%); filter: brightness(40%);
} }
.channel-cover, .channel-cover,
@ -28,7 +28,7 @@ $metadata-z-index: 1;
.channel-thumbnail { .channel-thumbnail {
display: flex; display: flex;
height: 5rem; height: 5rem;
width: 6rem; width: 5rem;
background-size: cover; background-size: cover;
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
} }

18
src/ui/scss/component/_claim-list.scss
View file

@ -82,20 +82,13 @@
} }
.claim-preview { .claim-preview {
@include mediaThumbHoverZoom;
display: flex; display: flex;
position: relative; position: relative;
overflow: visible;
cursor: pointer;
font-size: 1.3rem; font-size: 1.3rem;
padding: var(--spacing-medium); padding: var(--spacing-medium);
cursor: pointer;
overflow: hidden;
&:hover {
background-color: darken($lbry-white, 5%);
[data-mode='dark'] & {
background-color: var(--dm-color-04);
}
}
.media__thumb { .media__thumb {
width: var(--file-list-thumbnail-width); width: var(--file-list-thumbnail-width);
@ -122,11 +115,10 @@
} }
.claim-preview--large { .claim-preview--large {
@include mediaThumbHoverZoom;
font-size: 1.6rem; font-size: 1.6rem;
border-bottom: 0; border-bottom: 0;
padding: 0; padding: 0;
padding-bottom: var(--spacing-medium); margin: var(--spacing-small) 0;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
@ -153,7 +145,7 @@
.claim-preview-metadata { .claim-preview-metadata {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; flex: 1;
} }
.claim-preview-info { .claim-preview-info {

36
src/ui/scss/component/_main.scss
View file

@ -36,41 +36,15 @@
} }
.main--file-page { .main--file-page {
display: grid; position: relative;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr auto;
max-width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding));
grid-template-areas:
'content content'
'info related';
.grid-area--content {
width: 100%;
}
.grid-area--content {
grid-area: content;
}
.grid-area--info { .grid-area--info {
grid-area: info; margin-right: var(--spacing-large);
width: 50%;
} }
.grid-area--related { .grid-area--related {
grid-area: related; width: calc(50% - var(--spacing-large));
min-width: 30rem;
max-width: 35rem;
}
@media (max-width: 600px) {
grid-template-areas:
'content'
'info'
'related';
.grid-area--related {
grid-area: related;
width: auto;
}
} }
} }

21
src/ui/scss/component/_media.scss
View file

@ -56,18 +56,14 @@
.media__title--large { .media__title--large {
cursor: default; cursor: default;
display: inline; overflow: hidden;
width: 100%;
text-overflow: ellipsis;
font-size: 2rem; font-size: 2rem;
line-height: 1.33; line-height: 1.33;
margin-right: var(--spacing-small); margin-right: var(--spacing-small);
} }
.media__uri-wrapper {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-small);
}
.media__uri { .media__uri {
font-size: 1.1rem; font-size: 1.1rem;
min-width: 0; min-width: 0;
@ -92,6 +88,10 @@
justify-content: space-between; justify-content: space-between;
} }
.media__actions--nowrap {
flex-wrap: nowrap;
}
.media__action-group { .media__action-group {
> *:not(:last-child) { > *:not(:last-child) {
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
@ -116,13 +116,6 @@
} }
} }
// M E D I A
// C O N T E N T
.media__content--large {
padding-right: var(--spacing-large);
}
// M E D I A // M E D I A
// S U B T E X T // S U B T E X T
// //

1
static/locales/en.json
View file

@ -482,7 +482,6 @@
"Rendering document.": "Rendering document.", "Rendering document.": "Rendering document.",
"Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document.", "Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document.",
"Tag Search": "Tag Search", "Tag Search": "Tag Search",
"Disabled": "Disabled",
"Rewards are currently disabled for your account. Turn on diagnostic data sharing, in": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in", "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in",
", in order to re-enable them.": ", in order to re-enable them.", ", in order to re-enable them.": ", in order to re-enable them.",
"Humans Only": "Humans Only", "Humans Only": "Humans Only",

4
yarn.lock
View file

@ -6646,9 +6646,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
yargs "^13.2.2" yargs "^13.2.2"
zstd-codec "^0.1.1" zstd-codec "^0.1.1"
lbry-redux@lbryio/lbry-redux#c83489e78ed368d368ad25552fce25e7de2d64b5: lbry-redux@lbryio/lbry-redux#bb82aed61a5569e565daa784eb25fc1d639c0c22:
version "0.0.1" version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c83489e78ed368d368ad25552fce25e7de2d64b5" resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/bb82aed61a5569e565daa784eb25fc1d639c0c22"
dependencies: dependencies:
proxy-polyfill "0.1.6" proxy-polyfill "0.1.6"
reselect "^3.0.0" reselect "^3.0.0"