diff options
18 files changed, 390 insertions, 234 deletions
diff --git a/cli/commands/site/populate.py b/cli/commands/site/populate.py index 4b5bb73..03914b2 100644 --- a/cli/commands/site/populate.py +++ b/cli/commands/site/populate.py @@ -1,13 +1,12 @@ import click -# lines = """/static/media/last-museum/zohra-opoku/.mp4 -# /static/media/last-museum/zohra-opoku/MVI_4388.mp4 -# /static/media/last-museum/zohra-opoku/MVI_4390.mp4 -# /static/media/last-museum/zohra-opoku/.mp4""".split("\n") - -lines = [ -"/static/media/last-museum/zohra-opoku/MVI_4367.mp4", -] +lines = """/static/media/last-museum/juliana-cerqueira-leite/01_JCL_AndyCbs_v1.mp4 +/static/media/last-museum/juliana-cerqueira-leite/02_JCL_Containers_v1.mp4 +/static/media/last-museum/juliana-cerqueira-leite/04_JCL_Repshp_v1.mp4 +/static/media/last-museum/juliana-cerqueira-leite/07_JCL_GmShp_v1.mp4 +/static/media/last-museum/juliana-cerqueira-leite/10_JCL_StreetPrtSftwr_v1.mp4 +/static/media/last-museum/juliana-cerqueira-leite/11_JCL_Oscilloscopes_v1.mp4 +""".split("\n") letters = ['a','b','c','d','e','f','g','h','i','j'] @@ -23,19 +22,19 @@ def cli(ctx): return None if resp.status_code != 200 else resp.json() graph_id = 3 - name = "Zohra Opoku. Chapter 9: To Me Belongs Yesterday" + name = "Juliana Cerqueira Leite. Stalfigenia, Chapter " index = 0 for url in lines: - slug = url.split("/")[5].replace(".mp4", "").lower() - slug = "opoku-" + "9-to-me-belongs-yesterday" # + letters[index] + # slug = url.split("/")[5].replace(".mp4", "").lower() + slug = "leite-" + letters[index] print(slug) index += 1 page_data = { "graph_id": graph_id, "path": slug, - "title": name, + "title": name + str(index), "username": "jules", "description":"", "settings": { diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js index 6e5a909..d67d89a 100644 --- a/frontend/app/utils/index.js +++ b/frontend/app/utils/index.js @@ -63,6 +63,16 @@ export const timestamp = (n = 0, fps = 25) => { } return (n % 60) + ':' + s } +export const timestampToSeconds = time_str => { + const time_str_parts = (time_str || "").trim().split(":").map(s => parseFloat(s)) + if (time_str_parts.length === 3) { + return (time_str_parts[0] * 60 + time_str_parts[1]) * 60 + time_str_parts[2] + } + if (time_str_parts.length === 2) { + return time_str_parts[0] * 60 + time_str_parts[1] + } + return time_str_parts[0] +} export const percent = n => (n * 100).toFixed(1) + '%' diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js index 7f6182d..2f14ffb 100644 --- a/frontend/app/views/page/components/page.editor.js +++ b/frontend/app/views/page/components/page.editor.js @@ -5,13 +5,13 @@ import { connect } from 'react-redux' import { session } from 'app/session' import actions from 'app/actions' -import * as pageActions from '../page.actions' -import * as tileActions from '../../tile/tile.actions' +import * as pageActions from 'app/views/page/page.actions' +import * as tileActions from 'app/views/tile/tile.actions' import { Loader } from 'app/common' import { clamp, dist } from 'app/utils' -import TileHandle from './tile.handle' +import TileHandle from 'app/views/tile/components/tile.handle' const defaultState = { dragging: false, diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js deleted file mode 100644 index d8184d3..0000000 --- a/frontend/app/views/page/components/tile.handle.js +++ /dev/null @@ -1,209 +0,0 @@ -import React, { Component } from 'react' - -export default class TileHandle extends Component { - constructor(props) { - super(props) - this.videoRef = React.createRef() - this.handleEnded = this.handleEnded.bind(this) - } - componentDidMount() { - if (this.props.tile.type === 'video') { - this.videoRef.current.addEventListener('ended', this.handleEnded) - } - } - componentWillUnmount() { - if (this.props.tile.type === 'video') { - this.videoRef.current.removeEventListener('ended', this.handleEnded) - } - } - handleEnded() { - this.props.onPlaybackEnded(this.props.tile) - } - render() { - let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props - // console.log(tile) - const { width, height } = tile.settings - const style = { - transform: generateTransform(tile, box), - opacity: tile.settings.opacity, - } - // console.log(generateTransform(tile)) - let content; - let className = ['tile', tile.type].join(' ') - if (tile.target_page_id || (viewing && tile.href)) { - className += ' ' + (tile.settings.cursor || 'hand_up') - } - // console.log(tile.settings) - switch (tile.type) { - case 'image': - if (!tile.settings.url) { - return null - } - if (tile.settings.is_tiled) { - style.backgroundImage = 'url(' + tile.settings.url + ')' - style.backgroundPosition = tile.settings.align.replace('_', ' ') - switch (tile.settings.tile_style) { - default: - case 'tile': - break - case 'cover': - style.backgroundSize = 'cover' - break - case 'contain': - style.backgroundSize = 'contain' - break - case 'contain no-repeat': - style.backgroundSize = 'contain' - style.backgroundRepeat = 'no-repeat' - break - } - className += ' is_tiled' - } else { - className += ' ' + tile.settings.align - content = <img src={tile.settings.url} /> - } - break - - case 'video': - if (!tile.settings.url) { - return null - } - className += ' ' + tile.settings.align - content = ( - <video - ref={this.videoRef} - src={tile.settings.url} - autoPlay={true} - controls={false} - loop={tile.settings.loop} - muted={tile.settings.muted} - style={generateVideoStyle(tile, bounds)} - /> - ) - break - - case 'text': - if (!tile.settings.content) { - return null - } - content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} /> - className += ' ' + tile.settings.align - style.width = unitsDimension(tile, 'width') - style.height = unitsDimension(tile, 'height') - style.fontFamily = tile.settings.font_family - style.fontSize = tile.settings.font_size + 'px' - style.lineHeight = 1.5 - style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal' - style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal' - style.backgroundColor = tile.settings.background_color || 'transparent' - style.color = tile.settings.font_color || '#dddddd!important' - break - - case 'link': - content = "" - className += ' ' + tile.settings.align - style.width = unitsDimension(tile, 'width') - style.height = unitsDimension(tile, 'height') - break - - case 'script': - content = "" - if (viewing) { - eval(tile.settings.content) - } else { - content = "SCRIPT" - } - } - if (viewing) { - return ( - <div - className={className} - onMouseDown={onMouseDown} - style={style} - > - {content} - </div> - ) - } else { - return ( - <div - className={className} - onMouseDown={onMouseDown} - onDoubleClick={onDoubleClick} - style={style} - > - {content} - </div> - ) - } - } -} - -const generateTransform = (tile, box) => { - let { x, y, align, rotation, scale, units, is_tiled } = tile.settings - if (is_tiled) { - return 'translateZ(0)' - } - if (box) { - x += box.dx - y += box.dy - } - units = units || 'px' - const [yalign, xalign] = align.split('_') - let transform = ['translateZ(0)'] - if (yalign === 'center') { - transform.push('translateY(-50%)') - } - if (xalign === 'center') { - transform.push('translateX(-50%)') - } - // if (x % 2 == 1) x += 0.5 - // if (y % 2 == 1) y += 0.5 - transform.push('translateX(' + x + units + ')') - transform.push('translateY(' + y + units + ')') - if (scale !== 1) { - transform.push('scale(' + scale + ')') - } - if (rotation !== 0) { - transform.push('rotateZ(' + rotation + 'deg)') - } - return transform.join(' ') -} - -const generateVideoStyle = (tile, bounds) => { - const style = { - pointerEvents: "none", - } - switch (tile.settings.video_style) { - case 'normal': - style.width = "auto" - style.height = "auto" - break - case 'cover': - if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) { - style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height) - style.height = bounds.height - } else { - style.width = bounds.width - style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width) - } - break - case 'contain': - if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) { - style.width = bounds.width - style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width) - } else { - style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height) - style.height = bounds.height - } - break - } - return style -} - -const unitsDimension = (tile, dimension) => { - const value = tile.settings[dimension] - if (!value) return "auto" - if (tile.settings.units) return value + tile.settings.units - return value + "px" -} diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js index dc85f5e..68347b7 100644 --- a/frontend/app/views/page/page.container.js +++ b/frontend/app/views/page/page.container.js @@ -9,13 +9,13 @@ import './cursors.css' import actions from 'app/actions' import { Loader } from 'app/common' -import * as graphActions from '../graph/graph.actions' +import * as graphActions from 'app/views/graph/graph.actions' import * as pageActions from './page.actions' -import PageEdit from '../graph/components/page.edit' -import TileNew from './components/tile.new' -import TileEdit from './components/tile.edit' -import TileList from './components/tile.list' +import PageEdit from 'app/views/graph/components/page.edit' +import TileNew from 'app/views/tile/components/tile.new' +import TileEdit from 'app/views/tile/components/tile.edit' +import TileList from 'app/views/tile/components/tile.list' import PageHeader from './components/page.header' import PageEditor from './components/page.editor' diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/tile/components/tile.edit.js index cae9f73..cae9f73 100644 --- a/frontend/app/views/page/components/tile.edit.js +++ b/frontend/app/views/tile/components/tile.edit.js diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js index aefecf1..49b34b1 100644 --- a/frontend/app/views/page/components/tile.form.js +++ b/frontend/app/views/tile/components/tile.form.js @@ -96,8 +96,11 @@ const newVideo = (data) => ({ external_link_url: "", cursor: 'none', muted: false, - loop: false, + loop_style: false, autoadvance: false, + loop_section: false, + loop_start: 0, + loop_end: 0, }, type: 'video', target_page_id: null, @@ -560,16 +563,44 @@ class TileForm extends Component { name="muted" checked={temporaryTile.settings.muted} onChange={this.handleSettingsSelect} - autoComplete="off" /> <Checkbox label="Autoadvance" name="autoadvance" checked={temporaryTile.settings.autoadvance} onChange={this.handleSettingsSelect} - autoComplete="off" /> </div> + {temporaryTile.settings.loop && ( + <div className='row'> + <Checkbox + label="Loop section?" + name="loop_section" + checked={temporaryTile.settings.loop_section} + onChange={this.handleSettingsSelect} + /> + </div> + )} + {temporaryTile.settings.loop && temporaryTile.settings.loop_section && ( + <div className='row pair'> + <TextInput + title="From" + placeholder='0:00' + name="loop_start" + data={temporaryTile.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <TextInput + title="To" + placeholder='0:00' + name="loop_end" + data={temporaryTile.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + </div> + )} </div> ) } @@ -763,7 +794,7 @@ class TileForm extends Component { return ( <div> <Checkbox - label="Play audio" + label="Add audio events" name="has_audio" checked={temporaryTile.settings.has_audio} onChange={this.handleSettingsSelect} diff --git a/frontend/app/views/tile/components/tile.handle.js b/frontend/app/views/tile/components/tile.handle.js new file mode 100644 index 0000000..03b9f88 --- /dev/null +++ b/frontend/app/views/tile/components/tile.handle.js @@ -0,0 +1,8 @@ +import React from 'react' + +import handles from 'app/views/tile/handles' + +export default function TileHandle (props) { + const Tile = handles[props.tile.type] + return <Tile {...props} /> +} diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js index c455489..c455489 100644 --- a/frontend/app/views/page/components/tile.list.js +++ b/frontend/app/views/tile/components/tile.list.js diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js index b491fdd..b491fdd 100644 --- a/frontend/app/views/page/components/tile.new.js +++ b/frontend/app/views/tile/components/tile.new.js diff --git a/frontend/app/views/tile/handles/index.js b/frontend/app/views/tile/handles/index.js new file mode 100644 index 0000000..8aaeb06 --- /dev/null +++ b/frontend/app/views/tile/handles/index.js @@ -0,0 +1,14 @@ + +import TileImage from './tile.image' +import TileVideo from './tile.video' +import TileLink from './tile.link' +import TileText from './tile.text' +import TileScript from './tile.script' + +export default { + image: TileImage, + video: TileVideo, + link: TileLink, + text: TileText, + script: TileScript, +} diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js new file mode 100644 index 0000000..fd34876 --- /dev/null +++ b/frontend/app/views/tile/handles/tile.image.js @@ -0,0 +1,54 @@ +import React from 'react' +import { generateTransform } from 'app/views/tile/tile.utils' + +export default function TileImage({ tile, box, viewing, onMouseDown, onDoubleClick }) { + // console.log(tile) + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + // console.log(generateTransform(tile)) + let content + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + + if (!tile.settings.url) { + return null + } + if (tile.settings.is_tiled) { + style.backgroundImage = 'url(' + tile.settings.url + ')' + style.backgroundPosition = tile.settings.align.replace('_', ' ') + switch (tile.settings.tile_style) { + default: + case 'tile': + break + case 'cover': + style.backgroundSize = 'cover' + break + case 'contain': + style.backgroundSize = 'contain' + break + case 'contain no-repeat': + style.backgroundSize = 'contain' + style.backgroundRepeat = 'no-repeat' + break + } + className += ' is_tiled' + } else { + className += ' ' + tile.settings.align + content = <img src={tile.settings.url} /> + } + + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + {content} + </div> + ) +} diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js new file mode 100644 index 0000000..839c18c --- /dev/null +++ b/frontend/app/views/tile/handles/tile.link.js @@ -0,0 +1,34 @@ +import React from 'react' +import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils' + +export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) { + // console.log(tile) + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + // console.log(generateTransform(tile)) + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + + if (!tile.settings.content) { + return null + } + let content = "" + className += ' ' + tile.settings.align + style.width = unitsDimension(tile, 'width') + style.height = unitsDimension(tile, 'height') + + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + {content} + </div> + ) +} diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js new file mode 100644 index 0000000..6996cc0 --- /dev/null +++ b/frontend/app/views/tile/handles/tile.script.js @@ -0,0 +1,34 @@ +import React from 'react' +import { generateTransform } from 'app/views/tile/tile.utils' + +export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) { + // console.log(tile) + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + // console.log(generateTransform(tile)) + let content; + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + + content = "" + if (viewing) { + eval(tile.settings.content) + } else { + content = "SCRIPT" + } + + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + {content} + </div> + ) +} diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js new file mode 100644 index 0000000..5d38c85 --- /dev/null +++ b/frontend/app/views/tile/handles/tile.text.js @@ -0,0 +1,41 @@ +import React from 'react' +import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils' + +export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) { + // console.log(tile) + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + // console.log(generateTransform(tile)) + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + + if (!tile.settings.content) { + return null + } + let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} /> + className += ' ' + tile.settings.align + style.width = unitsDimension(tile, 'width') + style.height = unitsDimension(tile, 'height') + style.fontFamily = tile.settings.font_family + style.fontSize = tile.settings.font_size + 'px' + style.lineHeight = 1.5 + style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal' + style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal' + style.backgroundColor = tile.settings.background_color || 'transparent' + style.color = tile.settings.font_color || '#dddddd!important' + + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + {content} + </div> + ) +} diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js new file mode 100644 index 0000000..001cce2 --- /dev/null +++ b/frontend/app/views/tile/handles/tile.video.js @@ -0,0 +1,72 @@ +import React, { Component } from 'react' + +import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils' +import { timestampToSeconds } from 'app/utils' + +export default class TileVideo extends Component { + constructor(props) { + super(props) + this.videoRef = React.createRef() + this.handleTimeUpdate = this.handleTimeUpdate.bind(this) + this.handleEnded = this.handleEnded.bind(this) + } + componentDidMount() { + this.videoRef.current.addEventListener('ended', this.handleEnded) + this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate) + } + componentWillUnmount() { + this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate) + this.videoRef.current.removeEventListener('ended', this.handleEnded) + } + handleTimeUpdate() { + if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) { + const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0 + const loop_end = timestampToSeconds(this.props.tile.settings.loop_end) || this.videoRef.current.duration + if (this.videoRef.current.currentTime > loop_end) { + this.videoRef.current.currentTime = loop_start + } + } + } + handleEnded() { + this.props.onPlaybackEnded(this.props.tile) + if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) { + const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0 + this.videoRef.current.currentTime = loop_start + } + } + render() { + let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props + // console.log(tile) + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + // console.log(tile.settings) + if (!tile.settings.url) { + return null + } + className += ' ' + tile.settings.align + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + <video + ref={this.videoRef} + src={tile.settings.url} + autoPlay={true} + controls={false} + loop={tile.settings.loop} + muted={tile.settings.muted} + style={generateVideoStyle(tile, bounds)} + /> + </div> + ) + } +} diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js new file mode 100644 index 0000000..8782f85 --- /dev/null +++ b/frontend/app/views/tile/tile.utils.js @@ -0,0 +1,68 @@ +export const generateTransform = (tile, box) => { + let { x, y, align, rotation, scale, units, is_tiled } = tile.settings + if (is_tiled) { + return 'translateZ(0)' + } + if (box) { + x += box.dx + y += box.dy + } + units = units || 'px' + const [yalign, xalign] = align.split('_') + let transform = ['translateZ(0)'] + if (yalign === 'center') { + transform.push('translateY(-50%)') + } + if (xalign === 'center') { + transform.push('translateX(-50%)') + } + // if (x % 2 == 1) x += 0.5 + // if (y % 2 == 1) y += 0.5 + transform.push('translateX(' + x + units + ')') + transform.push('translateY(' + y + units + ')') + if (scale !== 1) { + transform.push('scale(' + scale + ')') + } + if (rotation !== 0) { + transform.push('rotateZ(' + rotation + 'deg)') + } + return transform.join(' ') +} + +export const generateVideoStyle = (tile, bounds) => { + const style = { + pointerEvents: "none", + } + switch (tile.settings.video_style) { + case 'normal': + style.width = "auto" + style.height = "auto" + break + case 'cover': + if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) { + style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height) + style.height = bounds.height + } else { + style.width = bounds.width + style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width) + } + break + case 'contain': + if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) { + style.width = bounds.width + style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width) + } else { + style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height) + style.height = bounds.height + } + break + } + return style +} + +export const unitsDimension = (tile, dimension) => { + const value = tile.settings[dimension] + if (!value) return "auto" + if (tile.settings.units) return value + tile.settings.units + return value + "px" +} diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js index fa90b1f..6f6b850 100644 --- a/frontend/site/viewer/viewer.container.js +++ b/frontend/site/viewer/viewer.container.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import { history } from 'site/store' import actions from 'site/actions' import { Loader } from 'app/common/loader.component' -import TileHandle from 'app/views/page/components/tile.handle' +import TileHandle from 'app/views/tile/components/tile.handle' import 'app/views/page/page.css' |