From e0b0b2f976c61225a178c7715caf2656a1f6741f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 15 Dec 2018 21:32:51 +0100 Subject: moving stuff --- client/common/activeLink.component.js | 16 ++ client/common/classifier.component.js | 99 +++++++++ client/common/common.css | 347 ++++++++++++++++++++++++++++++ client/common/detectionBoxes.component.js | 15 ++ client/common/detectionList.component.js | 16 ++ client/common/footer.component.js | 10 + client/common/gate.component.js | 21 ++ client/common/header.component.js | 1 + client/common/index.js | 36 ++++ client/common/keyframe.component.js | 118 ++++++++++ client/common/keyframes.component.js | 95 ++++++++ client/common/loader.component.js | 10 + client/common/sidebar.component.js | 37 ++++ client/common/table.component.js | 121 +++++++++++ client/common/video.component.js | 47 ++++ 15 files changed, 989 insertions(+) create mode 100644 client/common/activeLink.component.js create mode 100644 client/common/classifier.component.js create mode 100644 client/common/common.css create mode 100644 client/common/detectionBoxes.component.js create mode 100644 client/common/detectionList.component.js create mode 100644 client/common/footer.component.js create mode 100644 client/common/gate.component.js create mode 100644 client/common/header.component.js create mode 100644 client/common/index.js create mode 100644 client/common/keyframe.component.js create mode 100644 client/common/keyframes.component.js create mode 100644 client/common/loader.component.js create mode 100644 client/common/sidebar.component.js create mode 100644 client/common/table.component.js create mode 100644 client/common/video.component.js (limited to 'client/common') diff --git a/client/common/activeLink.component.js b/client/common/activeLink.component.js new file mode 100644 index 00000000..59f63881 --- /dev/null +++ b/client/common/activeLink.component.js @@ -0,0 +1,16 @@ +import React from 'react' +import { NavLink } from 'react-router-dom' + +export default function ActiveLink({ + to, + className = 'navlink', + children +}) { + return ( + + + {children} + + + ) +} diff --git a/client/common/classifier.component.js b/client/common/classifier.component.js new file mode 100644 index 00000000..af6a4934 --- /dev/null +++ b/client/common/classifier.component.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import { courtesyS } from '../util' + +import { TableTuples, DetectionList, Keyframe } from '.' + +export default class Classifier extends Component { + render() { + const { + tag, + sha256, + verified, + keyframes = {}, + labels, + summary, + aspectRatio = 1.777, + showAll, + } = this.props + let totalDetections = 0 + const keys = Object + .keys(keyframes) + .map(s => parseInt(s, 10)) + const validKeyframes = keys + .sort((a, b) => a - b) + .map(frame => { + const detections = keyframes[frame] + if (detections.length || showAll) { + totalDetections += detections.length + return { frame, detections } + } + return null + }) + .filter(f => !!f) + const detectionLookup = validKeyframes + .reduce((a, b) => { + b.detections.reduce((aa, { idx }) => { + if (!(idx in aa)) aa[idx] = [labels[idx], 0] + aa[idx][1] += 1 + return aa + }, a) + return a + }, {}) + const detectionCounts = Object.keys(detectionLookup) + .map(idx => detectionLookup[idx]) + .sort((a, b) => b[1] - a[1]) + + if (summary) { + return ( +
+

{tag}{' Detections'}

+ +
+ ) + } + return ( +
+

{tag}

+

Detections

+ +

Frames

+
    +
  • + {'Displaying '}{validKeyframes.length}{' / '}{courtesyS(keys.length, 'frame')} +
    • +
  • + {courtesyS(totalDetections, 'detection')}{' found'} +
    • +
+
+ {validKeyframes.map(({ frame, detections }) => ( + + + + ))} +
+
+ ) + } +} diff --git a/client/common/common.css b/client/common/common.css new file mode 100644 index 00000000..4b939df0 --- /dev/null +++ b/client/common/common.css @@ -0,0 +1,347 @@ +/* css boilerplate */ + +* { box-sizing: border-box; } +html,body { + margin: 0; padding: 0; + width: 100%; height: 100%; +} +body { + font-family: Helvetica, sans-serif; + font-weight: 300; +} + +h1 { + +} +h2 { + font-weight: normal; + margin: 10px 0; + padding: 3px; + font-size: 24px; +} +h3 { + font-weight: normal; + margin: 10px 0 0 0; + padding: 3px; + font-size: 18px; +} +h4 { + font-weight: 300; + font-size: 12px; + letter-spacing: 2px; + color: #888; + text-transform: uppercase; + margin: 5px 10px; + margin-top: 20px; +} +h4:first-child { + margin-top: 10px; +} + +.app { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +} + +/* header stuff */ + +header { + width: 100%; + background: #11f; + color: white; + align-items: stretch; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + z-index: 3; +} +header > section { + justify-content: flex-start; + align-items: center; + display: flex; + flex: 1 0; + font-weight: bold; +} +header > section:last-of-type { + justify-content: flex-end; +} + +/* sidebar / body columns */ + +.sidebar { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + float: left; + width: 200px; + flex: 0 0 200px; + padding: 10px; + margin-right: 10px; +} +.sidebar a { + display: block; + padding: 10px 10px; + text-decoration: none; + color: #444; +} +.sidebar a.active { + font-weight: bold; + color: #222; +} +.body { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + flex-grow: 1; +} +.body > div { + padding-bottom: 40px; +} + +/* buttons / forms */ + +.btn:focus, .btn:hover { + background: #f1f1fc; + color: #4b48d6 !important; + text-decoration: none; +} +.btn { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #fff; + border: .05rem solid; + border-radius: 2px; + margin-right: 5px; + color: #11f; + cursor: pointer; + display: inline-block; + font-size: .8rem; + height: 1.8rem; + line-height: 1rem; + outline: none; + padding: .35rem .4rem; + text-align: center; + text-decoration: none; + -webkit-transition: all .2s ease; + -o-transition: all .2s ease; + transition: all .2s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} +.btn.reset, +.btn.panic { + color: #b00; +} +.btn.btn-primary { + background: #11f; + border-color: #11f; + color: white; +} +.btn[disabled] { + color: #bbb !important; + border-color: #bbb !important; + background: white !important; + cursor: default; +} +.btn.btn-primary:focus, +.btn.btn-primary:hover { + background: #0808ee; + color: white !important; +} +.row .btn { + margin: 0 5px 0 0; +} +input[type=text] { + border: 1px solid #888; + padding: 4px; + font-size: 15px; +} + + +/* tables on metadata pages */ + +table { + border: 0; + margin: 0; + padding: 0; + border-spacing: 0; +} +.tableObject td, +.tableObject th { + padding: 3px; + vertical-align: top; +} +.tableObject hr { + width: 100%; + color: transparent; + border: 0; + border-bottom: 1px solid #bbb; + align: left; + margin: 3px 0; + padding: 0; +} +.tableObject th, +.tableTuples th { + min-width: 145px; + text-align: left; + text-transform: capitalize; + padding: 3px; + padding-right: 10px; + font-weight: 300; + color: #333; +} +.tableTuples td { + text-align: right; + padding: 3px; +} +.tableObject td { + font-weight: normal; + color: #000; +} +.tableObject .tableObject { + border: 1px solid #ddd; +} +.tableArray { + border: 1px solid #ddd; + border-spacing: 0; +} +.tableArray td { + border-bottom: 1px solid #ddd; +} +.gray { + font-size: 12px; + color: #888; + display: block; +} +.sha256.heading { + margin: 20px 0 0px; +} +.gray span { + padding-right: 5px; +} +.gray { + margin-bottom: 10px; +} +.gray a { + color: #666; +} + +.verified { + color: #080; + font-weight: bold; +} +.unverified { + color: #f00; + font-weight: 300; +} + +.loading, .error { + font-weight: normal; + margin: 10px 0; + padding: 3px; + font-size: 24px; +} + +.title { + text-transform: capitalize; +} +.rect { + position: absolute; +} +.rect { border: 1px solid rgba(0,0,255); background-color: rgba(0,0,255,0.1); } + +/* videos / video preloader */ + +video { + max-width: 640px; + margin: 10px 0; +} +.video { + margin: 0 0 10px 0; +} +.video .bg { + cursor: pointer; + position: relative; + background-size: cover; +} +.video .play { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + width: 20%; + height: 20%; + background-image: url(/search/static/img/play.png); + background-position: center center; + background-size: contain; + background-repeat: no-repeat; +} +.desktop .video .play:hover { + -webkit-filter: invert(60%) sepia(100%) saturate(500%) hue-rotate(160deg); +} + +/* spectre.css loader */ + +.loaderWrapper { + display: inline-block; + position: relative; + width: .8rem; + height: .8rem; + padding: 10px; +} +.loader { + color: transparent !important; + min-height: .8rem; + pointer-events: none; + position: relative; +} + +.loader::after { + animation: loader 500ms infinite linear; + border: .1rem solid #5755d9; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: .8rem; + left: 50%; + margin-left: -.4rem; + margin-top: -.4rem; + position: absolute; + top: 50%; + width: .8rem; + z-index: 1; +} + +.loader.loader-lg { + min-height: 2rem; +} + +.loader.loader-lg::after { + height: 1.6rem; + margin-left: -.8rem; + margin-top: -.8rem; + width: 1.6rem; +} + +@keyframes loader { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/client/common/detectionBoxes.component.js b/client/common/detectionBoxes.component.js new file mode 100644 index 00000000..c4872ea8 --- /dev/null +++ b/client/common/detectionBoxes.component.js @@ -0,0 +1,15 @@ +import React from 'react' + +import { px } from '../util' + +export default function DetectionBoxes({ detections, width, height }) { + return detections.map(({ rect }, i) => ( + rect && +
+ )) +} diff --git a/client/common/detectionList.component.js b/client/common/detectionList.component.js new file mode 100644 index 00000000..416e66d8 --- /dev/null +++ b/client/common/detectionList.component.js @@ -0,0 +1,16 @@ +import React from 'react' + +export default function DetectionList({ detections, labels, tag, showEmpty }) { + return ( + + {tag &&

{tag}

} + {!detections.length && showEmpty && } + {detections.map(({ idx, score, rect }, i) => ( + + ))} + + ) +} diff --git a/client/common/footer.component.js b/client/common/footer.component.js new file mode 100644 index 00000000..7c82b44b --- /dev/null +++ b/client/common/footer.component.js @@ -0,0 +1,10 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +export default function Footer(props) { + return ( +
+
+ ); +} diff --git a/client/common/gate.component.js b/client/common/gate.component.js new file mode 100644 index 00000000..9bf9287b --- /dev/null +++ b/client/common/gate.component.js @@ -0,0 +1,21 @@ +import React from 'react' +import { connect } from 'react-redux' + +function Gate(props) { + const { app, tag, View } = props + const data = app[tag] + if (!data) return null + if (data === 'loading') { + return
{tag}{': Loading'}
+ } + if (data.err) { + return
{tag}{' Error: '}{data.err}
+ } + return +} + +const mapStateToProps = state => ({ + app: state.metadata +}) + +export default connect(mapStateToProps)(Gate) diff --git a/client/common/header.component.js b/client/common/header.component.js new file mode 100644 index 00000000..84fe306f --- /dev/null +++ b/client/common/header.component.js @@ -0,0 +1 @@ +/* imported from main vcat application */ diff --git a/client/common/index.js b/client/common/index.js new file mode 100644 index 00000000..ad9fe5e1 --- /dev/null +++ b/client/common/index.js @@ -0,0 +1,36 @@ +import Header from 'vcat-header' + +import ActiveLink from './activeLink.component' +import Classifier from './classifier.component' +import DetectionBoxes from './detectionBoxes.component' +import DetectionList from './detectionList.component' +// import Header from './header.component' +import Footer from './footer.component' +import Loader from './loader.component' +import Sidebar from './sidebar.component' +import Gate from './gate.component' +import Keyframe from './keyframe.component' +import Keyframes from './keyframes.component' +import Video from './video.component' +import { TableObject, TableArray, TableTuples, TableRow, TableCell } from './table.component' +import './common.css' + +export { + Header, + Footer, + Sidebar, + Loader, + Gate, + TableObject, + TableArray, + TableTuples, + TableRow, + TableCell, + ActiveLink, + Classifier, + DetectionList, + DetectionBoxes, + Keyframe, + Keyframes, + Video, +} diff --git a/client/common/keyframe.component.js b/client/common/keyframe.component.js new file mode 100644 index 00000000..c77db3ac --- /dev/null +++ b/client/common/keyframe.component.js @@ -0,0 +1,118 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { imageUrl, timestamp, keyframeUri, widths, verify } from '../util' +import { DetectionBoxes } from '.' + +import * as searchActions from '../search/search.actions' + +export default function Keyframe({ + verified, + sha256, + frame, + score, + isSaved, + fps = 25, + size = 'th', + className, + showHash, + showFrame, + showTimestamp, + showScore, + showSearchButton, + showSaveButton, + to, + children, + detectionList = [], + aspectRatio = 1.777, + onClick, + reviewActions, +}) { + if (!sha256) return null + const width = widths[size] + const height = Math.round(width / aspectRatio) + return ( +
+
+ + {'Frame + {detectionList.map(({ labels, detections }, i) => ( + + ))} + + {(reviewActions && (showSearchButton || showSaveButton)) && + + } +
+ {(showHash || showFrame || showTimestamp || showScore) && + + } + {children} +
+ ) +} + +const PossiblyExternalLink = props => { + if (props.onClick) { + return props.children + } + if (props.to.match(/^http/)) { + return {props.children} + } + return +} diff --git a/client/common/keyframes.component.js b/client/common/keyframes.component.js new file mode 100644 index 00000000..62eda45e --- /dev/null +++ b/client/common/keyframes.component.js @@ -0,0 +1,95 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { Keyframe } from '.' +import * as reviewActions from '../review/review.actions' +import * as searchActions from '../search/search.actions' + +function Keyframes(props) { + // console.log(props) + let { + frames, + groupByHash, + } = props + let minDistance = 0 + if (frames && frames.length) { + minDistance = frames[0].distance || 0 + } + if (!groupByHash) { + return ( + + ) + } + const frameGroups = frames.reduce((a, b) => { + if (a[b.hash]) { + a[b.hash].push(b) + } else { + a[b.hash] = [b] + } + return a + }, {}) + return Object.keys(frameGroups) + .map(hash => [frameGroups[hash].length, hash]) + .sort((a, b) => b[0] - a[0]) + .map(([count, hash]) => ( + + )) +} + +function KeyframeList(props) { + let { + saved = {}, + frames, + options, + review, + search, + minDistance, + label, + count, + ...frameProps + } = props + if (!frames) return null + return ( +
+ {label &&

{label} ({count})

} + {frames.map(({ hash, frame, verified, distance }) => ( + review.toggleSaved({ verified, hash, frame })} + reviewActions={review} + {...frameProps} + /> + ))} +
+ ) +} + +const mapStateToProps = state => ({ + saved: state.review.saved, + options: state.search.options, +}) + +const mapDispatchToProps = dispatch => ({ + review: bindActionCreators({ ...reviewActions }, dispatch), + search: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Keyframes) diff --git a/client/common/loader.component.js b/client/common/loader.component.js new file mode 100644 index 00000000..6795424b --- /dev/null +++ b/client/common/loader.component.js @@ -0,0 +1,10 @@ +import React, { Component } from 'react' + +export default function Loader() { + return ( +
+
+
+
+ ) +} \ No newline at end of file diff --git a/client/common/sidebar.component.js b/client/common/sidebar.component.js new file mode 100644 index 00000000..487f3289 --- /dev/null +++ b/client/common/sidebar.component.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' +import { NavLink } from 'react-router-dom' +import { connect } from 'react-redux' + +class Sidebar extends Component { + render() { + const { hash } = this.props + if (!hash) { + return ( +
+
+ ) + } + return ( +
+

Media

+ Summary + Media Record + Media Info + Sugarcube + +

Keyframes

+ Keyframe + +

Detectors

+ Places 365 + Coco +
+ ) + } +} + +const mapStateToProps = state => ({ + hash: state.metadata.hash, +}) + +export default connect(mapStateToProps)(Sidebar) diff --git a/client/common/table.component.js b/client/common/table.component.js new file mode 100644 index 00000000..76a1d57c --- /dev/null +++ b/client/common/table.component.js @@ -0,0 +1,121 @@ +import React from 'react' + +import { formatName } from '../util' + +const __HR__ = '__HR__' + +export function TableObject({ tag, object, order, summary }) { + if (!object) return null + if (object === 'loading') { + return
{tag}{': Loading'}
+ } + if (object.err) { + return
{tag}{' Error: '}{object.err}
+ } + let objects = Object.keys(object) + if (order) { + const grouped = objects.reduce((a, b) => { + const index = order.indexOf(b) + if (index !== -1) { + a.order.push([index, b]) + } else { + a.alpha.push(b) + } + return a + }, { order: [], alpha: [] }) + objects = grouped.order + .sort((a, b) => a[0] - b[0]) + .map(([i, s]) => s) + if (!summary) { + objects = objects + // .concat([__HR__]) + .concat(grouped.alpha.sort()) + } + } else { + objects = objects.sort() + } + return ( +
+ {tag &&

{tag}

} + + + {objects.map((key, i) => ( + + ))} + +
+
+ ) +} + +export function TableArray({ tag, list }) { + if (!list) return null + return ( +
+ {tag &&

{tag}

} + + + {list.map((value, i) => ( + + + + ))} + +
+
+ ) +} + +export function TableTuples({ tag, list }) { + if (!list) return null + return ( +
+ {tag &&

{tag}

} + + + {list.map(([key, ...values], i) => ( + + + {values.map((value, j) => ( + + ))} + + ))} + +
{formatName(key)}
+
+ ) +} + +export function TableRow({ name, value }) { + if (name === __HR__) { + return ( + + +
+ + + ) + } + return ( + + {formatName(name)} + + + ) +} + +export function TableCell({ value }) { + if (value && typeof value === 'object') { + if (value._raw) { + value = value.value + } else if (value.length) { + value = + } else { + value = + } + } + return ( + {value} + ) +} diff --git a/client/common/video.component.js b/client/common/video.component.js new file mode 100644 index 00000000..e5525bf6 --- /dev/null +++ b/client/common/video.component.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { imageUrl, widths } from '../util' + +import { Gate } from '.' + +class Video extends Component { + state = { + playing: false, + } + + render() { + const { app, data, size } = this.props + const { playing } = this.state + const { sugarcube } = data.metadata + const url = sugarcube.fp.replace('/var/www/files/', 'https://cube.syrianarchive.org/') + const { sha256, verified } = app.mediainfo + const { video } = app.mediainfo.metadata.mediainfo + const keyframe = app.keyframe.metadata.keyframe.basic[0] + return ( +
+ {playing + ?
+ ) + } +} + +const mapStateToProps = () => ({ + tag: 'sugarcube', +}) + +export default connect(mapStateToProps)(props => ( + +)) -- cgit v1.2.3-70-g09d2