odysee
fix replay select styling make meme a link Fix audio references get newest livestream claim in livestreamLink pin crackermilk fix livestream banner placement fix live page fix rebase fix rebase fix error nag fix darkmode blockquote style break word on livestream comment text fix dark mode snack fix live badge fix lint small fixes - word wrap, live badge wip Fix invisible snack in Odysee Light Theme Revert "wip" This reverts commitd17e477fe0
. Revert "small fixes - word wrap, live badge" This reverts commit0e431d4038
. fix blank pinned destiny fix badges and homepage again only get livestreams live for less than a day pinned hammy and olivia multi pin pin destiny updated pinned videos update tagline Update view.jsx pins updated destiny's video updated pinned videos removed destiny, added lie likes music pinned destiny and mason's woodshop removed hammy and olivia unpinned mason's woodshop removed pins added hammy and olivia pinned sam seder unpinned destiny and hammy and olivia Fix merge on ChannelThumbnails - sam seder, + hammy & olivia and passion for food update tagline (#6086) removed everyone, added kona and suba Theme color fixes (odysee) (#6089) * Cherry-pick master's 'base-theme.scss' * Non-functional cleanup (remove dups, re-order, etc.) * Dark: update positive Toast to --color-primary as well. This follows the intention of the refactoring, which I guess was (1) reduce the number of color names (2) reduce the number of customizations needed. The only issue I have with this is that the current Odysee primary color is pink, which can be intepreted as an error. The original (pre-refactoring color was green). For now, I follow the refactoring path. We can tweak this later. * Fix text color inside '--color-card-background-highlighted' Light: use base-theme (it was the same value anyway). Dark: use bright text. * Dark: add some contrast between the components The color for the background, header, card, placeholder, etc. is almost identical -- it looks like there are all in the same component. The almost-invisible border doesn't help. One would have to crank up the monitor's contrast setting to see separation of components. Brighten up the components a bit, somewhat following the same scale as lbry.tv's dark theme. Overall, I still think it's too dark. The Card's background color can still be brightened up further for better contrast, but I try not to make too drastic of a change for now. The original lbry.tv's gray theme is the most pleasant theme I've seen so far, but this is all subjective. changed pins removed kona and suba added destiny changed pins removed destiny pinned sgtducky changed pins removed sgtducky added hammy and olivia added chrissie mayr added the bite shot changed pins removed the bite shot added heads of tech changed pins removed hammy and olivia removed chrissie mayr changed pins removed heads of tech added crackermilk changed pins removed crackermilk added some ordinary gamer added passion for food changed pins removed some ordinary gamers removed passion for food added emmy hucker changed pins added game knights Update view.jsx Force rebuild changed pins removed emmy hucker changed pins removed game knights added crackermilk changed pins removed crackermilk added some ordinary gamer changed pins removed some ordinary gamers added passion for food added green renaissance changed pins removed passion for food removed green renaissance added expand love changed pins removed expand love added dr nora change tagline (#6122) there's so much room for activities comment out music changed pins removed dr nora added kona and suba changed pins removed kona and suba added destiny changed pins removed destiny added crackermilk changed pins removed crackermilk added someordinarygamers change tagline Drake, where's the door hole? changed pins unpinned someordinarygamers pinned kona and suba Add message for mature content changed pin changed pins removed creative model changed pins added bcpov added krish mohan added cigarvixen changed pins removed krish mohan added adrian logan bump fix footer change tagline just like the simulations changed pins removed: bcpov cigarvixen adrian logan added: someordinarygamers quick fix for reposts oops fix channel tabs changed pin removed someordinarygamers added kona and suba changed pins removed kona and suba added dirtyworkz added crackermilk fix channel tabs again again changed pins someordinarygamers arvie's cookbook changed pins removed some ordinary gamers removed arvie's cookbook added fna van life changed pins removed fna vanlife added game knights change tagline "this cave is not a natural formation" changed pins removed game knights added some ordinary gamers fix popup put footer back bump lightouse throttle bump lighthouse throttle changed pins removed some orginary gamers added adrian logan pinned bret weinstein fix referral fix-superchats changed pins removed bret weinstein added passion for food added dark horse clips fix incorrect variable being used to determine view state changed pins removed passion for food changed pins removed bret weinstein added sgt ducky add recsys related functionality Create plugin to hold code for recsys send recsys on dispose cleanup recsys code add userId to props validation appease the linter add todo note extra characters pinned jungle survival fix autoplay for transcoded files change tagline changed pins pinned destiny pinned chris williamson FIX video.js event firing issues fore RecsysPlugin - The `rateChange` event now logs the updated speed, not just the time at which it occurred. - The `scrub` now (more) accurately logs the position it came from before the destination. - The recsys events get consolidated for logical consistency. Wunderbar: change throttle to debounce + add min chars 6314: prevent lighthouse spam from wunderbar - Wunderbar: change throttle to debounce + add min chars. - useLighthouse: added option to not throttle. Wunderbar: immediate feedback to convey status Make immediate GUI feedback to convey the current status, which can be the following: - typing - waiting lighthouse results - waiting claim resolve - no results or failed. pinned someordinarygamers Wunderbar: bump debounce to 1s per feedback pinned jungle survival pinned james julier Fix compile error Lint summit pin summit pin update pins added humblemechanic removed everyone else update pins pinned samtime FIX stop event translation and remove preprocessing I think different browsers behave in different ways for the media API. As a result, I think I was losing information for browsers that weren't the same as mine (Chromium). For now, preprocessing is removed. In the future, I'll add it again (better storage and transmission properties). updated pin change pins (cherry picked from commit041f420416
) pinned someordinarygamers auth only for stripe restore playlists tab fix missing i18n on channel page pinned zimmerhandcrafted change tagline big gulps, huh? change pin Revert lazy-loading videojs The loading circle wasn't showing up, causing confusion. Splitting CSS doesn't seem trivial as there seems to be a huge dependency on the load order. Pretty much similar to what this person is facing https://lihautan.com/css-code-splitting/#the-problem This reverts videojs-specific changes from4d638bcf
. odyrecon use ENABLE_UI_NOTIFICATIONS use ENABLE_MATURE oops use ENABLE_MATURE for fileTitleSection pinned orf pinned ourselves selecthumb copy use ENABLE_UI_NOT. on sideNav showNoSourceClaims changed pin fix livestream claims display ... fix? fix Fix invalid semicolon alison morrow Odysee: fix missing '--color-help-warning-bg' for Dark someordinarygamers pinned some new channels watch guy hotfix error returning to settings emplemon fix showMature test bump parsing better colon handling cherrypick pins unpin emplemon for now delete unused components (#6531) more recon (#6534) emplemon Latest changes to odysee (#6536) * disable review button if no card saved also some cleanup * fix flow errors move stuff to web Revert "move stuff to web" This reverts commit17b13d8b19
. hotfix for odysee change tagline don't dead open inside rm style site help email -odysee tx failed recon for notification components tagsIntro behind config env part webuploads-rcon commentReactions recon ody update meme headnotify recon modal publish recon preview index recon disable aniview disable google imasdk safe pin us Fix channel-selector thumbnail not updating Recently changed to `<OptimizedImg>`, which was assuming the `src` never changes. dejavu ... we also hit this issue when implementing the `IntersectionObserver` lazy-loading. user verify sms copy restore paid content clear publish once copy pub file copy chris williamson try follow disc recon sidenav recon - community standards claimListDiscover: don't re-render until query is done 6542 Livestream listing and blocked list kills CLS score This is basically a repeat of what was done on `claimTileDiscover` (homepage), but now on `claimListDiscover` (category pages). This handles the unnecessary re-render when: - the uri list temporarily being zero while waiting for new claim-search results. - livestream claim-search invalidating the list. Store the last uri list and use that when we know that claim-search is still not done. 1. Ran Lighthouse on category pages (force a livestream channel on it). CLS score must be green. 2. Block `claim_search` from Dev Tools and move to another category. The page should say "timed out" instead of "no results" (i.e. maintain existing behavior). delete spaceman
This commit is contained in:
parent
8919182c0c
commit
10e2c2ada4
29 changed files with 473 additions and 298 deletions
Binary file not shown.
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
static/img/lbry-favicon.png
Normal file
BIN
static/img/lbry-favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
|
@ -291,7 +291,7 @@ function ClaimTilesDiscover(props: Props) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const modifiedUris = uris ? uris.slice() : [];
|
const modifiedUris = uris ? uris.slice() : [];
|
||||||
const fixUris = pinUrls || ['lbry://@AlisonMorrow#6/LBRY#8'];
|
const fixUris = pinUrls || ['lbry://@ChrisWilliamson#6/danny-trejo-recalls-being-hypnotised-by#7'];
|
||||||
|
|
||||||
if (pin && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
|
if (pin && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
|
||||||
fixUris.forEach((fixUri) => {
|
fixUris.forEach((fixUri) => {
|
||||||
|
@ -308,7 +308,13 @@ function ClaimTilesDiscover(props: Props) {
|
||||||
<ul className="claim-grid">
|
<ul className="claim-grid">
|
||||||
{modifiedUris && modifiedUris.length
|
{modifiedUris && modifiedUris.length
|
||||||
? modifiedUris.map((uri, index) => (
|
? modifiedUris.map((uri, index) => (
|
||||||
<ClaimPreviewTile key={uri} uri={uri} properties={renderProperties} live={resolveLive(index)} />
|
<ClaimPreviewTile
|
||||||
|
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
||||||
|
key={uri}
|
||||||
|
uri={uri}
|
||||||
|
properties={renderProperties}
|
||||||
|
live={resolveLive(index)}
|
||||||
|
/>
|
||||||
))
|
))
|
||||||
: new Array(pageSize)
|
: new Array(pageSize)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
|
|
|
@ -42,7 +42,10 @@ type Props = {
|
||||||
isReply: boolean,
|
isReply: boolean,
|
||||||
activeChannel: string,
|
activeChannel: string,
|
||||||
activeChannelClaim: ?ChannelClaim,
|
activeChannelClaim: ?ChannelClaim,
|
||||||
livestream?: boolean,
|
bottom: boolean,
|
||||||
|
onSubmit: (string, string) => void,
|
||||||
|
livestream: boolean,
|
||||||
|
embed?: boolean,
|
||||||
toast: (string) => void,
|
toast: (string) => void,
|
||||||
claimIsMine: boolean,
|
claimIsMine: boolean,
|
||||||
sendTip: ({}, (any) => void, (any) => void) => void,
|
sendTip: ({}, (any) => void, (any) => void) => void,
|
||||||
|
@ -63,7 +66,11 @@ export function CommentCreate(props: Props) {
|
||||||
isReply,
|
isReply,
|
||||||
parentId,
|
parentId,
|
||||||
activeChannelClaim,
|
activeChannelClaim,
|
||||||
|
onSubmit,
|
||||||
|
bottom,
|
||||||
livestream,
|
livestream,
|
||||||
|
embed,
|
||||||
|
toast,
|
||||||
claimIsMine,
|
claimIsMine,
|
||||||
sendTip,
|
sendTip,
|
||||||
doToast,
|
doToast,
|
||||||
|
@ -106,7 +113,7 @@ export function CommentCreate(props: Props) {
|
||||||
|
|
||||||
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
||||||
const KEYCODE_ENTER = 13;
|
const KEYCODE_ENTER = 13;
|
||||||
if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
|
if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
buttonref.current.click();
|
buttonref.current.click();
|
||||||
}
|
}
|
||||||
|
@ -256,6 +263,10 @@ export function CommentCreate(props: Props) {
|
||||||
setIsSupportComment(false);
|
setIsSupportComment(false);
|
||||||
setCommentFailure(false);
|
setCommentFailure(false);
|
||||||
|
|
||||||
|
if (onSubmit) {
|
||||||
|
onSubmit(commentValue, activeChannelClaim.name);
|
||||||
|
}
|
||||||
|
|
||||||
if (onDoneReplying) {
|
if (onDoneReplying) {
|
||||||
onDoneReplying();
|
onDoneReplying();
|
||||||
}
|
}
|
||||||
|
@ -280,6 +291,11 @@ export function CommentCreate(props: Props) {
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (embed) {
|
||||||
|
window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
|
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
|
||||||
if (livestream) {
|
if (livestream) {
|
||||||
window.open(pathPlusRedirect);
|
window.open(pathPlusRedirect);
|
||||||
|
@ -344,6 +360,7 @@ export function CommentCreate(props: Props) {
|
||||||
className={classnames('comment__create', {
|
className={classnames('comment__create', {
|
||||||
'comment__create--reply': isReply,
|
'comment__create--reply': isReply,
|
||||||
'comment__create--nested-reply': isNested,
|
'comment__create--nested-reply': isNested,
|
||||||
|
'comment__create--bottom': bottom,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<FormField
|
<FormField
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import * as REACTION_TYPES from 'constants/reactions';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
@ -15,18 +16,44 @@ type Props = {
|
||||||
likeCount: number,
|
likeCount: number,
|
||||||
dislikeCount: number,
|
dislikeCount: number,
|
||||||
myReaction: ?string,
|
myReaction: ?string,
|
||||||
|
livestream?: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function FileReactions(props: Props) {
|
function FileReactions(props: Props) {
|
||||||
const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
|
const {
|
||||||
|
claim,
|
||||||
|
uri,
|
||||||
|
doFetchReactions,
|
||||||
|
doReactionLike,
|
||||||
|
doReactionDislike,
|
||||||
|
myReaction,
|
||||||
|
likeCount,
|
||||||
|
dislikeCount,
|
||||||
|
livestream,
|
||||||
|
} = props;
|
||||||
const claimId = claim && claim.claim_id;
|
const claimId = claim && claim.claim_id;
|
||||||
const channel = claim && claim.signing_channel && claim.signing_channel.name;
|
const channel = claim && claim.signing_channel && claim.signing_channel.name;
|
||||||
const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (claimId) {
|
function fetchReactions() {
|
||||||
doFetchReactions(claimId);
|
doFetchReactions(claimId);
|
||||||
}
|
}
|
||||||
}, [claimId, doFetchReactions]);
|
|
||||||
|
let fetchInterval;
|
||||||
|
if (claimId) {
|
||||||
|
fetchReactions();
|
||||||
|
|
||||||
|
if (livestream) {
|
||||||
|
fetchInterval = setInterval(fetchReactions, 45000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (fetchInterval) {
|
||||||
|
clearInterval(fetchInterval);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [claimId, doFetchReactions, livestream]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -41,20 +68,46 @@ function FileReactions(props: Props) {
|
||||||
title={__('I like this')}
|
title={__('I like this')}
|
||||||
requiresAuth={IS_WEB}
|
requiresAuth={IS_WEB}
|
||||||
authSrc="filereaction_like"
|
authSrc="filereaction_like"
|
||||||
className={classnames('button--file-action')}
|
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
||||||
label={formatNumberWithCommas(likeCount, 0)}
|
label={
|
||||||
|
<>
|
||||||
|
{myReaction === REACTION_TYPES.LIKE && (
|
||||||
|
<>
|
||||||
|
<div className="button__fire-glow" />
|
||||||
|
<div className="button__fire-particle1" />
|
||||||
|
<div className="button__fire-particle2" />
|
||||||
|
<div className="button__fire-particle3" />
|
||||||
|
<div className="button__fire-particle4" />
|
||||||
|
<div className="button__fire-particle5" />
|
||||||
|
<div className="button__fire-particle6" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{formatNumberWithCommas(likeCount, 0)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
iconSize={18}
|
iconSize={18}
|
||||||
icon={ICONS.UPVOTE}
|
icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
|
||||||
onClick={() => doReactionLike(uri)}
|
onClick={() => doReactionLike(uri)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
requiresAuth={IS_WEB}
|
requiresAuth={IS_WEB}
|
||||||
authSrc={'filereaction_dislike'}
|
authSrc={'filereaction_dislike'}
|
||||||
title={__('I dislike this')}
|
title={__('I dislike this')}
|
||||||
className={classnames('button--file-action')}
|
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
||||||
label={formatNumberWithCommas(dislikeCount, 0)}
|
label={
|
||||||
|
<>
|
||||||
|
{myReaction === REACTION_TYPES.DISLIKE && (
|
||||||
|
<>
|
||||||
|
<div className="button__slime-stain" />
|
||||||
|
<div className="button__slime-drop1" />
|
||||||
|
<div className="button__slime-drop2" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{formatNumberWithCommas(dislikeCount, 0)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
iconSize={18}
|
iconSize={18}
|
||||||
icon={ICONS.DOWNVOTE}
|
icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
|
||||||
onClick={() => doReactionDislike(uri)}
|
onClick={() => doReactionDislike(uri)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -22,7 +22,7 @@ function FileSubtitle(props: Props) {
|
||||||
<FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
|
<FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FileActions uri={uri} />
|
<FileActions uri={uri} hideRepost={livestream} livestream={livestream} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,8 @@ import FilePrice from 'component/filePrice';
|
||||||
import { formatLbryUrlForWeb } from 'util/url';
|
import { formatLbryUrlForWeb } from 'util/url';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import { URL } from 'config';
|
import { URL } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import OdyseeLogo from 'component/header/odysee_logo.png';
|
||||||
|
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -36,7 +37,10 @@ function FileViewerEmbeddedTitle(props: Props) {
|
||||||
{...contentLinkProps}
|
{...contentLinkProps}
|
||||||
/>
|
/>
|
||||||
<div className="file-viewer__embedded-info">
|
<div className="file-viewer__embedded-info">
|
||||||
<Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} aria-label={__('Home')} {...lbryLinkProps} />
|
<Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}>
|
||||||
|
<img src={OdyseeLogo} className=" mobile-only" />
|
||||||
|
<img src={OdyseeLogoWithText} className=" mobile-hidden" />
|
||||||
|
</Button>
|
||||||
{isInApp && <FilePrice uri={uri} />}
|
{isInApp && <FilePrice uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,6 +19,8 @@ import ChannelThumbnail from 'component/channelThumbnail';
|
||||||
import { remote } from 'electron';
|
import { remote } from 'electron';
|
||||||
import { IS_MAC } from 'component/app/view';
|
import { IS_MAC } from 'component/app/view';
|
||||||
// @endif
|
// @endif
|
||||||
|
import OdyseeLogoWithWhiteText from './odysee_white.png';
|
||||||
|
import OdyseeLogoWithText from './odysee.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
user: ?User,
|
user: ?User,
|
||||||
|
@ -251,14 +253,7 @@ const Header = (props: Props) => {
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
className="header__navigation-item header__navigation-item--lbry"
|
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
|
||||||
// @if TARGET='app'
|
|
||||||
label={'LBRY'}
|
|
||||||
// @endif
|
|
||||||
// @if TARGET='web'
|
|
||||||
label={LOGO_TITLE} // eslint-disable-line
|
|
||||||
// @endif
|
|
||||||
icon={ICONS.LBRY}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (history.location.pathname === '/') window.location.reload();
|
if (history.location.pathname === '/') window.location.reload();
|
||||||
}}
|
}}
|
||||||
|
@ -268,7 +263,12 @@ const Header = (props: Props) => {
|
||||||
}}
|
}}
|
||||||
// @endif
|
// @endif
|
||||||
{...homeButtonNavigationProps}
|
{...homeButtonNavigationProps}
|
||||||
/>
|
>
|
||||||
|
<img
|
||||||
|
src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText}
|
||||||
|
className="header__odysee"
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
{!authHeader && (
|
{!authHeader && (
|
||||||
<div className="header__center">
|
<div className="header__center">
|
||||||
|
|
|
@ -182,9 +182,9 @@ function PublishForm(props: Props) {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (editingURI) {
|
if (editingURI) {
|
||||||
customSubtitle = __('Update your video');
|
customSubtitle = __('Update your video/audio');
|
||||||
} else {
|
} else {
|
||||||
customSubtitle = __('Upload that unlabeled video you found behind the TV in 1991');
|
customSubtitle = __('Upload that unlabeled video or cassette you found behind the TV in 1991');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -566,6 +566,7 @@ function PublishForm(props: Props) {
|
||||||
<Button
|
<Button
|
||||||
key={String(modeName)}
|
key={String(modeName)}
|
||||||
icon={modeName}
|
icon={modeName}
|
||||||
|
iconSize={18}
|
||||||
label={__(MODE_TO_I18N_STR[String(modeName)] || '---')}
|
label={__(MODE_TO_I18N_STR[String(modeName)] || '---')}
|
||||||
button="alt"
|
button="alt"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
|
@ -11,7 +11,6 @@ import { AUTO_FOLLOW_CHANNELS, CUSTOM_HOMEPAGE } from 'config';
|
||||||
type Props = {
|
type Props = {
|
||||||
subscribedChannels: Array<Subscription>,
|
subscribedChannels: Array<Subscription>,
|
||||||
onContinue: () => void,
|
onContinue: () => void,
|
||||||
onBack: () => void,
|
|
||||||
channelSubscribe: (sub: Subscription) => void,
|
channelSubscribe: (sub: Subscription) => void,
|
||||||
homepageData: any,
|
homepageData: any,
|
||||||
prefsReady: boolean,
|
prefsReady: boolean,
|
||||||
|
@ -49,25 +48,26 @@ function UserChannelFollowIntro(props: Props) {
|
||||||
<Card
|
<Card
|
||||||
title={__('Find channels to follow')}
|
title={__('Find channels to follow')}
|
||||||
subtitle={__(
|
subtitle={__(
|
||||||
'LBRY works better if you find and follow a couple creators you like. You can also block channels you never want to see.'
|
'Odysee works better if you find and follow a couple creators you like. You can also block channels you never want to see.'
|
||||||
)}
|
)}
|
||||||
actions={
|
actions={
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="section__actions--between">
|
|
||||||
<Button button="secondary" onClick={onBack} label={__('Back')} />
|
|
||||||
<Button
|
|
||||||
button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
|
|
||||||
onClick={onContinue}
|
|
||||||
label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="section__body">
|
<div className="section__body">
|
||||||
<ClaimListDiscover
|
<ClaimListDiscover
|
||||||
defaultOrderBy={CS.ORDER_BY_TOP}
|
hideFilters
|
||||||
|
meta={
|
||||||
|
<Button
|
||||||
|
button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
|
||||||
|
onClick={onContinue}
|
||||||
|
label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
defaultOrderBy={CS.ORDER_BY_TRENDING}
|
||||||
defaultFreshness={CS.FRESH_ALL}
|
defaultFreshness={CS.FRESH_ALL}
|
||||||
claimType="channel"
|
claimType="channel"
|
||||||
claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
|
claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
|
||||||
defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
|
defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
|
||||||
|
maxPages={3}
|
||||||
/>
|
/>
|
||||||
{followingCount > 0 && (
|
{followingCount > 0 && (
|
||||||
<Nag
|
<Nag
|
||||||
|
|
|
@ -127,6 +127,9 @@ function ChannelsFollowingDiscover(props: Props) {
|
||||||
claimType={CS.CLAIM_CHANNEL}
|
claimType={CS.CLAIM_CHANNEL}
|
||||||
claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
|
claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined}
|
||||||
scrollAnchor={MORE_CHANNELS_ANCHOR}
|
scrollAnchor={MORE_CHANNELS_ANCHOR}
|
||||||
|
maxPages={SIMPLE_SITE ? 3 : undefined}
|
||||||
|
hideFilters={SIMPLE_SITE}
|
||||||
|
header={SIMPLE_SITE && <h1 className="section__title">{__('Moon cheese is an acquired taste')}</h1>}
|
||||||
/>
|
/>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
|
import * as CS from 'constants/claim_search';
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
import ClaimListDiscover from 'component/claimListDiscover';
|
import ClaimListDiscover from 'component/claimListDiscover';
|
||||||
|
@ -11,11 +12,11 @@ import { useIsMobile } from 'effects/use-screensize';
|
||||||
import analytics from 'analytics';
|
import analytics from 'analytics';
|
||||||
import HiddenNsfw from 'component/common/hidden-nsfw';
|
import HiddenNsfw from 'component/common/hidden-nsfw';
|
||||||
import Icon from 'component/common/icon';
|
import Icon from 'component/common/icon';
|
||||||
import * as CS from 'constants/claim_search';
|
|
||||||
import Ads from 'web/component/ads';
|
import Ads from 'web/component/ads';
|
||||||
import LbcSymbol from 'component/common/lbc-symbol';
|
import LbcSymbol from 'component/common/lbc-symbol';
|
||||||
import I18nMessage from 'component/i18nMessage';
|
import I18nMessage from 'component/i18nMessage';
|
||||||
import useGetLivestreams from 'effects/use-get-livestreams';
|
import useGetLivestreams from 'effects/use-get-livestreams';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
location: { search: string },
|
location: { search: string },
|
||||||
|
@ -97,8 +98,8 @@ function DiscoverPage(props: Props) {
|
||||||
} else {
|
} else {
|
||||||
headerLabel = (
|
headerLabel = (
|
||||||
<span>
|
<span>
|
||||||
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.DISCOVER} size={10} />
|
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.WILD_WEST} size={10} />
|
||||||
{(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')}
|
{(dynamicRouteProps && dynamicRouteProps.title) || __('Wild West')}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -106,9 +107,11 @@ function DiscoverPage(props: Props) {
|
||||||
return (
|
return (
|
||||||
<Page noFooter fullWidthPage={tileLayout}>
|
<Page noFooter fullWidthPage={tileLayout}>
|
||||||
<ClaimListDiscover
|
<ClaimListDiscover
|
||||||
limitClaimsPerChannel={3}
|
hideAdvancedFilter
|
||||||
|
hideFilters={!dynamicRouteProps}
|
||||||
header={repostedUri ? <span /> : undefined}
|
header={repostedUri ? <span /> : undefined}
|
||||||
tileLayout={repostedUri ? false : tileLayout}
|
tileLayout={repostedUri ? false : tileLayout}
|
||||||
|
defaultOrderBy={dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING}
|
||||||
claimType={claimType ? [claimType] : undefined}
|
claimType={claimType ? [claimType] : undefined}
|
||||||
headerLabel={headerLabel}
|
headerLabel={headerLabel}
|
||||||
tags={tags}
|
tags={tags}
|
||||||
|
@ -117,9 +120,18 @@ function DiscoverPage(props: Props) {
|
||||||
injectedItem={
|
injectedItem={
|
||||||
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
|
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
|
||||||
}
|
}
|
||||||
|
// Assume wild west page if no dynamicRouteProps
|
||||||
|
// Not a very good solution, but just doing it for now
|
||||||
|
// until we are sure this page will stay around
|
||||||
|
releaseTime={!dynamicRouteProps && `>${Math.floor(moment().subtract(1, 'day').startOf('week').unix())}`}
|
||||||
|
feeAmount={!dynamicRouteProps && CS.FEE_AMOUNT_ANY}
|
||||||
channelIds={
|
channelIds={
|
||||||
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
|
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
|
||||||
}
|
}
|
||||||
|
limitClaimsPerChannel={
|
||||||
|
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
|
||||||
|
undefined
|
||||||
|
}
|
||||||
meta={
|
meta={
|
||||||
!dynamicRouteProps ? (
|
!dynamicRouteProps ? (
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import * as PAGES from 'constants/pages';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { lazyImport } from 'util/lazyImport';
|
import { lazyImport } from 'util/lazyImport';
|
||||||
|
@ -11,6 +12,9 @@ import FileRenderDownload from 'component/fileRenderDownload';
|
||||||
import RecommendedContent from 'component/recommendedContent';
|
import RecommendedContent from 'component/recommendedContent';
|
||||||
import CollectionContent from 'component/collectionContentSidebar';
|
import CollectionContent from 'component/collectionContentSidebar';
|
||||||
import CommentsList from 'component/commentsList';
|
import CommentsList from 'component/commentsList';
|
||||||
|
import { Redirect } from 'react-router';
|
||||||
|
import Button from 'component/button';
|
||||||
|
import I18nMessage from 'component/i18nMessage';
|
||||||
import Empty from 'component/common/empty';
|
import Empty from 'component/common/empty';
|
||||||
|
|
||||||
const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
|
const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
|
||||||
|
@ -32,7 +36,9 @@ type Props = {
|
||||||
collection?: Collection,
|
collection?: Collection,
|
||||||
collectionId: string,
|
collectionId: string,
|
||||||
videoTheaterMode: boolean,
|
videoTheaterMode: boolean,
|
||||||
|
claimIsMine: boolean,
|
||||||
commentsDisabled: boolean,
|
commentsDisabled: boolean,
|
||||||
|
isLivestream: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function FilePage(props: Props) {
|
function FilePage(props: Props) {
|
||||||
|
@ -49,9 +55,12 @@ function FilePage(props: Props) {
|
||||||
linkedCommentId,
|
linkedCommentId,
|
||||||
setPrimaryUri,
|
setPrimaryUri,
|
||||||
videoTheaterMode,
|
videoTheaterMode,
|
||||||
|
|
||||||
|
claimIsMine,
|
||||||
commentsDisabled,
|
commentsDisabled,
|
||||||
collection,
|
collection,
|
||||||
collectionId,
|
collectionId,
|
||||||
|
isLivestream,
|
||||||
} = props;
|
} = props;
|
||||||
const cost = costInfo ? costInfo.cost : null;
|
const cost = costInfo ? costInfo.cost : null;
|
||||||
const hasFileInfo = fileInfo !== undefined;
|
const hasFileInfo = fileInfo !== undefined;
|
||||||
|
@ -136,6 +145,10 @@ function FilePage(props: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!claimIsMine && isLivestream) {
|
||||||
|
return <Redirect to={`/$/${PAGES.LIVESTREAM}`} />;
|
||||||
|
}
|
||||||
|
|
||||||
if (obscureNsfw && isMature) {
|
if (obscureNsfw && isMature) {
|
||||||
return (
|
return (
|
||||||
<Page className="file-page" filePage isMarkdown={isMarkdown}>
|
<Page className="file-page" filePage isMarkdown={isMarkdown}>
|
||||||
|
@ -156,6 +169,18 @@ function FilePage(props: Props) {
|
||||||
{!isMarkdown && (
|
{!isMarkdown && (
|
||||||
<div className="file-page__secondary-content">
|
<div className="file-page__secondary-content">
|
||||||
<div>
|
<div>
|
||||||
|
{claimIsMine && isLivestream && (
|
||||||
|
<div className="livestream__creator-message">
|
||||||
|
<h4>{__('Only visible to you')}</h4>
|
||||||
|
<I18nMessage>
|
||||||
|
People who view this link will be redirected to your livestream. Make sure to use this for sharing
|
||||||
|
so your title and thumbnail are displayed properly.
|
||||||
|
</I18nMessage>
|
||||||
|
<div className="section__actions">
|
||||||
|
<Button button="primary" navigate={`/$/${PAGES.LIVESTREAM}`} label={__('View livestream')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
|
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
|
||||||
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
|
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
|
||||||
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
|
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
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 { SETTINGS } from 'lbry-redux';
|
import { SETTINGS } from 'lbry-redux';
|
||||||
|
@ -17,7 +17,7 @@ import classnames from 'classnames';
|
||||||
import { getPasswordFromCookie } from 'util/saved-passwords';
|
import { getPasswordFromCookie } from 'util/saved-passwords';
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
import homepages from 'homepages';
|
import homepages from 'homepages';
|
||||||
import { Lbryio } from 'lbryinc';
|
// import { Lbryio } from 'lbryinc';
|
||||||
import Yrbl from 'component/yrbl';
|
import Yrbl from 'component/yrbl';
|
||||||
|
|
||||||
type Price = {
|
type Price = {
|
||||||
|
@ -171,7 +171,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
const {
|
const {
|
||||||
daemonSettings,
|
daemonSettings,
|
||||||
allowAnalytics,
|
allowAnalytics,
|
||||||
showNsfw,
|
// showNsfw,
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
currentTheme,
|
currentTheme,
|
||||||
themes,
|
themes,
|
||||||
|
@ -184,13 +184,13 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
setClientSetting,
|
setClientSetting,
|
||||||
toggle3PAnalytics,
|
toggle3PAnalytics,
|
||||||
floatingPlayer,
|
floatingPlayer,
|
||||||
hideReposts,
|
// hideReposts,
|
||||||
clearPlayingUri,
|
clearPlayingUri,
|
||||||
darkModeTimes,
|
darkModeTimes,
|
||||||
clearCache,
|
clearCache,
|
||||||
openModal,
|
|
||||||
myChannelUrls,
|
myChannelUrls,
|
||||||
user,
|
user,
|
||||||
|
// openModal,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const { storedPassword } = this.state;
|
const { storedPassword } = this.state;
|
||||||
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
||||||
|
@ -225,6 +225,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
{/* @endif */}
|
{/* @endif */}
|
||||||
|
|
||||||
{/* @if TARGET='web' */}
|
{/* @if TARGET='web' */}
|
||||||
|
{isAuthenticated &&
|
||||||
<Card
|
<Card
|
||||||
title={__('Payment Methods')}
|
title={__('Payment Methods')}
|
||||||
subtitle={__('Add a credit card to tip creators in their local currency')}
|
subtitle={__('Add a credit card to tip creators in their local currency')}
|
||||||
|
@ -239,6 +240,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
}
|
||||||
{/* @endif */}
|
{/* @endif */}
|
||||||
|
|
||||||
<Card title={__('Language')} actions={<SettingLanguage />} />
|
<Card title={__('Language')} actions={<SettingLanguage />} />
|
||||||
|
@ -394,7 +396,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FormField
|
{/* <FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="hide_reposts"
|
name="hide_reposts"
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
@ -408,7 +410,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
checked={hideReposts}
|
checked={hideReposts}
|
||||||
label={__('Hide reposts')}
|
label={__('Hide reposts')}
|
||||||
helper={__('You will not see reposts by people you follow or receive email notifying about them.')}
|
helper={__('You will not see reposts by people you follow or receive email notifying about them.')}
|
||||||
/>
|
/> */}
|
||||||
|
|
||||||
{/* <FormField
|
{/* <FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
@ -419,7 +421,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
helper={__('Anonymous content is published without a channel.')}
|
helper={__('Anonymous content is published without a channel.')}
|
||||||
/> */}
|
/> */}
|
||||||
|
|
||||||
<FormField
|
{/* <FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="show_nsfw"
|
name="show_nsfw"
|
||||||
onChange={() =>
|
onChange={() =>
|
||||||
|
@ -432,7 +434,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
helper={__(
|
helper={__(
|
||||||
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
||||||
)}
|
)}
|
||||||
/>
|
/> */}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -11,9 +11,9 @@ const defaultState: SearchState = {
|
||||||
[SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
|
[SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
|
||||||
[SEARCH_OPTIONS.MEDIA_AUDIO]: true,
|
[SEARCH_OPTIONS.MEDIA_AUDIO]: true,
|
||||||
[SEARCH_OPTIONS.MEDIA_VIDEO]: true,
|
[SEARCH_OPTIONS.MEDIA_VIDEO]: true,
|
||||||
[SEARCH_OPTIONS.MEDIA_TEXT]: true,
|
[SEARCH_OPTIONS.MEDIA_TEXT]: false,
|
||||||
[SEARCH_OPTIONS.MEDIA_IMAGE]: true,
|
[SEARCH_OPTIONS.MEDIA_IMAGE]: false,
|
||||||
[SEARCH_OPTIONS.MEDIA_APPLICATION]: true,
|
[SEARCH_OPTIONS.MEDIA_APPLICATION]: false,
|
||||||
},
|
},
|
||||||
urisByQuery: {},
|
urisByQuery: {},
|
||||||
hasReachedMaxResultsLength: {},
|
hasReachedMaxResultsLength: {},
|
||||||
|
|
|
@ -230,13 +230,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-viewer__overlay-logo {
|
.file-viewer__overlay-logo {
|
||||||
color: var(--color-white);
|
height: 3.5rem;
|
||||||
font-weight: bold;
|
width: 12rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.icon {
|
&:hover {
|
||||||
height: 30px;
|
filter: drop-shadow(1px 2px 10px var(--color-gray-3));
|
||||||
stroke-width: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: $breakpoint-small) {
|
||||||
|
margin-right: var(--spacing-m);
|
||||||
|
width: 2.5rem;
|
||||||
|
|
||||||
|
.button__label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-viewer__overlay-logo--videoend {
|
||||||
|
height: 3.5rem;
|
||||||
|
width: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
|
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
|
||||||
|
@ -246,11 +261,15 @@
|
||||||
.file-viewer__embedded-header {
|
.file-viewer__embedded-header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
height: 4rem;
|
||||||
|
padding-left: var(--spacing-m);
|
||||||
|
padding-right: var(--spacing-s);
|
||||||
font-size: var(--font-large);
|
font-size: var(--font-large);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
@ -260,7 +279,6 @@
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
padding: var(--spacing-s);
|
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
|
|
|
@ -203,7 +203,7 @@ input-submit {
|
||||||
height: var(--height-checkbox);
|
height: var(--height-checkbox);
|
||||||
width: var(--height-checkbox);
|
width: var(--height-checkbox);
|
||||||
border: 1px solid var(--color-input-border);
|
border: 1px solid var(--color-input-border);
|
||||||
border-radius: var(--border-radius);
|
border-radius: 3px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,7 +58,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
color: var(--color-text);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
|
|
||||||
|
|
|
@ -1,57 +0,0 @@
|
||||||
:root {
|
|
||||||
// Generic colors
|
|
||||||
--color-primary: #257761;
|
|
||||||
--color-primary-alt: #e4f4ef;
|
|
||||||
--color-primary-alt-2: #4b8576;
|
|
||||||
--color-secondary: #295284;
|
|
||||||
--color-secondary-alt: #d9eaff;
|
|
||||||
--color-tertiary: #552470;
|
|
||||||
--color-tertiary-alt: #f7e8ff;
|
|
||||||
--color-danger: #9b2023;
|
|
||||||
--color-danger-alt: #fccdce;
|
|
||||||
--color-warning: #fff58c;
|
|
||||||
--color-cost: #ffd580;
|
|
||||||
--color-focus: #93cff2;
|
|
||||||
--color-notification: #f02849;
|
|
||||||
--color-live: #cc190f;
|
|
||||||
|
|
||||||
--color-black: #111;
|
|
||||||
--color-white: #fdfdfd;
|
|
||||||
--color-white-alt: #fafafa;
|
|
||||||
--color-gray-1: #eff1f4;
|
|
||||||
--color-gray-2: #d8dde1;
|
|
||||||
--color-gray-3: #ced4da;
|
|
||||||
--color-gray-4: #abb1b7;
|
|
||||||
--color-gray-5: #666a6d;
|
|
||||||
|
|
||||||
// Text
|
|
||||||
--color-text: var(--color-black);
|
|
||||||
--color-text-subtitle: var(--color-gray-5);
|
|
||||||
--color-text-inverse: #fdfdfd;
|
|
||||||
|
|
||||||
// Components
|
|
||||||
|
|
||||||
// Button
|
|
||||||
--color-button-primary-bg: var(--color-primary);
|
|
||||||
--color-button-primary-text: var(--color-primary-alt);
|
|
||||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
|
||||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
|
||||||
--color-button-secondary-bg: var(--color-secondary-alt);
|
|
||||||
--color-button-secondary-border: var(--color-secondary-alt);
|
|
||||||
--color-button-secondary-text: var(--color-secondary);
|
|
||||||
--color-button-secondary-bg-hover: #b9d0e9;
|
|
||||||
--color-button-alt-bg: var(--color-gray-1);
|
|
||||||
--color-button-alt-text: var(--color-text);
|
|
||||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
|
||||||
--color-link: var(--color-primary);
|
|
||||||
--color-link-hover: var(--color-black);
|
|
||||||
|
|
||||||
// Table
|
|
||||||
--color-table-highlight: var(--color-white-alt);
|
|
||||||
|
|
||||||
// Tag
|
|
||||||
--color-tag: var(--color-gray-5);
|
|
||||||
--color-tag-bg: var(--color-button-alt-bg);
|
|
||||||
--color-tag-hover: var(--color-button-alt-text);
|
|
||||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
|
||||||
}
|
|
|
@ -60,8 +60,12 @@ ol {
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style-position: outside;
|
list-style-position: outside;
|
||||||
margin: var(--spacing-xs) 0;
|
margin: var(--spacing-xs) 0;
|
||||||
margin-left: var(--spacing-xl);
|
margin-left: var(--spacing-s);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-small) {
|
||||||
|
margin-left: var(--spacing-xl);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -267,10 +271,10 @@ textarea {
|
||||||
margin-top: var(--spacing-s);
|
margin-top: var(--spacing-s);
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-bottom: var(--spacing-s);
|
margin-bottom: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--link ~ .button--link {
|
.button--link + .button--link {
|
||||||
margin-left: var(--spacing-s);
|
margin-left: var(--spacing-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -282,7 +286,6 @@ textarea {
|
||||||
.help--warning {
|
.help--warning {
|
||||||
@extend .help;
|
@extend .help;
|
||||||
padding: var(--spacing-s);
|
padding: var(--spacing-s);
|
||||||
color: var(--color-black);
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background-color: var(--color-help-warning-bg);
|
background-color: var(--color-help-warning-bg);
|
||||||
color: var(--color-help-warning-text);
|
color: var(--color-help-warning-text);
|
||||||
|
@ -499,3 +502,16 @@ textarea {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home__meme {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: var(--spacing-m);
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-small) {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: var(--spacing-l);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ $breakpoint-medium: 1150px;
|
||||||
$breakpoint-large: 1600px;
|
$breakpoint-large: 1600px;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--border-radius: 5px;
|
--border-radius: 10px;
|
||||||
--height-input: 2.5rem;
|
--height-input: 2.5rem;
|
||||||
--height-button: 2.5rem;
|
--height-button: 2.5rem;
|
||||||
--height-checkbox: 24px;
|
--height-checkbox: 24px;
|
||||||
|
|
|
@ -1,30 +1,30 @@
|
||||||
[theme='dark'] {
|
[theme='dark'] {
|
||||||
// Color overrides
|
// Color overrides
|
||||||
--color-primary: #2bbb90;
|
--color-primary: #e50054;
|
||||||
--color-primary-alt: #3e675d;
|
--color-primary-alt: #66001880;
|
||||||
--color-primary-alt-2: #065f46;
|
--color-fire: #ff6635;
|
||||||
--color-primary-alt-3: #34e5b0;
|
--color-fire-outside: #ff9b20;
|
||||||
--color-secondary: #204166;
|
|
||||||
--color-secondary-alt: #dbeafe;
|
|
||||||
--color-secondary-alt-2: #bfdbfe;
|
|
||||||
--color-secondary-alt-3: #2c5c8c;
|
|
||||||
|
|
||||||
// Structure
|
// Structure
|
||||||
--color-background: var(--color-gray-9);
|
--color-background: #140e1b;
|
||||||
--color-background-overlay: #21252999;
|
--color-background-overlay: #0c0d0e95;
|
||||||
--color-border: #333338;
|
--color-border: #30243d;
|
||||||
--color-card-background: var(--color-gray-8);
|
--color-card-background: #181021;
|
||||||
--color-card-background-highlighted: var(--color-gray-7);
|
--color-card-background-highlighted: #241c30;
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
--color-text: var(--color-white);
|
--color-text: var(--color-gray-1);
|
||||||
--color-text-subtitle: var(--color-gray-4);
|
--color-text-subtitle: var(--color-gray-4);
|
||||||
--color-text-empty: var(--color-text-subtitle);
|
--color-text-empty: var(--color-text-subtitle);
|
||||||
--color-text-help: #bbbbbb;
|
--color-text-help: #bbbbbb;
|
||||||
--color-text-warning: #212529;
|
--color-text-warning: #212529;
|
||||||
--color-text-warning--background: var(--lbry-yellow-1);
|
--color-text-warning--background: var(--lbry-yellow-1);
|
||||||
--color-text-error: #f87171;
|
--color-text-error: var(--color-danger);
|
||||||
--color-error: #61373f;
|
--color-error: var(--color-danger-alt);
|
||||||
|
--color-blockquote: var(--color-gray-5);
|
||||||
|
--color-blockquote-bg: var(--color-card-background-highlighted);
|
||||||
|
--color-help-warning-text: var(--color-white-alt);
|
||||||
|
--color-help-warning-bg: #fbbf2450;
|
||||||
|
|
||||||
// Tags (words)
|
// Tags (words)
|
||||||
--color-tag-words: var(--color-text);
|
--color-tag-words: var(--color-text);
|
||||||
|
@ -33,87 +33,73 @@
|
||||||
--color-tag-words-bg-hover: var(--color-gray-4);
|
--color-tag-words-bg-hover: var(--color-gray-4);
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
--color-header-background: var(--color-gray-8);
|
--color-header-button: #38274c;
|
||||||
--color-header-button: var(--color-gray-6);
|
--color-header-background: #231830;
|
||||||
--color-header-button-hover: var(--color-gray-6);
|
|
||||||
--color-header-button-active: var(--color-gray-6);
|
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
--color-button-primary-bg: var(--color-primary-alt);
|
--color-button-primary-text: white;
|
||||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
|
||||||
--color-button-primary-text: var(--color-gray-2);
|
|
||||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||||
--color-button-secondary-bg: var(--color-secondary);
|
--color-button-secondary-bg: #2c1543;
|
||||||
--color-button-secondary-border: var(--color-secondary);
|
--color-button-secondary-border: #4f1c82;
|
||||||
--color-button-secondary-bg-hover: var(--color-secondary-alt-3);
|
--color-button-secondary-bg-hover: #3b1c5b;
|
||||||
--color-button-secondary-text: var(--color-gray-2);
|
--color-button-secondary-text: #efefef;
|
||||||
--color-button-alt-bg: var(--color-gray-7);
|
--color-button-alt-bg: var(--color-header-button);
|
||||||
--color-button-alt-bg-hover: var(--color-gray-6);
|
--color-button-alt-bg-hover: #2b2037;
|
||||||
--color-button-alt-text: var(--color-gray-1);
|
--color-button-toggle-text: var(--color-text);
|
||||||
--color-button-border: var(--color-gray-5);
|
--color-button-toggle-bg: var(--color-primary-alt);
|
||||||
--color-button-toggle-text: var(--color-gray-1);
|
--color-button-toggle-bg-hover: var(--color-primary-alt);
|
||||||
--color-link: var(--color-primary-alt-3);
|
--color-button-alt-text: #e2e9f0;
|
||||||
--color-link-hover: var(--color-text);
|
--color-button-border: #5b4475;
|
||||||
--color-link-focus-bg: var(--color-gray-7);
|
--color-link: var(--color-primary);
|
||||||
|
--color-link-hover: #d75673;
|
||||||
|
--color-link-active: #ec1d4c;
|
||||||
|
--color-link-focus-bg: #3d2d4e;
|
||||||
|
|
||||||
// Input
|
// Input
|
||||||
--color-input: var(--color-white);
|
--color-input: #f4f4f5;
|
||||||
--color-input-label: var(--color-gray-3);
|
--color-input-label: #a7a7a7;
|
||||||
--color-input-placeholder: var(--color-gray-1);
|
--color-input-placeholder: #f4f4f5;
|
||||||
--color-input-bg: var(--color-header-button);
|
--color-input-bg: var(--color-header-button);
|
||||||
--color-input-bg-copyable: var(--color-gray-6);
|
--color-input-bg-copyable: #4c3861;
|
||||||
--color-input-border: var(--color-border);
|
--color-input-border: var(--color-border);
|
||||||
--color-input-border-active: var(--color-secondary);
|
--color-input-border-active: var(--color-secondary);
|
||||||
--color-input-toggle: var(--color-primary-alt-3);
|
--color-input-toggle: var(--color-primary-alt-3);
|
||||||
--color-input-toggle-bg: var(--color-input-bg);
|
--color-input-toggle-bg: var(--color-input-bg);
|
||||||
--color-input-toggle-bg-hover: var(--color-secondary);
|
--color-input-toggle-bg-hover: var(--color-secondary);
|
||||||
--color-input-bg-selected: var(--color-primary-alt);
|
--color-input-bg-selected: var(--color-primary-alt);
|
||||||
--color-input-prefix-bg: var(--color-gray-5);
|
--color-input-prefix-bg: var(--color-input-bg-copyable);
|
||||||
--color-input-prefix-border: var(--color-gray-4);
|
--color-input-prefix-border: var(--color-gray-4);
|
||||||
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||||
|
|
||||||
// Navigation
|
// Navigation
|
||||||
--color-navigation-icon: var(--color-gray-4);
|
--color-navigation-icon: #76808a;
|
||||||
--color-navigation-link: var(--color-gray-4);
|
--color-navigation-link: #b9c3ce;
|
||||||
--color-navigation-active: var(--color-gray-7);
|
--color-navigation-active: #2b2037;
|
||||||
--color-navigation-active-text: var(--color-gray-3);
|
--color-navigation-active-text: #c6bcd2;
|
||||||
--color-navigation-hover: var(--color-gray-6);
|
--color-navigation-hover: #21182a;
|
||||||
--color-navigation-hover-text: var(--color-gray-3);
|
--color-navigation-hover-text: #c6bcd2;
|
||||||
|
|
||||||
// Tags
|
// Tags
|
||||||
--color-tag: var(--color-primary-alt-3);
|
--color-tag: #ff85b1;
|
||||||
--color-tag-bg: var(--color-gray-7);
|
--color-tag-bg: var(--color-navigation-hover);
|
||||||
--color-tag-hover: var(--color-white);
|
--color-tag-hover: var(--color-white);
|
||||||
--color-tag-bg-hover: var(--color-primary-alt);
|
--color-tag-bg-hover: var(--color-primary-alt-2);
|
||||||
|
--color-tag-mature-bg: var(--color-primary-alt-2);
|
||||||
|
|
||||||
// Menu
|
// Menu
|
||||||
--color-menu-background: var(--color-header-background);
|
--color-menu-background: var(--color-header-background);
|
||||||
--color-menu-background--active: var(--color-gray-7);
|
--color-menu-background--active: var(--color-primary-alt);
|
||||||
--color-menu-icon: var(--color-gray-4);
|
--color-menu-icon: #928b9b;
|
||||||
|
--color-menu-icon-active: #d6d6d6;
|
||||||
|
|
||||||
// Comments
|
// Comments
|
||||||
--color-comment-menu: var(--color-gray-5);
|
--color-comment-menu: #6a6a6a;
|
||||||
--color-comment-menu-hovering: var(--color-gray-2);
|
--color-comment-menu-hovering: #e0e0e0;
|
||||||
--color-comment-threadline: #434b54;
|
|
||||||
--color-comment-threadline-hover: var(--color-gray-4);
|
|
||||||
--color-comment-highlighted: #484734;
|
--color-comment-highlighted: #484734;
|
||||||
|
--color-comment-threadline: #24192f;
|
||||||
// Snack
|
--color-comment-threadline-hover: var(--color-gray-4);
|
||||||
--color-snack-bg: var(--color-secondary);
|
|
||||||
|
|
||||||
// Superchat
|
|
||||||
--color-superchat-text: var(--color-black);
|
|
||||||
--color-superchat-text__light: var(--color-text);
|
|
||||||
--color-superchat: #fcd34d;
|
|
||||||
--color-superchat__light: #ef4e1647;
|
|
||||||
--color-superchat-2: #fde68a;
|
|
||||||
--color-superchat-3: #fef3c7;
|
|
||||||
--color-superchat-3__light: #58066087;
|
|
||||||
--color-superchat-4: #fffbeb;
|
|
||||||
|
|
||||||
// Other
|
// Other
|
||||||
--color-focus: #93c5fd50;
|
|
||||||
--color-nag: var(--color-orange);
|
|
||||||
--color-tab-text: var(--color-white);
|
--color-tab-text: var(--color-white);
|
||||||
--color-tabs-background: var(--color-card-background);
|
--color-tabs-background: var(--color-card-background);
|
||||||
--color-tab-divider: var(--color-white);
|
--color-tab-divider: var(--color-white);
|
||||||
|
@ -121,14 +107,12 @@
|
||||||
--color-notice: #58563b;
|
--color-notice: #58563b;
|
||||||
--color-purchased: #ffd580;
|
--color-purchased: #ffd580;
|
||||||
--color-purchased-alt: var(--color-purchased);
|
--color-purchased-alt: var(--color-purchased);
|
||||||
--color-purchased-text: var(--color-gray-5);
|
--color-purchased-text: black;
|
||||||
--color-thumbnail-background: var(--color-gray-5);
|
--color-thumbnail-background: var(--color-gray-5);
|
||||||
--color-tooltip-bg: #2f3337;
|
--color-tooltip-bg: #2f3337;
|
||||||
--color-help-warning-bg: #d97706;
|
--color-focus: #e91e6329;
|
||||||
--color-help-warning-text: white;
|
--color-placeholder-background: #261a35;
|
||||||
--color-blockquote: var(--color-gray-5);
|
--color-spinner-light: white;
|
||||||
--color-placeholder-background: #4e5862;
|
|
||||||
--color-spinner-light: #5a6570;
|
|
||||||
--color-spinner-dark: #212529;
|
--color-spinner-dark: #212529;
|
||||||
--color-login-graphic-background: var(--color-background);
|
--color-login-graphic-background: var(--color-background);
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,155 @@
|
||||||
:root {
|
:root {
|
||||||
|
// Color overrides
|
||||||
|
--color-primary: #fa6165;
|
||||||
|
--color-primary-alt: #fef1f6;
|
||||||
|
--color-primary-alt-2: #fb7e82;
|
||||||
|
--color-primary-alt-3: #fbcbdd;
|
||||||
|
--color-secondary: #f9902a;
|
||||||
|
--color-secondary-alt: #fee8d2;
|
||||||
|
--color-secondary-alt-2: #fefcf6;
|
||||||
|
|
||||||
|
// Structure
|
||||||
|
--color-border: #ededed;
|
||||||
|
--color-background: #fafafa;
|
||||||
|
--color-background-overlay: #21252980;
|
||||||
|
--color-card-background: #ffffff;
|
||||||
|
--color-card-background-highlighted: #fff5f5;
|
||||||
|
|
||||||
|
// Text
|
||||||
|
--color-text-selection-bg: var(--color-primary-alt);
|
||||||
|
--color-text-selection: var(--color-primary);
|
||||||
|
--color-text-error: var(--color-danger);
|
||||||
|
--color-text-empty: #999999;
|
||||||
|
--color-text-help: #999999;
|
||||||
|
--color-text-subtitle: #767676;
|
||||||
|
--color-text-warning: #212529;
|
||||||
|
--color-help-warning-bg: #fef3c7;
|
||||||
|
--color-text-warning--background: var(--lbry-yellow-1);
|
||||||
|
--color-blockquote: var(--color-gray-3);
|
||||||
|
--color-blockquote-bg: var(--color-gray-1);
|
||||||
|
--color-tooltip-bg: #222;
|
||||||
|
--color-tooltip-text: #fafafa;
|
||||||
|
|
||||||
|
// Header
|
||||||
|
--color-header-button: var(--color-button-alt-bg);
|
||||||
|
--color-header-background: #ffffff;
|
||||||
|
|
||||||
|
// Button
|
||||||
|
--color-button-alt-bg: var(--color-gray-1);
|
||||||
|
--color-button-alt-bg-hover: var(--color-gray-2);
|
||||||
|
--color-button-alt-text: black;
|
||||||
|
--color-button-primary-bg: var(--color-primary);
|
||||||
|
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||||
|
--color-button-primary-text: var(--color-primary-alt);
|
||||||
|
--color-button-primary-hover-text: var(--color-white);
|
||||||
|
--color-button-secondary-bg: var(--color-primary-alt);
|
||||||
|
--color-button-secondary-border: var(--color-primary-alt-3);
|
||||||
|
--color-button-secondary-text: var(--color-primary);
|
||||||
|
--color-button-secondary-bg-hover: var(--color-primary-alt-3);
|
||||||
|
--color-button-toggle-text: var(--color-primary);
|
||||||
|
--color-button-toggle-bg: var(--color-primary-alt);
|
||||||
|
--color-button-toggle-bg-hover: var(--color-primary-alt);
|
||||||
|
--color-button-border: var(--color-gray-3);
|
||||||
|
--color-link-active: var(--color-primary);
|
||||||
|
--color-link-focus-bg: #f1f1f1;
|
||||||
|
--color-link: var(--color-primary);
|
||||||
|
|
||||||
|
// Input
|
||||||
|
--color-input-bg-selected: var(--color-primary-alt);
|
||||||
|
--color-input-color: #111111;
|
||||||
|
--color-input-label: var(--color-gray-5);
|
||||||
|
--color-input-placeholder: #212529;
|
||||||
|
--color-input-bg: var(--color-gray-1);
|
||||||
|
--color-input-border: var(--color-border);
|
||||||
|
--color-input-border-active: var(--color-secondary);
|
||||||
|
--color-input-toggle: var(--color-secondary);
|
||||||
|
--color-input-toggle-bg: var(--color-gray-1);
|
||||||
|
--color-input-toggle-bg-hover: var(--color-secondary-alt);
|
||||||
|
--color-input-prefix-bg: var(--color-gray-2);
|
||||||
|
--color-input-prefix-border: var(--color-gray-5);
|
||||||
|
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
--color-navigation-icon: var(--color-gray-5);
|
||||||
|
--color-navigation-link: var(--color-gray-5);
|
||||||
|
--color-navigation-active: var(--color-primary-alt);
|
||||||
|
--color-navigation-active-text: var(--color-primary);
|
||||||
|
--color-navigation-hover: var(--color-gray-1);
|
||||||
|
--color-navigation-hover-text: #3f3f3f;
|
||||||
|
|
||||||
|
// Tags
|
||||||
|
--color-tag: var(--color-primary-alt-2);
|
||||||
|
--color-tag-bg: #f9f6f7;
|
||||||
|
--color-tag-hover: var(--color-button-alt-text);
|
||||||
|
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
--color-menu-background: var(--color-header-background);
|
||||||
|
--color-menu-icon: var(--color-navigation-link);
|
||||||
|
--color-menu-icon-active: var(--color-navigation-link);
|
||||||
|
--color-menu-background--selected: var(--color-secondary-alt);
|
||||||
|
--color-menu-background--active: var(--color-primary-alt);
|
||||||
|
|
||||||
|
// Comments
|
||||||
|
--color-comment-menu: #e0e0e0;
|
||||||
|
--color-comment-menu-hovering: #6a6a6a;
|
||||||
|
--color-comment-highlighted: #fff2d9;
|
||||||
|
--color-comment-threadline: var(--color-gray-1);
|
||||||
|
--color-comment-threadline-hover: var(--color-gray-4);
|
||||||
|
|
||||||
|
// Superchat
|
||||||
|
--color-superchat-text: var(--color-black);
|
||||||
|
--color-superchat: #fcd34d;
|
||||||
|
--color-superchat__light: #fcd34d50;
|
||||||
|
--color-superchat-2: #fde68a;
|
||||||
|
--color-superchat-3: #fef3c7;
|
||||||
|
--color-superchat-3__light: #fef3c750;
|
||||||
|
--color-superchat-4: #fffbeb;
|
||||||
|
|
||||||
|
// Color
|
||||||
|
--color-focus: #8dbff0;
|
||||||
|
--color-nag: #fa8700;
|
||||||
|
--color-error: #fcafca;
|
||||||
|
--color-notice: #fef3ca;
|
||||||
|
--color-purchased: var(--color-cost);
|
||||||
|
--color-purchased-alt: #ffebc2;
|
||||||
|
--color-purchased-text: black;
|
||||||
|
--color-thumbnail-background: var(--color-gray-1);
|
||||||
|
--color-spinner-light: #ffffff;
|
||||||
|
--color-spinner-dark: #212529;
|
||||||
|
--color-placeholder-background: #f0f0f0;
|
||||||
|
--color-file-viewer-background: var(--color-card-background);
|
||||||
|
--color-tabs-background: var(--color-card-background);
|
||||||
|
--color-tab-divider: var(--color-primary);
|
||||||
|
--color-modal-background: var(--color-card-background);
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
--color-follow-bg: #ffd4da;
|
||||||
|
--color-follow-icon: #e2495e;
|
||||||
|
--color-view-bg: var(--color-secondary-alt);
|
||||||
|
--color-view-icon: var(--color-secondary);
|
||||||
|
|
||||||
|
// Editor
|
||||||
|
--color-editor-cursor: var(--color-text);
|
||||||
|
--color-editor-quote: #707070;
|
||||||
|
--color-editor-tag: #ea9400;
|
||||||
|
--color-editor-attr: #04b0f4;
|
||||||
|
--color-editor-string: #ff7451;
|
||||||
|
--color-editor-inline-code-fg: var(--color-text);
|
||||||
|
--color-editor-inline-code-fg-preview: #2e3439;
|
||||||
|
--color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
|
||||||
|
--color-editor-inline-code-bg-preview: #d0e8ff;
|
||||||
|
--color-editor-selected: #add6ff;
|
||||||
|
--color-editor-link: var(--color-link);
|
||||||
|
--color-editor-url: var(--color-editor-string);
|
||||||
|
--color-editor-hr: var(--color-editor-tag);
|
||||||
|
--color-editor-hr-preview: #cccccc;
|
||||||
|
|
||||||
|
// Ads
|
||||||
|
--color-ads-background: #fae5ff;
|
||||||
|
--color-ads-link: var(--color-link);
|
||||||
|
|
||||||
|
// Scrollbar
|
||||||
|
--color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
|
||||||
|
--color-scrollbar-track-bg: transparent;
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,9 +38,13 @@ export const getSearchQueryString = (query: string, options: any = {}) => {
|
||||||
const encodedQuery = encodeURIComponent(query);
|
const encodedQuery = encodeURIComponent(query);
|
||||||
const queryParams = [
|
const queryParams = [
|
||||||
options.exact && !isSurroundedByQuotes(encodedQuery) ? `s="${encodedQuery}"` : `s=${encodedQuery}`,
|
options.exact && !isSurroundedByQuotes(encodedQuery) ? `s="${encodedQuery}"` : `s=${encodedQuery}`,
|
||||||
|
`free_only=true`,
|
||||||
`size=${options.size || DEFAULT_SEARCH_SIZE}`,
|
`size=${options.size || DEFAULT_SEARCH_SIZE}`,
|
||||||
`from=${options.from || DEFAULT_SEARCH_RESULT_FROM}`,
|
`from=${options.from || DEFAULT_SEARCH_RESULT_FROM}`,
|
||||||
|
// `mediaType=${SEARCH_OPTIONS.MEDIA_VIDEO}`,
|
||||||
|
// `claimType=${SEARCH_OPTIONS.INCLUDE_FILES}`,
|
||||||
];
|
];
|
||||||
|
|
||||||
const { isBackgroundSearch } = options;
|
const { isBackgroundSearch } = options;
|
||||||
const includeUserOptions = typeof isBackgroundSearch === 'undefined' ? false : !isBackgroundSearch;
|
const includeUserOptions = typeof isBackgroundSearch === 'undefined' ? false : !isBackgroundSearch;
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ import Button from 'component/button';
|
||||||
import { formatLbryUrlForWeb } from 'util/url';
|
import { formatLbryUrlForWeb } from 'util/url';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import { URL, SITE_NAME } from 'config';
|
import { URL, SITE_NAME } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -37,7 +37,9 @@ function FileViewerEmbeddedEnded(props: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="file-viewer__overlay">
|
<div className="file-viewer__overlay">
|
||||||
<div className="file-viewer__overlay-secondary">
|
<div className="file-viewer__overlay-secondary">
|
||||||
<Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} />
|
<Button className="file-viewer__overlay-logo--videoend" href={URL}>
|
||||||
|
<img src={OdyseeLogoWithText} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="file-viewer__overlay-title">{prompt}</div>
|
<div className="file-viewer__overlay-title">{prompt}</div>
|
||||||
<div className="file-viewer__overlay-actions">
|
<div className="file-viewer__overlay-actions">
|
||||||
|
|
|
@ -1,101 +1,34 @@
|
||||||
import * as PAGES from 'constants/pages';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
|
import I18nMessage from 'component/i18nMessage';
|
||||||
const sections = [
|
|
||||||
{
|
|
||||||
name: 'Community',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'Twitter',
|
|
||||||
link: 'https://twitter.com/lbrycom',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reddit',
|
|
||||||
link: 'https://reddit.com/r/lbry',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Chat (Discord)',
|
|
||||||
link: 'https://chat.lbry.org/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Telegram',
|
|
||||||
link: 'https://t.me/lbryofficial',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Facebook',
|
|
||||||
link: 'https://www.facebook.com/lbryio',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Resources',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'FAQ',
|
|
||||||
link: 'https://lbry.com/faq',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Support --[used in footer; general help/support]--',
|
|
||||||
link: 'https://lbry.com/faq/support',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'YouTube Partner Program',
|
|
||||||
link: 'https://lbry.com/youtube',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'lbry.com',
|
|
||||||
link: 'https://lbry.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'lbry.tech',
|
|
||||||
link: 'https://lbry.tech',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'GitHub',
|
|
||||||
link: 'https://github.com/lbryio',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Policies',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'Terms of Service',
|
|
||||||
link: 'https://www.lbry.com/termsofservice',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Privacy Policy',
|
|
||||||
link: 'https://lbry.com/privacypolicy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2257',
|
|
||||||
navigate: `/$/${PAGES.CODE_2257}`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="footer">
|
<footer className="footer">
|
||||||
<ul className="navigation__tertiary footer__links ul--no-style">
|
<span className="footer__section-title">
|
||||||
{sections.map(({ name, links }) => {
|
<I18nMessage tokens={{ lbry_link: <Button button="link" label={'LBRY'} href="https://lbry.com" /> }}>
|
||||||
return (
|
POWERED BY %lbry_link%
|
||||||
<li key={name} className="footer__section">
|
</I18nMessage>
|
||||||
<ul className="ul--no-style">
|
</span>
|
||||||
<div className="footer__section-title">{__(name)}</div>
|
<ul className="navigation__tertiary footer__links">
|
||||||
{links.map(({ label, link, navigate }) => {
|
<li className="footer__link">
|
||||||
return (
|
<Button label={__('About --[link title in Sidebar or Footer]--')} href="https://lbry.com/about" />
|
||||||
<li key={label}>
|
</li>
|
||||||
<Button className="footer__link" label={__(label)} href={link} navigate={navigate} />
|
<li className="footer__link">
|
||||||
</li>
|
<Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" />
|
||||||
);
|
</li>
|
||||||
})}
|
<li className="footer__link">
|
||||||
</ul>
|
<Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" />
|
||||||
</li>
|
</li>
|
||||||
);
|
<li className="footer__link">
|
||||||
})}
|
<Button label={__('Support --[used in footer; general help/support]--')} href="https://lbry.com/support" />
|
||||||
|
</li>
|
||||||
|
<li className="footer__link">
|
||||||
|
<Button label={__('Terms')} href="https://lbry.com/termsofservice" />
|
||||||
|
</li>
|
||||||
|
<li className="footer__link">
|
||||||
|
<Button label={__('Privacy Policy')} href="https://lbry.com/privacy" />
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default function Meme() {
|
||||||
return (
|
return (
|
||||||
<h1 className="home__meme">
|
<h1 className="home__meme">
|
||||||
<Button button="link" href="https://odysee.com/@Odysee:8?view=discussion">
|
<Button button="link" href="https://odysee.com/@Odysee:8?view=discussion">
|
||||||
{'big gulps, huh?'}
|
{`don't dead open inside`}
|
||||||
</Button>
|
</Button>
|
||||||
</h1>
|
</h1>
|
||||||
);
|
);
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
"koa-logger": "^3.2.1",
|
"koa-logger": "^3.2.1",
|
||||||
"koa-send": "^5.0.0",
|
"koa-send": "^5.0.0",
|
||||||
"koa-static": "^5.0.0",
|
"koa-static": "^5.0.0",
|
||||||
"lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264",
|
"lbry-redux": "lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da",
|
||||||
"lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
|
"lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
|
||||||
"mysql": "^2.17.1",
|
"mysql": "^2.17.1",
|
||||||
"node-fetch": "^2.6.1",
|
"node-fetch": "^2.6.1",
|
||||||
|
|
|
@ -3331,9 +3331,9 @@ latest-version@^3.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
package-json "^4.0.0"
|
package-json "^4.0.0"
|
||||||
|
|
||||||
lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264:
|
lbry-redux@lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da:
|
||||||
version "0.0.1"
|
version "0.0.1"
|
||||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/508e8d36fd91106beb7d6b4edb9f726dae0e6264"
|
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b075c103445a9355d617116fbb491496ecb473da"
|
||||||
dependencies:
|
dependencies:
|
||||||
proxy-polyfill "0.1.6"
|
proxy-polyfill "0.1.6"
|
||||||
reselect "^3.0.0"
|
reselect "^3.0.0"
|
||||||
|
|
Loading…
Reference in a new issue