summaryrefslogtreecommitdiff
path: root/frontend/app/views/tile
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/tile')
-rw-r--r--frontend/app/views/tile/components/tile.form.js32
-rw-r--r--frontend/app/views/tile/handles/tile.image.js4
-rw-r--r--frontend/app/views/tile/handles/tile.link.js8
-rw-r--r--frontend/app/views/tile/handles/tile.script.js4
-rw-r--r--frontend/app/views/tile/handles/tile.text.js8
-rw-r--r--frontend/app/views/tile/handles/tile.video.js12
-rw-r--r--frontend/app/views/tile/tile.utils.js22
7 files changed, 59 insertions, 31 deletions
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index b33f7b8..3066da3 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -64,6 +64,14 @@ const CURSORS = [
{ name: 'unclickable', label: 'Unclickable', },
]
+const UNITS = [
+ { name: 'px', label: 'pixels' },
+ { name: '%', label: 'percent' },
+ { name: 'video', label: 'video' },
+ { name: 'vmin', label: 'screen min' },
+ { name: 'vmax', label: 'screen max' },
+]
+
const NO_LINK = 0
const EXTERNAL_LINK = -1
const OPEN_POPUP_LINK = -2
@@ -95,7 +103,7 @@ const newImage = (data) => ({
cursor: 'hand_up',
},
type: 'image',
- target_page_id: null,
+ target_page_id: 0,
...data,
})
@@ -114,7 +122,7 @@ const newVideo = (data) => ({
loop_end: 0,
},
type: 'video',
- target_page_id: null,
+ target_page_id: 0,
...data,
})
@@ -134,7 +142,7 @@ const newText = (data) => ({
cursor: 'hand_up',
},
type: 'text',
- target_page_id: null,
+ target_page_id: 0,
...data,
})
@@ -146,7 +154,7 @@ const newLink = (data) => ({
units: 'px',
},
type: 'link',
- target_page_id: null,
+ target_page_id: 0,
...data,
})
@@ -395,6 +403,7 @@ class TileForm extends Component {
} else {
validData.id = temporaryTile.id
}
+ validData.target_page_id = validData.target_page_id || 0
this.setState({ modified: false })
console.log('submit', validData)
onSubmit(validData)
@@ -734,14 +743,13 @@ class TileForm extends Component {
autoComplete="off"
/>
</div>
- <div className='row pair'>
- <TextInput
- title="Units"
- name="units"
- data={temporaryTile.settings}
- error={errorFields.has('units')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
+ <div className='row single'>
+ <Select
+ name='units'
+ selected={temporaryTile.settings.units}
+ options={UNITS}
+ title='Units'
+ onChange={this.handleSettingsSelect}
/>
</div>
</div>
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index fd34876..beeb36a 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform } from 'app/views/tile/tile.utils'
-export default function TileImage({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box),
+ transform: generateTransform(tile, box, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index 20d881b..a87b95f 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box),
+ transform: generateTransform(tile, box, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
let content = ""
className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width')
- style.height = unitsDimension(tile, 'height')
+ style.width = unitsDimension(tile, 'width', videoBounds)
+ style.height = unitsDimension(tile, 'height', videoBounds)
return (
<div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 6996cc0..444a56b 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box),
+ transform: generateTransform(tile, box, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 5d38c85..172212a 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,10 +1,10 @@
import React from 'react'
import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
-export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
// console.log(tile)
const style = {
- transform: generateTransform(tile, box),
+ transform: generateTransform(tile, box, videoBounds),
opacity: tile.settings.opacity,
}
// console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
}
let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width')
- style.height = unitsDimension(tile, 'height')
+ style.width = unitsDimension(tile, 'width', videoBounds)
+ style.height = unitsDimension(tile, 'height', videoBounds)
style.fontFamily = tile.settings.font_family
style.fontSize = tile.settings.font_size + 'px'
style.lineHeight = 1.5
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index a9f0d09..271a671 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -10,27 +10,33 @@ export default class TileVideo extends Component {
this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
this.handleEnded = this.handleEnded.bind(this)
}
+
componentDidMount() {
this.bind()
}
+
componentDidUpdate() {
this.unbind()
this.bind()
}
+
componentWillUnmount() {
this.unbind()
}
+
bind() {
if (!this.videoRef.current) return
this.el = this.videoRef.current
this.el.addEventListener('ended', this.handleEnded)
this.el.addEventListener('timeupdate', this.handleTimeUpdate)
}
+
unbind() {
if (!this.el) return
this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
this.el.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
@@ -40,6 +46,7 @@ export default class TileVideo extends Component {
}
}
}
+
handleEnded() {
this.props.onPlaybackEnded(this.props.tile)
if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -47,11 +54,12 @@ export default class TileVideo extends Component {
this.videoRef.current.currentTime = loop_start
}
}
+
render() {
- let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+ let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
// console.log(tile)
const style = {
- transform: generateTransform(tile, box),
+ transform: generateTransform(tile, box, videoBounds),
opacity: tile.settings.opacity,
}
let className = ['tile', tile.type].join(' ')
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index 8782f85..ed1cbc8 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box) => {
+export const generateTransform = (tile, box, videoBounds) => {
let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
if (is_tiled) {
return 'translateZ(0)'
@@ -18,8 +18,11 @@ export const generateTransform = (tile, box) => {
}
// if (x % 2 == 1) x += 0.5
// if (y % 2 == 1) y += 0.5
- transform.push('translateX(' + x + units + ')')
- transform.push('translateY(' + y + units + ')')
+ const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
+ const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+
+ transform.push('translateX(' + xUnits + ')')
+ transform.push('translateY(' + yUnits + ')')
if (scale !== 1) {
transform.push('scale(' + scale + ')')
}
@@ -60,9 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
return style
}
-export const unitsDimension = (tile, dimension) => {
+export const unitsDimension = (tile, dimension, videoBounds) => {
const value = tile.settings[dimension]
if (!value) return "auto"
- if (tile.settings.units) return value + tile.settings.units
+ if (tile.settings.units) {
+ if (tile.settings.units === 'video') {
+ return videoUnits(value, videoBounds)
+ }
+ return value + tile.settings.units
+ }
return value + "px"
}
+
+export const videoUnits = (value, videoBounds) => (
+ (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+) \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 06:14:01 +0000