Merge pull request #884 from jessopb/newstyling
styling and file support overhaul
This commit is contained in:
jessopb
GitHub
commit
d05dc03261
35 changed files with 1759 additions and 1175 deletions
7
client/scss/_asset-blocked.scss
Normal file
7
client/scss/_asset-blocked.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.asset-blocked__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.asset-blocked__text {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,29 +1,37 @@
|
|||
.asset-main {
|
||||
height: 75vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asset-document {
|
||||
$asset-info-width: 1000px;
|
||||
max-width: $asset-info-width;
|
||||
width: 100%;
|
||||
padding: $thin-padding;
|
||||
height: fit-content;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
margin: $primary-padding $secondary-padding;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
margin: $primary-padding 0;
|
||||
}
|
||||
}
|
||||
.asset-display {
|
||||
display: flex;
|
||||
min-height: 50vh
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
padding-bottom: $thin-padding;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $break-point-mobile) {
|
||||
padding-top: $secondary-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-image, .asset-video {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: 95vh;
|
||||
max-width: 95vw;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
|
@ -110,7 +118,7 @@
|
|||
$asset-info-width: 1000px;
|
||||
max-width: $asset-info-width;
|
||||
margin: $primary-padding;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
margin: $primary-padding $secondary-padding;
|
||||
|
|
@ -122,7 +130,7 @@
|
|||
}
|
||||
|
||||
.asset-footer {
|
||||
border-top: 1px solid $grey-border;
|
||||
border-top: $subtle-border;
|
||||
padding-top: $primary-padding;
|
||||
margin-top: $primary-padding;
|
||||
color: $grey;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,48 @@
|
|||
.asset-preview {
|
||||
position: relative;
|
||||
background: $card-color;
|
||||
padding: $thin-padding;
|
||||
color: $text-color;
|
||||
width: 240px;
|
||||
border: $subtle-border;
|
||||
height: 280px;
|
||||
&:hover {
|
||||
border: 1px solid $highlight-border-color;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-preview__label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 7.3em;
|
||||
}
|
||||
|
||||
.asset-preview__label-text {
|
||||
height: 4.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.asset-preview__blocked {
|
||||
box-sizing: border-box;
|
||||
background: black;
|
||||
color: white;
|
||||
height: 80%;
|
||||
padding: 5px;
|
||||
//remove margin-bottom after mystery 5px on wrapper is gone.
|
||||
margin-bottom: 5px;
|
||||
height: 64%;
|
||||
padding: $thin-padding;
|
||||
margin-bottom: $thin-padding;
|
||||
}
|
||||
|
||||
.asset-preview__image {
|
||||
width : 100%;
|
||||
width : 240px;
|
||||
height : 180px;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
padding: 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.asset-preview__video {
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h3.asset-preview__title {
|
||||
|
|
@ -30,34 +50,6 @@ h3.asset-preview__title {
|
|||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
line-height: 1em;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.asset-preview__play-wrapper {
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asset-preview__play-overlay {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
opacity: 0.80;
|
||||
height: 25%;
|
||||
top: 37.5%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
margin: 0 auto;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='2' fill='black' fill-rule='evenodd' stroke-linejoin='round'%3E %3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E %3Cg stroke='white' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='25 19 42 30 25 41'/%3E %3C/g%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.asset-preview__play-wrapper:hover .asset-preview__play-overlay {
|
||||
opacity: 0.2;
|
||||
max-height: 4em;
|
||||
font-size: $text-large;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
.channel-claims-display {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-gap: $thin-padding;
|
||||
align-content: space-around;
|
||||
@media (min-width: $break-point-x-large) {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 1040px) {
|
||||
.channel-claims-display {
|
||||
@media (min-width: $break-point-large) and (max-width: $break-point-x-large){
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: $break-point-tablet) and (max-width: $break-point-large) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1039px) {
|
||||
.channel-claims-display {
|
||||
@media (min-width: $break-point-mobile) and (max-width: $break-point-tablet) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.channel-claims-display {
|
||||
@media (max-width: $break-point-mobile) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid $grey-border;
|
||||
border: 1px solid $subtle-border-color;
|
||||
border-radius: 6px;
|
||||
.click-to-copy {
|
||||
border: none;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
line-height: 20px;
|
||||
letter-spacing: 0;
|
||||
font-family: monospace;
|
||||
border-right: 1px solid $grey-border;
|
||||
border-right: 1px solid $subtle-border-color;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -5,15 +5,18 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
border: 2px dashed #9b9b9b;
|
||||
border: 2px dashed $drop-zone-border-color;
|
||||
// fill the parent flex container
|
||||
flex: 1 0 auto;
|
||||
// be a flex container for children
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
padding: $thin-padding;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -22,7 +25,7 @@
|
|||
}
|
||||
|
||||
.dropzone:hover, .dropzone--active {
|
||||
border: 2px dashed #4156C5;
|
||||
border: 2px dashed $drop-zone-border-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
.horizontal-split {
|
||||
max-width: $width-content-constrained;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.horizontal-split--mobile-collapse {
|
||||
@media (max-width: $break-point-mobile) {
|
||||
@media (max-width: $break-point-tablet) {
|
||||
flex-direction: column;
|
||||
|
||||
.horizontal-split__column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal-split__column--left {
|
||||
padding-top: $thin-padding;
|
||||
}
|
||||
.horizontal-split__column--right {
|
||||
padding-left: 0;
|
||||
padding-top: $secondary-padding;
|
||||
padding-top: $thin-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
.horizontal-split__column {
|
||||
width: 50%;
|
||||
flex: 1 0 auto;
|
||||
display : flex;
|
||||
flex: 1 1 auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal-split__column--left {
|
||||
padding-right: $primary-padding;
|
||||
padding: $tertiary-padding;
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
padding-right: $thin-padding;
|
||||
@media (max-width: $break-point-tablet) {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-split__column--right {
|
||||
padding-left: $primary-padding;
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
padding-left: $thin-padding;
|
||||
padding: $tertiary-padding;
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
|
||||
.horizontal-split__column {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: space-between;
|
||||
};
|
||||
|
||||
|
|
|
|||
115
client/scss/_markdown.scss
Normal file
115
client/scss/_markdown.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.markdown-preview {
|
||||
// Headers
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
padding-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
white-space: pre-line;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
margin-left: 0.2rem;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Strikethrough text
|
||||
del {
|
||||
}
|
||||
|
||||
// Tables
|
||||
table {
|
||||
margin-bottom: 1.2rem;
|
||||
padding: var(--spacing-vertical-medium);
|
||||
background-color: $base-color;
|
||||
|
||||
tr {
|
||||
td,
|
||||
th,
|
||||
td:first-of-type,
|
||||
th:first-of-type,
|
||||
td:last-of-type,
|
||||
th:last-of-type {
|
||||
padding: var(--spacing-vertical-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
padding-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
// Horizontal Rule
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
background-color: $base-color;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
|
||||
html[data-theme='dark'] & {
|
||||
background-color: rgba($base-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
pre {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
padding: var(--spacing-vertical-medium);
|
||||
|
||||
background-color: $subtle-border-color;
|
||||
color: $text-color;
|
||||
display: block;
|
||||
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
|
||||
> li {
|
||||
list-style-position: outside;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: initial;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: var(--spacing-vertical-large);
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
.nav-bar {
|
||||
margin-top: $thin-padding;
|
||||
margin-left: $primary-padding;
|
||||
margin-right: $primary-padding;
|
||||
box-sizing: border-box;
|
||||
padding: $thin-padding $primary-padding;
|
||||
background: $base-color;
|
||||
flex: 0 1 auto;
|
||||
width: 100%;
|
||||
border-bottom: $subtle-border;
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
margin-left: 15px;
|
||||
|
|
|
|||
|
|
@ -2,26 +2,24 @@
|
|||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin: $secondary-padding;
|
||||
}
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background: $base-color;
|
||||
|
||||
@media (min-width: $break-point-tablet) {
|
||||
padding: $primary-padding;
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-tablet) {
|
||||
.page-layout .content { margin: $tertiary-padding; }
|
||||
}
|
||||
|
||||
@media (max-width: $break-point-mobile) {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
//below should take some styles from _text.scss and probably elsewhere and become "markdown" or "rich" styles
|
||||
.page-layout {
|
||||
p {
|
||||
margin-bottom: $tertiary-padding;
|
||||
padding: $tertiary-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
select {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
background: $base-color;
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ h1, h2, h3, h4, p {
|
|||
body {
|
||||
color: $text-color;
|
||||
font-family: 'Circular', serif;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body a {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -1,40 +1,60 @@
|
|||
$base-color: white;
|
||||
$primary-color: #005da0;
|
||||
//backgrounds
|
||||
$base-color: white; //default white
|
||||
$card-color: white; //default white
|
||||
$chrome-color: lightgray; //default white (navbar)
|
||||
$background-color: $base-color;
|
||||
|
||||
//text colors
|
||||
$primary-color: #005da0; //link default light blue #005da0
|
||||
$secondary-color: $primary-color;
|
||||
$text-color: #333;
|
||||
$success-color: green;
|
||||
$failure-color: red;
|
||||
$grey: #9095A5;
|
||||
$help-color: $grey;
|
||||
$grey-border: #DDDFE4;
|
||||
$shadow-color: rgba(169, 173, 186, 0.2);
|
||||
|
||||
|
||||
//borders and highlights
|
||||
$grey: #9095A5;
|
||||
$help-color: $grey;
|
||||
$subtle-border-color: #DDD;
|
||||
$highlight-border-color: #333;
|
||||
$shadow-color: rgba(169, 173, 186, 0.2);
|
||||
$subtle-border: 1px dashed $subtle-border-color;
|
||||
$grey-border: $subtle-border-color; //factor this out for all customers
|
||||
$drop-zone-border-color: #9b9b9b; //default #9b9b9b
|
||||
$drop-zone-border-hover: #4156C5; //default #4156C5
|
||||
|
||||
//padding
|
||||
$primary-padding: 3em;
|
||||
$secondary-padding: 2em;
|
||||
$tertiary-padding: 1em;
|
||||
$thin-padding: 0.3em;
|
||||
$full-width-thin-padding: calc(100% - 0.6em);
|
||||
$input-padding: 0.3em;
|
||||
|
||||
$width-content-constrained: 1000px;
|
||||
|
||||
$background-color: $base-color;
|
||||
$text-color: #333;
|
||||
|
||||
$button-border-width: 1px;
|
||||
$button-border-strength: solid;
|
||||
$button-full-width: calc(100% - 2px);
|
||||
|
||||
$input-padding: 0.3em;
|
||||
$input-full-width: calc(100% - 0.6em);
|
||||
|
||||
//text sizes
|
||||
$base-font-size: 14px;
|
||||
|
||||
$text-xx-large: 2.5em;
|
||||
$text-x-large: 2.0em;
|
||||
$text-large: 1.5em;
|
||||
$text-medium: 1.0em;
|
||||
$text-medium: 1.2em;
|
||||
$text-small: 0.9em;
|
||||
$text-x-small: 0.8em;
|
||||
|
||||
//@media sizes
|
||||
$break-point-xx-large: 1400px;
|
||||
$break-point-x-large: 1290px;
|
||||
$break-point-large: 1000px;
|
||||
$break-point-large: 1024px;
|
||||
$break-point-tablet: 800px;
|
||||
$break-point-mobile: 500px;
|
||||
$break-point-phone: 300px;
|
||||
$break-point-phone: 300px;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import '~scss/_body';
|
||||
@import '~scss/_react-app';
|
||||
@import '~scss/_text';
|
||||
@import '~scss/_markdown';
|
||||
|
||||
@import '~scss/_link';
|
||||
@import '~scss/_input';
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
|
||||
@import '~scss/_asset-display';
|
||||
@import '~scss/_asset-preview';
|
||||
@import '~scss/_asset-blocked';
|
||||
@import '~scss/_button';
|
||||
@import '~scss/_button-primary';
|
||||
@import '~scss/_button-secondary';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import createCanonicalLink from '../../../../utils/createCanonicalLink';
|
||||
import createCanonicalLink from '@globalutils/createCanonicalLink';
|
||||
import * as Icon from 'react-feather';
|
||||
|
||||
const AssetPreview = ({ defaultThumbnail, claimData }) => {
|
||||
const {name, fileExt, contentType, thumbnail, title, blocked} = claimData;
|
||||
const showUrl = createCanonicalLink({asset: {...claimData}});
|
||||
const embedUrl = `${showUrl}.${fileExt}`;
|
||||
|
||||
/*
|
||||
we'll be assigning media icon based on supported type / mime types
|
||||
*/
|
||||
const media = contentType.split('/')[0];
|
||||
/*
|
||||
make sure thumb has the right url
|
||||
*/
|
||||
const thumb = media === 'image' ? embedUrl : thumbnail;
|
||||
/*
|
||||
This blocked section shouldn't be necessary after pagination is reworked,
|
||||
though it might be useful for channel_mine situations.
|
||||
|
|
@ -16,45 +24,39 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
|
|||
return (
|
||||
<div className='asset-preview'>
|
||||
<div className='asset-preview__blocked'>
|
||||
<h3>Error 451</h3>
|
||||
<p>Error 451</p>
|
||||
<p>This content is blocked for legal reasons.</p>
|
||||
</div>
|
||||
<h3 className='asset-preview__title'>Blocked Content</h3>
|
||||
<div className={'asset-preview__label'}>
|
||||
<div className={'asset-preview__label-text'}>
|
||||
<p className='asset-preview__title text--medium'>Blocked Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
switch (contentType) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
return (
|
||||
<Link to={showUrl} className='asset-preview'>
|
||||
<img
|
||||
className={'asset-preview__image'}
|
||||
src={embedUrl}
|
||||
src={thumb || defaultThumbnail}
|
||||
alt={name}
|
||||
/>
|
||||
<h3 className='asset-preview__title'>{title}</h3>
|
||||
</Link>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<Link to={showUrl} className='asset-preview'>
|
||||
<div className='asset-preview__play-wrapper'>
|
||||
<img
|
||||
className={'asset-preview__video'}
|
||||
src={thumbnail || defaultThumbnail}
|
||||
alt={name}
|
||||
/>
|
||||
<div className='asset-preview__play-overlay' />
|
||||
<div className={'asset-preview__label'}>
|
||||
<div className={'asset-preview__label-text'}>
|
||||
<p className='asset-preview__title text--medium'>{title}</p>
|
||||
</div>
|
||||
<div className={'asset-preview__label-info'}>
|
||||
<div className={'text--medium'}>
|
||||
{ media === 'image' && <Icon.Image />}
|
||||
{ media === 'text' && <Icon.FileText />}
|
||||
{ media === 'video' && contentType === 'video/mp4' && <Icon.Video />}
|
||||
{ media !== 'image' && media !== 'text' && contentType !== 'video/mp4' && <Icon.File />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className='asset-preview__title'>{title}</h3>
|
||||
</Link>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
|
||||
// TODO: factor out longId OR implement tooltip display
|
||||
const ChannelInfoDisplay = ({name, longId, shortId}) => {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
52
client/src/components/FileViewer/index.jsx
Normal file
52
client/src/components/FileViewer/index.jsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
class FileViewer extends React.Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
/*
|
||||
Prevent memory leak by closing fetch before unmount
|
||||
*/
|
||||
this.abortController = new AbortController();
|
||||
this.abortSignal = this.abortController.signal;
|
||||
this.state = {
|
||||
fileLoaded: false,
|
||||
fileText : '',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const {sourceUrl} = this.props;
|
||||
const signal = this.abortSignal;
|
||||
fetch(sourceUrl, { signal })
|
||||
.then(response => response.text())
|
||||
.then((text) => {
|
||||
this.setState({fileText: text});
|
||||
this.setState({fileLoaded: true});
|
||||
return true;
|
||||
})
|
||||
.catch(e => { console.log('fetch aborted on unmount ', e) });
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.abortController.abort();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={'markdown'}>
|
||||
{
|
||||
this.state.fileLoaded &&
|
||||
<ReactMarkdown source={this.state.fileText}/>
|
||||
}
|
||||
{
|
||||
!this.state.fileLoaded &&
|
||||
<p>Loading your file...</p>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FileViewer;
|
||||
|
|
@ -5,9 +5,9 @@ import HorizontalSplit from '@components/HorizontalSplit';
|
|||
class BlockedLeft extends React.PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img className='asset-image' src={'https://upload.wikimedia.org/wikipedia/commons/archive/a/af/20120315000030%21OR_451.svg'} alt={'451 image'} />
|
||||
</React.Fragment>
|
||||
<div>
|
||||
<img className={'asset-blocked__image'} src={'/assets/img/451sign.svg'} alt={'451 image'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,10 +15,10 @@ class BlockedLeft extends React.PureComponent {
|
|||
class BlockedRight extends React.PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<p>In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content.</p>
|
||||
<div className={'asset-blocked__text'} >
|
||||
<p>In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.</p>
|
||||
<p><a href={'https://lbry.io/faq/dmca'} >Click here</a> for more information.</p>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Row from '@components/Row';
|
|||
import ProgressBar from '@components/ProgressBar';
|
||||
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states';
|
||||
import createCanonicalLink from '@globalutils/createCanonicalLink';
|
||||
import FileViewer from '@components/FileViewer';
|
||||
|
||||
class AvailableContent extends React.Component {
|
||||
render () {
|
||||
|
|
@ -12,6 +13,7 @@ class AvailableContent extends React.Component {
|
|||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
case 'image/svg+xml':
|
||||
return (
|
||||
<img
|
||||
className='asset-image'
|
||||
|
|
@ -31,9 +33,18 @@ class AvailableContent extends React.Component {
|
|||
<p>Your browser does not support the <code>video</code> element.</p>
|
||||
</video>
|
||||
);
|
||||
case 'text/markdown':
|
||||
|
||||
return (
|
||||
<div className={'asset-document'}><FileViewer sourceUrl={sourceUrl}/></div>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<p>Unsupported content type</p>
|
||||
<img
|
||||
className='asset-image'
|
||||
src={thumbnail}
|
||||
alt={name}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ import RowLabeled from '@components/RowLabeled';
|
|||
import SpaceBetween from '@components/SpaceBetween';
|
||||
import AssetShareButtons from '@components/AssetShareButtons';
|
||||
import ClickToCopy from '@components/ClickToCopy';
|
||||
import HorizontalSplit from '@components/HorizontalSplit';
|
||||
import siteConfig from '@config/siteConfig.json';
|
||||
import createCanonicalLink from '@globalutils/createCanonicalLink';
|
||||
import AssetInfoFooter from '../../components/AssetInfoFooter/index';
|
||||
import { createPermanentURI } from '@clientutils/createPermanentURI';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
const { details: { host } } = siteConfig;
|
||||
|
||||
|
|
@ -21,6 +21,8 @@ class AssetInfo extends React.Component {
|
|||
|
||||
const canonicalUrl = createCanonicalLink({ asset: { ...claimData, shortId: asset.shortId }});
|
||||
const assetCanonicalUrl = `${host}${canonicalUrl}`;
|
||||
// Todo Issue #882 centralize all this media type detection
|
||||
const embedable = contentType.split('/')[0] === 'image' || contentType === 'video/mp4';
|
||||
|
||||
let channelCanonicalUrl;
|
||||
if (channelName) {
|
||||
|
|
@ -32,21 +34,20 @@ class AssetInfo extends React.Component {
|
|||
}
|
||||
return (
|
||||
<div className='asset-info'>
|
||||
<HorizontalSplit
|
||||
leftSide={
|
||||
description && (
|
||||
<p className='asset-info__description'>{description}</p>
|
||||
)
|
||||
}
|
||||
rightSide={
|
||||
<div>
|
||||
{ description && (
|
||||
<RowLabeled
|
||||
label={<Label value={'Description'} />}
|
||||
content={<div className='asset-info__description'><ReactMarkdown source={description}/></div>}
|
||||
/>
|
||||
)}
|
||||
{editable && (
|
||||
<RowLabeled
|
||||
label={<Label value={'Edit:'} />}
|
||||
label={<Label value={'Edit'} />}
|
||||
content={<Link to={`/edit${canonicalUrl}`}>{name}</Link>}
|
||||
/>
|
||||
)}
|
||||
{channelName && (
|
||||
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel'} />
|
||||
|
|
@ -94,7 +95,7 @@ class AssetInfo extends React.Component {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
{embedable && (
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed'} />
|
||||
|
|
@ -115,7 +116,7 @@ class AssetInfo extends React.Component {
|
|||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
)}
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'LBRY URI'} />
|
||||
|
|
@ -157,8 +158,6 @@ class AssetInfo extends React.Component {
|
|||
Report
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</div>
|
||||
} />
|
||||
<AssetInfoFooter />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
const AssetTitle = ({ title }) => {
|
||||
return (
|
||||
<h1 className='asset-title'>{title}</h1>
|
||||
<h2 className='asset-title'>{title}</h2>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ class FaqPage extends React.Component {
|
|||
pageTitle={'Frequently Asked Questions'}
|
||||
pageUri={'tos'}
|
||||
>
|
||||
<Row>
|
||||
<Row>
|
||||
<h1>Frequently Asked Questions</h1>
|
||||
</Row>
|
||||
|
|
@ -39,6 +40,7 @@ class FaqPage extends React.Component {
|
|||
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!</p>
|
||||
<p>If you want to improve spee.ch, join <a href='https://chat.lbry.io/'>our discord channel</a> or solve one of our <a href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.</p>
|
||||
</Row>
|
||||
</Row>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,13 +38,16 @@ class ShowAssetDetails extends React.Component {
|
|||
asset={asset}
|
||||
>
|
||||
<div className="asset-main">
|
||||
<AssetDisplay />
|
||||
<AssetTitle />
|
||||
<AssetDisplay />
|
||||
<div>
|
||||
<button className='collapse-button' onClick={this.collapse}>
|
||||
{this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!this.state.closed && <AssetInfo />}
|
||||
|
||||
</PageLayout>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ class TosPage extends React.Component {
|
|||
pageTitle={'Terms of Service'}
|
||||
pageUri={'tos'}
|
||||
>
|
||||
<Row>
|
||||
<Row>
|
||||
<h1>Terms of Service</h1>
|
||||
<p>Last updated: September 25, 2018</p>
|
||||
|
|
@ -59,6 +60,7 @@ class TosPage extends React.Component {
|
|||
<h3>Contact Us</h3>
|
||||
<p>If you have any questions about these Terms, please <a className='link--primary' href='mailto:hello@lbry.io'>contact us</a>.</p>
|
||||
</Row>
|
||||
</Row>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,18 +11,23 @@ const {
|
|||
const VIDEO = 'VIDEO';
|
||||
const IMAGE = 'IMAGE';
|
||||
const GIF = 'GIF';
|
||||
const TEXT = 'TEXT';
|
||||
|
||||
const determineMediaType = contentType => {
|
||||
switch (contentType) {
|
||||
case 'image/jpg':
|
||||
case 'image/jpeg':
|
||||
case 'image/png':
|
||||
case 'image/svg+xml':
|
||||
return IMAGE;
|
||||
case 'image/gif':
|
||||
return GIF;
|
||||
case 'video/mp4':
|
||||
case 'video/webm':
|
||||
return VIDEO;
|
||||
case 'text/markdown':
|
||||
case 'text/plain':
|
||||
return TEXT;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const determineContentTypeFromExtension = (thumbnail) => {
|
||||
const determineContentTypeFromExtension = thumbnail => {
|
||||
if (thumbnail) {
|
||||
const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
|
||||
switch (fileExt) {
|
||||
|
|
@ -11,6 +11,11 @@ const determineContentTypeFromExtension = (thumbnail) => {
|
|||
return 'image/gif';
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
case 'svg':
|
||||
return 'image/svg+xml';
|
||||
case 'md':
|
||||
case 'markdown':
|
||||
return 'text/markdown';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export function validateFile(file) {
|
|||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/svg+xml':
|
||||
if (file.size > maxSizeImage) {
|
||||
throw new Error(`Sorry, images are limited to ${maxSizeImage / SIZE_MB} megabytes.`);
|
||||
}
|
||||
|
|
|
|||
1124
package-lock.json
generated
1124
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -63,6 +63,7 @@
|
|||
"react-feather": "^1.1.4",
|
||||
"react-ga": "^2.5.3",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-markdown": "^4.0.6",
|
||||
"react-redux": "^5.1.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-select": "^2.1.1",
|
||||
|
|
|
|||
24
public/assets/img/451sign.svg
Normal file
24
public/assets/img/451sign.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.0"
|
||||
width="750"
|
||||
height="600"
|
||||
id="svg2450">
|
||||
<defs
|
||||
id="defs2453" />
|
||||
<path
|
||||
d="M 49.593496,600 C 12.021823,606.01223 0.374478,584.2484 0,550.4065 L 0,50 C 0.26436,7.306444 22.977953,0.531662 49.593496,0 L 700,0 C 737.99534,1.025643 751.96677,19.66882 750,50 L 750,550.4065 C 750.61508,591.42014 731.34035,604.25656 700,600 L 49.593496,600 z"
|
||||
id="path2477"
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
d="M 376,580 C 120.0594,566.76664 10.515234,350.74039 13,201 C 25.291003,120.21718 21.978524,25.547435 376,19 C 654.93316,28.316194 722.07201,66.834005 735,201 C 734.63343,336.58827 649.04448,559.11396 376,580 z"
|
||||
id="path2475"
|
||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
d="M 266.04757,331.75287 L 266.04757,401.89337 L 224.48919,401.89337 L 224.48919,331.75287 L 104.10864,331.75287 L 104.10864,302.29861 L 224.48919,111.77756 L 266.04757,111.77756 L 266.04757,292.77124 L 283.37127,292.77124 L 283.37127,331.75287 L 266.04757,331.75287 z M 224.48919,184.09839 L 155.20761,292.77124 L 224.48919,292.77124 L 224.48919,184.09839 z M 489.08856,300.14471 C 489.08838,315.43793 486.77811,329.57922 482.15776,342.56862 C 477.53705,355.55814 471.18548,366.81655 463.10301,376.34389 C 455.02023,385.87128 445.49507,393.37689 434.52749,398.86073 C 423.55966,404.34459 411.57888,407.08651 398.58511,407.08652 C 385.59997,407.08651 373.11705,404.9216 361.13632,400.59178 C 349.15548,396.26196 337.8266,389.91259 327.14962,381.54364 L 354.42355,352.1026 C 361.6384,357.00948 368.27849,360.61693 374.34382,362.92496 C 380.40903,365.23306 387.04911,366.38709 394.26409,366.38705 C 402.05152,366.38709 409.26642,364.72652 415.90881,361.40533 C 422.55099,358.08423 428.25287,353.39323 433.01448,347.33231 C 437.77583,341.27149 441.52864,334.0566 444.2729,325.68759 C 447.01689,317.31874 448.38896,308.08208 448.38909,297.9776 C 448.38896,282.09436 444.7793,269.67971 437.56013,260.73363 C 430.3407,251.78782 420.67018,247.31485 408.54855,247.3147 C 395.8453,247.31485 384.30058,252.07633 373.91436,261.59915 L 334.07382,256.40601 L 341.43408,111.77756 L 477.83013,111.77756 L 477.83013,152.49023 L 379.96643,152.49023 L 376.94039,213.53943 C 384.15522,210.94084 390.00026,209.28027 394.47552,208.55771 C 398.95061,207.83553 403.93232,207.47435 409.42068,207.47415 C 421.2516,207.47435 432.07395,209.71193 441.88775,214.18692 C 451.70129,218.66228 460.07242,225.01386 467.00117,233.24167 C 473.9296,241.46982 479.34298,251.21301 483.24131,262.47128 C 487.1393,273.72983 489.08838,286.28763 489.08856,300.14471 L 489.08856,300.14471 z M 557.52004,401.89337 L 557.52004,163.74866 L 539.33743,163.74866 L 539.33743,132.1405 C 547.70633,131.55935 554.41689,129.5376 559.46913,126.07523 C 564.52127,122.61341 568.63306,117.84752 571.8045,111.77756 L 599.5277,111.77756 L 599.5277,401.89337 L 557.52004,401.89337 z"
|
||||
id="text3960"
|
||||
style="font-size:433px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Arial;-inkscape-font-specification:Arial" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -2,7 +2,7 @@ const logger = require('winston');
|
|||
|
||||
const {
|
||||
assetDefaults: { thumbnail: defaultThumbnail },
|
||||
details: { host }
|
||||
details: { host },
|
||||
} = require('@config/siteConfig');
|
||||
|
||||
const getterMethods = {
|
||||
|
|
@ -15,8 +15,12 @@ const getterMethods = {
|
|||
return 'png';
|
||||
case 'image/gif':
|
||||
return 'gif';
|
||||
case 'image/svg+xml':
|
||||
return 'svg';
|
||||
case 'video/mp4':
|
||||
return 'mp4';
|
||||
case 'text/markdown':
|
||||
return 'md';
|
||||
default:
|
||||
logger.debug('setting unknown file type as file extension jpg');
|
||||
return 'jpg';
|
||||
|
|
@ -31,18 +35,11 @@ const getterMethods = {
|
|||
generated_channel() {
|
||||
console.log(this);
|
||||
//
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default (sequelize, {
|
||||
BOOLEAN,
|
||||
DATE,
|
||||
DECIMAL,
|
||||
ENUM,
|
||||
INTEGER,
|
||||
STRING,
|
||||
TEXT,
|
||||
}) => sequelize.define(
|
||||
export default (sequelize, { BOOLEAN, DATE, DECIMAL, ENUM, INTEGER, STRING, TEXT }) =>
|
||||
sequelize.define(
|
||||
'claim',
|
||||
{
|
||||
id: {
|
||||
|
|
|
|||
|
|
@ -18,27 +18,28 @@ const returnShortId = (claimsArray, longId) => {
|
|||
shortIdLength += 1;
|
||||
shortId = longId.substring(0, shortIdLength);
|
||||
possibleMatches = possibleMatches.filter(element => {
|
||||
return (element.claim_id && (element.claim_id.substring(0, shortIdLength) === shortId));
|
||||
return element.claim_id && element.claim_id.substring(0, shortIdLength) === shortId;
|
||||
});
|
||||
}
|
||||
return shortId;
|
||||
};
|
||||
|
||||
const isLongClaimId = (claimId) => {
|
||||
return (claimId && (claimId.length === 40));
|
||||
}
|
||||
const isLongClaimId = claimId => {
|
||||
return claimId && claimId.length === 40;
|
||||
};
|
||||
|
||||
const isShortClaimId = (claimId) => {
|
||||
return (claimId && (claimId.length < 40));
|
||||
}
|
||||
const isShortClaimId = claimId => {
|
||||
return claimId && claimId.length < 40;
|
||||
};
|
||||
|
||||
export default (db, table, sequelize) => ({
|
||||
|
||||
getClaimChannelName: async (publisher_id) => {
|
||||
return await table.findAll({
|
||||
getClaimChannelName: async publisher_id => {
|
||||
return await table
|
||||
.findAll({
|
||||
where: { claim_id: publisher_id },
|
||||
attributes: ['name'],
|
||||
}).then(result => {
|
||||
})
|
||||
.then(result => {
|
||||
if (result.length === 0) {
|
||||
throw new Error(`no record found for ${claimId}`);
|
||||
} else if (result.length !== 1) {
|
||||
|
|
@ -51,10 +52,12 @@ export default (db, table, sequelize) => ({
|
|||
|
||||
getShortClaimIdFromLongClaimId: async (claimId, claimName, pendingClaim) => {
|
||||
logger.debug(`claim.getShortClaimIdFromLongClaimId for ${claimName}#${claimId}`);
|
||||
return await table.findAll({
|
||||
return await table
|
||||
.findAll({
|
||||
where: { name: claimName },
|
||||
order: [['height', 'ASC']],
|
||||
}).then(result => {
|
||||
})
|
||||
.then(result => {
|
||||
if (result.length === 0) {
|
||||
throw new Error('No claim(s) found with that claim name');
|
||||
}
|
||||
|
|
@ -68,39 +71,21 @@ export default (db, table, sequelize) => ({
|
|||
});
|
||||
},
|
||||
|
||||
getAllChannelClaims: async (channelClaimId, params) => {
|
||||
getAllChannelClaims: async (channelClaimId, bidState) => {
|
||||
logger.debug(`claim.getAllChannelClaims for ${channelClaimId}`);
|
||||
|
||||
const defaultWhereClauses = {
|
||||
bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] }
|
||||
const whereClause = bidState || {
|
||||
[sequelize.Op.or]: [
|
||||
{ bid_state: 'Controlling' },
|
||||
{ bid_state: 'Active' },
|
||||
{ bid_state: 'Accepted' },
|
||||
],
|
||||
};
|
||||
|
||||
const addWhereClauses = (whereClauses, params) => {
|
||||
/*
|
||||
input params = { col: ['Val', 'Val']}
|
||||
output = { col: { Op.or : [ { Op.eq: 'Value'},...]}, col2:...}
|
||||
*/
|
||||
const cols = Object.keys(params)
|
||||
for (let colKey in cols){
|
||||
let col = Object.keys(params)[colKey]
|
||||
|
||||
whereClauses[col] = {}
|
||||
whereClauses[col][sequelize.Op.or] = []
|
||||
for (let itemKey in params[col] ){
|
||||
let itemsArr = params[col]
|
||||
whereClauses[col][sequelize.Op.or].push({ [sequelize.Op.eq]: itemsArr[itemKey] })
|
||||
}
|
||||
}
|
||||
return whereClauses;
|
||||
}
|
||||
|
||||
const whereClause = addWhereClauses(defaultWhereClauses, params);
|
||||
|
||||
const selectWhere = {
|
||||
...whereClause,
|
||||
publisher_id: channelClaimId,
|
||||
};
|
||||
return await table.findAll({
|
||||
return await table
|
||||
.findAll({
|
||||
where: selectWhere,
|
||||
order: [['height', 'DESC'], ['claim_id', 'ASC']],
|
||||
})
|
||||
|
|
@ -114,8 +99,13 @@ export default (db, table, sequelize) => ({
|
|||
|
||||
getClaimIdByLongChannelId: async (channelClaimId, claimName) => {
|
||||
logger.debug(`finding claim id for claim ${claimName} from channel ${channelClaimId}`);
|
||||
return await table.findAll({
|
||||
where: { name: claimName, publisher_id: channelClaimId, bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } },
|
||||
return await table
|
||||
.findAll({
|
||||
where: {
|
||||
name: claimName,
|
||||
publisher_id: channelClaimId,
|
||||
bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] },
|
||||
},
|
||||
order: [['id', 'ASC']],
|
||||
})
|
||||
.then(result => {
|
||||
|
|
@ -126,19 +116,23 @@ export default (db, table, sequelize) => ({
|
|||
return result[0].claim_id;
|
||||
default:
|
||||
// Does this actually happen??? (from converted code)
|
||||
logger.warn(`${result.length} records found for "${claimName}" in channel "${channelClaimId}"`);
|
||||
logger.warn(
|
||||
`${result.length} records found for "${claimName}" in channel "${channelClaimId}"`
|
||||
);
|
||||
return result[0].claim_id;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
validateLongClaimId: async (name, claimId) => {
|
||||
return await table.findOne({
|
||||
return await table
|
||||
.findOne({
|
||||
where: {
|
||||
name,
|
||||
claim_id: claimId,
|
||||
},
|
||||
}).then(result => {
|
||||
})
|
||||
.then(result => {
|
||||
if (!result) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -147,12 +141,14 @@ export default (db, table, sequelize) => ({
|
|||
},
|
||||
|
||||
getLongClaimIdFromShortClaimId: async (name, shortId) => {
|
||||
return await table.findAll({
|
||||
return await table
|
||||
.findAll({
|
||||
where: {
|
||||
name,
|
||||
claim_id: {
|
||||
[sequelize.Op.like]: `${shortId}%`,
|
||||
}},
|
||||
},
|
||||
},
|
||||
order: [['height', 'ASC']],
|
||||
})
|
||||
.then(result => {
|
||||
|
|
@ -164,17 +160,19 @@ export default (db, table, sequelize) => ({
|
|||
});
|
||||
},
|
||||
|
||||
getTopFreeClaimIdByClaimName: async (name) => {
|
||||
return await table.findAll({
|
||||
getTopFreeClaimIdByClaimName: async name => {
|
||||
return await table
|
||||
.findAll({
|
||||
// TODO: Limit 1
|
||||
where: { name, bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } },
|
||||
order: [['effective_amount', 'DESC'], ['height', 'ASC']],
|
||||
}).then(result => {
|
||||
})
|
||||
.then(result => {
|
||||
if (result.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return result[0].claim_id;
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
getLongClaimId: async (claimName, claimId) => {
|
||||
|
|
@ -191,9 +189,11 @@ export default (db, table, sequelize) => ({
|
|||
|
||||
resolveClaim: async (name, claimId) => {
|
||||
logger.debug(`Claim.resolveClaim: ${name} ${claimId}`);
|
||||
return table.findAll({
|
||||
return table
|
||||
.findAll({
|
||||
where: { name, claim_id: claimId },
|
||||
}).then(claimArray => {
|
||||
})
|
||||
.then(claimArray => {
|
||||
if (claimArray.length === 0) {
|
||||
return null;
|
||||
} else if (claimArray.length !== 1) {
|
||||
|
|
@ -206,12 +206,14 @@ export default (db, table, sequelize) => ({
|
|||
|
||||
resolveClaimInChannel: async (claimName, channelId) => {
|
||||
logger.debug(`Claim.resolveClaimByNames: ${claimName} in ${channelId}`);
|
||||
return table.findAll({
|
||||
return table
|
||||
.findAll({
|
||||
where: {
|
||||
name: claimName,
|
||||
publisher_id: channelId,
|
||||
},
|
||||
}).then(claimArray => {
|
||||
})
|
||||
.then(claimArray => {
|
||||
if (claimArray.length === 0) {
|
||||
return null;
|
||||
} else if (claimArray.length !== 1) {
|
||||
|
|
@ -225,10 +227,12 @@ export default (db, table, sequelize) => ({
|
|||
getOutpoint: async (name, claimId) => {
|
||||
logger.debug(`finding outpoint for ${name}#${claimId}`);
|
||||
|
||||
return await table.findAll({
|
||||
return await table
|
||||
.findAll({
|
||||
where: { name, claim_id: claimId },
|
||||
attributes: ['transaction_hash_id'],
|
||||
}).then(result => {
|
||||
})
|
||||
.then(result => {
|
||||
if (result.length === 0) {
|
||||
throw new Error(`no record found for ${name}#${claimId}`);
|
||||
} else if (result.length !== 1) {
|
||||
|
|
@ -240,11 +244,8 @@ export default (db, table, sequelize) => ({
|
|||
},
|
||||
|
||||
getCurrentHeight: async () => {
|
||||
return await table
|
||||
.max('height')
|
||||
.then(result => {
|
||||
return (result || 100000);
|
||||
return await table.max('height').then(result => {
|
||||
return result || 100000;
|
||||
});
|
||||
},
|
||||
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
const db = require('../../../../models');
|
||||
const chainquery = require('chainquery').default;
|
||||
const getClaimData = require('server/utils/getClaimData');
|
||||
const { returnPaginatedChannelClaims } = require('./channelPagination.js');
|
||||
|
||||
const getChannelClaims = async (channelName, channelLongId, page) => {
|
||||
const params = {
|
||||
content_type: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'video/mp4'],
|
||||
};
|
||||
|
||||
let channelShortId = await chainquery.claim.queries.getShortClaimIdFromLongClaimId(
|
||||
channelLongId,
|
||||
channelName
|
||||
);
|
||||
let channelClaims;
|
||||
if (channelLongId) {
|
||||
channelClaims = await chainquery.claim.queries.getAllChannelClaims(channelLongId, params);
|
||||
channelClaims = await chainquery.claim.queries.getAllChannelClaims(channelLongId);
|
||||
}
|
||||
/*
|
||||
Put mempool unconfirmed claims at the beginning
|
||||
|
|
|
|||
|
|
@ -1,21 +1,18 @@
|
|||
const logger = require('winston');
|
||||
|
||||
const {
|
||||
publishing: {
|
||||
maxSizeImage = 10000000,
|
||||
maxSizeGif = 50000000,
|
||||
maxSizeVideo = 50000000,
|
||||
}
|
||||
publishing: { maxSizeImage = 10000000, maxSizeGif = 50000000, maxSizeVideo = 50000000 },
|
||||
} = require('@config/siteConfig');
|
||||
|
||||
const SIZE_MB = 1000000;
|
||||
|
||||
const validateFileTypeAndSize = (file) => {
|
||||
const validateFileTypeAndSize = file => {
|
||||
// check file type and size
|
||||
switch (file.type) {
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
case 'image/svg+xml':
|
||||
if (file.size > maxSizeImage) {
|
||||
logger.debug('publish > file validation > .jpeg/.jpg/.png was too big');
|
||||
throw new Error(`Sorry, images are limited to ${maxSizeImage / SIZE_MB} megabytes.`);
|
||||
|
|
@ -35,7 +32,11 @@ const validateFileTypeAndSize = (file) => {
|
|||
break;
|
||||
default:
|
||||
logger.debug('publish > file validation > unrecognized file type');
|
||||
throw new Error('The ' + file.type + ' content type is not supported. Only, image/jpg, image/png, image/gif, and video/mp4 content types are currently supported.');
|
||||
throw new Error(
|
||||
'The ' +
|
||||
file.type +
|
||||
' content type is not supported. Only, image/jpg, image/png, image/gif, and video/mp4 content types are currently supported.'
|
||||
);
|
||||
}
|
||||
return file;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
const logger = require('winston');
|
||||
const returnShortId = require('./utils/returnShortId.js');
|
||||
const isApprovedChannel = require('../../utils/isApprovedChannel');
|
||||
const { assetDefaults: { thumbnail: defaultThumbnail }, details: { host } } = require('@config/siteConfig');
|
||||
const { publishing: { serveOnlyApproved, approvedChannels } } = require('@config/siteConfig');
|
||||
const {
|
||||
assetDefaults: { thumbnail: defaultThumbnail },
|
||||
details: { host },
|
||||
} = require('@config/siteConfig');
|
||||
const {
|
||||
publishing: { serveOnlyApproved, approvedChannels },
|
||||
} = require('@config/siteConfig');
|
||||
|
||||
const NO_CLAIM = 'NO_CLAIM';
|
||||
|
||||
|
|
@ -17,6 +22,8 @@ function determineFileExtensionFromContentType (contentType) {
|
|||
return 'gif';
|
||||
case 'video/mp4':
|
||||
return 'mp4';
|
||||
case 'image/svg+xml':
|
||||
return 'svg';
|
||||
default:
|
||||
logger.debug('setting unknown file type as file extension jpg');
|
||||
return 'jpg';
|
||||
|
|
@ -39,11 +46,11 @@ function prepareClaimData (claim) {
|
|||
}
|
||||
|
||||
function isLongClaimId(claimId) {
|
||||
return (claimId && (claimId.length === 40));
|
||||
return claimId && claimId.length === 40;
|
||||
}
|
||||
|
||||
function isShortClaimId(claimId) {
|
||||
return (claimId && (claimId.length < 40));
|
||||
return claimId && claimId.length < 40;
|
||||
}
|
||||
|
||||
module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
||||
|
|
@ -204,8 +211,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
Claim.getShortClaimIdFromLongClaimId = function(claimId, claimName) {
|
||||
logger.debug(`Claim.getShortClaimIdFromLongClaimId for ${claimName}#${claimId}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: { name: claimName },
|
||||
order: [['height', 'ASC']],
|
||||
})
|
||||
|
|
@ -226,8 +232,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
Claim.getAllChannelClaims = function(channelClaimId) {
|
||||
logger.debug(`Claim.getAllChannelClaims for ${channelClaimId}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: { certificateId: channelClaimId },
|
||||
order: [['height', 'DESC']],
|
||||
raw: true, // returns an array of only data, not an array of instances
|
||||
|
|
@ -254,8 +259,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
Claim.getClaimIdByLongChannelId = function(channelClaimId, claimName) {
|
||||
logger.debug(`finding claim id for claim ${claimName} from channel ${channelClaimId}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: { name: claimName, certificateId: channelClaimId },
|
||||
order: [['id', 'ASC']],
|
||||
})
|
||||
|
|
@ -266,7 +270,9 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
case 1:
|
||||
return resolve(result[0].claimId);
|
||||
default:
|
||||
logger.warn(`${result.length} records found for "${claimName}" in channel "${channelClaimId}"`);
|
||||
logger.warn(
|
||||
`${result.length} records found for "${claimName}" in channel "${channelClaimId}"`
|
||||
);
|
||||
return resolve(result[0].claimId);
|
||||
}
|
||||
})
|
||||
|
|
@ -299,13 +305,13 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
|
||||
Claim.getLongClaimIdFromShortClaimId = function(name, shortId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: {
|
||||
name,
|
||||
claimId: {
|
||||
[sequelize.Op.like]: `${shortId}%`,
|
||||
}},
|
||||
},
|
||||
},
|
||||
order: [['height', 'ASC']],
|
||||
})
|
||||
.then(result => {
|
||||
|
|
@ -325,8 +331,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
|
||||
Claim.getTopFreeClaimIdByClaimName = function(name) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: { name },
|
||||
order: [['effectiveAmount', 'DESC'], ['height', 'ASC']],
|
||||
})
|
||||
|
|
@ -359,8 +364,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
Claim.fetchClaim = function(name, claimId) {
|
||||
logger.debug(`Claim.resolveClaim: ${name} ${claimId}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.findAll({
|
||||
this.findAll({
|
||||
where: { name, claimId },
|
||||
})
|
||||
.then(claimArray => {
|
||||
|
|
@ -382,11 +386,13 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
|
||||
Claim.resolveClaim = function(name, claimId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this
|
||||
.fetchClaim(name, claimId)
|
||||
this.fetchClaim(name, claimId)
|
||||
.then(claim => {
|
||||
logger.info('resolveClaim claims:', claim);
|
||||
if (serveOnlyApproved && !isApprovedChannel({ longId: claim.certificateId }, approvedChannels)) {
|
||||
if (
|
||||
serveOnlyApproved &&
|
||||
!isApprovedChannel({ longId: claim.certificateId }, approvedChannels)
|
||||
) {
|
||||
throw new Error('This content is unavailable');
|
||||
}
|
||||
return resolve(claim);
|
||||
|
|
@ -399,8 +405,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
|
||||
Claim.getOutpoint = function(name, claimId) {
|
||||
logger.debug(`finding outpoint for ${name}#${claimId}`);
|
||||
return this
|
||||
.findAll({
|
||||
return this.findAll({
|
||||
where: { name, claimId },
|
||||
attributes: ['outpoint'],
|
||||
})
|
||||
|
|
@ -423,8 +428,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
|
|||
|
||||
Claim.getCurrentHeight = function() {
|
||||
return new Promise((resolve, reject) => {
|
||||
return this
|
||||
.max('height')
|
||||
return this.max('height')
|
||||
.then(result => {
|
||||
if (result) {
|
||||
return resolve(result);
|
||||
|
|
|
|||
Loading…
Reference in a new issue