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",
"json-loader": "^0.5.4",
"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",
"lint-staged": "^7.0.2",
"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');
}
function resetList() {
setPage(1);
}
const header = (
<h1 className="card__title--flex">
<FormField
@ -105,7 +109,10 @@ function ClaimListDiscover(props: Props) {
type="select"
name="trending_sort"
value={typeSort}
onChange={e => setTypeSort(e.target.value)}
onChange={e => {
resetList();
setTypeSort(e.target.value);
}}
>
{SEARCH_TYPES.map(type => (
<option key={type} value={type}>
@ -123,7 +130,7 @@ function ClaimListDiscover(props: Props) {
className="claim-list__dropdown"
value={personalSort}
onChange={e => {
setPage(1);
resetList();
setPersonalSort(e.target.value);
}}
>
@ -140,7 +147,10 @@ function ClaimListDiscover(props: Props) {
type="select"
name="trending_time"
value={timeSort}
onChange={e => setTimeSort(e.target.value)}
onChange={e => {
resetList();
setTimeSort(e.target.value);
}}
>
{SEARCH_TIMES.map(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 ChannelThumbnail from 'component/channelThumbnail';
import ChannelEdit from 'component/channelEdit';
import ClaimUri from 'component/claimUri';
import * as ICONS from 'constants/icons';
const PAGE_VIEW_QUERY = `view`;
@ -31,7 +32,7 @@ type Props = {
function ChannelPage(props: 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 urlParams = new URLSearchParams(search);
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
@ -79,8 +80,7 @@ function ChannelPage(props: Props) {
)}
</h1>
<h2 className="channel__url">
{claimName}
{claimId && `#${claimId}`}
<ClaimUri uri={uri} />
</h2>
</div>
</header>

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

@ -16,7 +16,6 @@ import {
makeSelectTitleForUri,
makeSelectThumbnailForUri,
makeSelectClaimIsNsfw,
doToast,
} from 'lbry-redux';
import { doFetchViewCount, makeSelectViewCountForUri, makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
@ -54,7 +53,6 @@ const perform = dispatch => ({
setViewed: uri => dispatch(doSetContentHistoryItem(uri)),
markSubscriptionRead: (channel, uri) => dispatch(doRemoveUnreadSubscription(channel, uri)),
fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
showToast: options => dispatch(doToast(options)),
});
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 icons from 'constants/icons';
import * as React from 'react';
import { clipboard } from 'electron';
import { buildURI, normalizeURI } from 'lbry-redux';
import FileViewer from 'component/fileViewer';
import Thumbnail from 'component/common/thumbnail';
@ -23,6 +22,7 @@ import ClaimTags from 'component/claimTags';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
import VideoDuration from 'component/videoDuration';
import ClaimUri from 'component/claimUri';
type Props = {
claim: StreamClaim,
@ -48,7 +48,6 @@ type Props = {
title: string,
thumbnail: ?string,
nsfw: boolean,
showToast: ({}) => void,
};
class FilePage extends React.Component<Props> {
@ -150,7 +149,6 @@ class FilePage extends React.Component<Props> {
title,
thumbnail,
nsfw,
showToast,
} = this.props;
// File info
@ -221,102 +219,94 @@ class FilePage extends React.Component<Props> {
))}
</div>
<div className="grid-area--info media__content media__content--large">
<h1 className="media__title media__title--large">{title}</h1>
<div className="media__subtext media__subtext--large">
<div className="media__subtitle__channel">
<UriIndicator uri={uri} link />
<div className="columns">
<div className="grid-area--info">
<h1 className="media__title media__title--large">{title}</h1>
<div className="media__subtext media__subtext--large">
<div className="media__subtitle__channel">
<UriIndicator uri={uri} link />
</div>
</div>
</div>
<div className="media__actions media__actions--between">
<div className="media__action-group--large">
{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} />}
<div className="media__actions media__actions--between">
<div className="media__action-group--large">
{claimIsMine && (
<Button
button="alt"
icon={icons.TIP}
label={__('Send a tip')}
onClick={() => openModal(MODALS.SEND_TIP, { uri })}
button="primary"
icon={icons.EDIT}
label={__('Edit')}
navigate="/$/publish"
onClick={() => {
prepareEdit(claim, editUri, fileInfo);
}}
/>
</React.Fragment>
)}
<Button
button="alt"
icon={icons.SHARE}
label={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
/>
)}
{!claimIsMine && (
<React.Fragment>
{channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
<Button
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 className="media__action-group--large">
<FileDownloadLink uri={uri} />
<FileActions
uri={uri}
claimId={claim.claim_id}
showFullscreen={isPreviewType}
viewerContainer={this.viewerContainer}
/>
<div className="media__actions media__actions--between">
<div className="media__subtext media__subtext--large">
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
</div>
<div className="media__subtext media__subtext--large">
<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 className="media__actions media__actions--between">
<div className="media__subtext media__subtext--large">
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
</div>
<div className="media__subtext media__subtext--large">
<VideoDuration uri={uri} />
{claimIsMine && (
<p>
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
</p>
)}
<div className="grid-area--related">
<div className="media__actions media__actions--between media__actions--nowrap">
<ClaimUri uri={uri} />
<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 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>
</Page>
);

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

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

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

@ -82,20 +82,13 @@
}
.claim-preview {
@include mediaThumbHoverZoom;
display: flex;
position: relative;
overflow: visible;
cursor: pointer;
font-size: 1.3rem;
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 {
width: var(--file-list-thumbnail-width);
@ -122,11 +115,10 @@
}
.claim-preview--large {
@include mediaThumbHoverZoom;
font-size: 1.6rem;
border-bottom: 0;
padding: 0;
padding-bottom: var(--spacing-medium);
margin: var(--spacing-small) 0;
&:hover {
background-color: transparent;
@ -153,7 +145,7 @@
.claim-preview-metadata {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
}
.claim-preview-info {

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

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

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

@ -56,18 +56,14 @@
.media__title--large {
cursor: default;
display: inline;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
font-size: 2rem;
line-height: 1.33;
margin-right: var(--spacing-small);
}
.media__uri-wrapper {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-small);
}
.media__uri {
font-size: 1.1rem;
min-width: 0;
@ -92,6 +88,10 @@
justify-content: space-between;
}
.media__actions--nowrap {
flex-wrap: nowrap;
}
.media__action-group {
> *:not(:last-child) {
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
// S U B T E X T
//

1
static/locales/en.json
View file

@ -482,7 +482,6 @@
"Rendering document.": "Rendering document.",
"Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document.",
"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",
", in order to re-enable them.": ", in order to re-enable them.",
"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"
zstd-codec "^0.1.1"
lbry-redux@lbryio/lbry-redux#c83489e78ed368d368ad25552fce25e7de2d64b5:
lbry-redux@lbryio/lbry-redux#bb82aed61a5569e565daa784eb25fc1d639c0c22:
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:
proxy-polyfill "0.1.6"
reselect "^3.0.0"