summaryrefslogtreecommitdiff
path: root/frontend/app/views/page
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/page')
-rw-r--r--frontend/app/views/page/components/page.editor.js1
-rw-r--r--frontend/app/views/page/components/tile.form.js103
-rw-r--r--frontend/app/views/page/components/tile.handle.js52
-rw-r--r--frontend/app/views/page/cursors.css3
-rw-r--r--frontend/app/views/page/page.css3
5 files changed, 160 insertions, 2 deletions
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index d324874..25342d2 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -73,6 +73,7 @@ class PageEditor extends Component {
}
handleMouseDown(e, tile) {
+ if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return
const bounds = this.getBoundingClientRect()
const mouseX = e.pageX
const mouseY = e.pageY
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 3f43dd0..a9f34a7 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,12 +10,12 @@ import {
TextInput, NumberInput, ColorInput, Slider,
Select, LabelDescription, TextArea, Checkbox,
SubmitButton, Loader } from 'app/common'
-import { preloadImage } from 'app/utils'
+import { preloadImage, preloadVideo } from 'app/utils'
import * as tileActions from '../../tile/tile.actions'
const SELECT_TYPES = [
- "image", "text", "link", "script",
+ "image", "text", "video", "link", "script",
].map(s => ({ name: s, label: s }))
const ALIGNMENTS = [
@@ -31,6 +31,7 @@ const ALIGNMENTS = [
const REQUIRED_KEYS = {
image: ['url'],
+ video: ['url'],
text: ['content'],
link: [],
script: [],
@@ -40,6 +41,10 @@ const IMAGE_TILE_STYLES = [
'tile', 'cover', 'contain', 'contain no-repeat'
].map(style => ({ name: style, label: style }))
+const VIDEO_STYLES = [
+ 'normal', 'cover', 'contain',
+].map(style => ({ name: style, label: style }))
+
const TEXT_FONT_FAMILIES = [
'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
].map(style => ({ name: style, label: style }))
@@ -49,6 +54,7 @@ const TEXT_FONT_STYLES = [
].map(style => ({ name: style, label: style }))
const CURSORS = [
+ { name: 'none', label: 'None', },
{ name: 'hand_up', label: 'Up', },
{ name: 'hand_down', label: 'Down', },
{ name: 'hand_left', label: 'Left', },
@@ -80,6 +86,22 @@ const newImage = (data) => ({
...data,
})
+const newVideo = (data) => ({
+ settings: {
+ ...newPosition(),
+ video_style: 'cover',
+ url: "",
+ external_link_url: "",
+ cursor: 'none',
+ muted: false,
+ loop: false,
+ autoadvance: false,
+ },
+ type: 'video',
+ target_page_id: null,
+ ...data,
+})
+
const newText = (data) => ({
settings: {
...newPosition(),
@@ -123,12 +145,14 @@ const newPosition = (data) => ({
width: 0, height: 0,
rotation: 0, scale: 1,
opacity: 1,
+ units: false,
align: "center_center",
...data,
})
const TYPE_CONSTRUCTORS = {
image: newImage,
+ video: newVideo,
text: newText,
link: newLink,
script: newScript,
@@ -277,6 +301,24 @@ class TileForm extends Component {
})
}
+ handleVideoChange(e) {
+ const { name, value } = e.target
+ this.handleSettingsSelect(name, value)
+ preloadVideo(value).then(video => {
+ // console.log(img)
+ this.props.tileActions.updateTemporaryTile({
+ ...this.props.temporaryTile,
+ settings: {
+ ...this.props.temporaryTile.settings,
+ [name]: value,
+ width: video.videoWidth,
+ height: video.videoHeight,
+ x: 0, y: 0,
+ }
+ })
+ })
+ }
+
clearErrorField(name) {
const { errorFields } = this.state
if (errorFields.has(name)) {
@@ -362,6 +404,8 @@ class TileForm extends Component {
{temporaryTile.type === 'image'
? this.renderImageForm()
+ : temporaryTile.type === 'video'
+ ? this.renderVideoForm()
: temporaryTile.type === 'text'
? this.renderTextForm()
: temporaryTile.type === 'link'
@@ -453,6 +497,61 @@ class TileForm extends Component {
)
}
+ renderVideoForm() {
+ // const { isNew } = this.props
+ const { temporaryTile } = this.props
+ const { errorFields } = this.state
+ // console.log(temporaryTile.settings)
+ return (
+ <div>
+ <div className='row imageUrl'>
+ <TextInput
+ title=""
+ placeholder='http://'
+ name="url"
+ required
+ data={temporaryTile.settings}
+ error={errorFields.has('url')}
+ onChange={this.handleVideoChange.bind(this)}
+ autoComplete="off"
+ />
+ </div>
+ <div className='row pair'>
+ <Select
+ name='video_style'
+ selected={temporaryTile.settings.video_style || 'none'}
+ options={VIDEO_STYLES}
+ title=''
+ onChange={this.handleSettingsSelect.bind(this)}
+ />
+ <Checkbox
+ label="Loop"
+ name="loop"
+ checked={temporaryTile.settings.loop}
+ onChange={this.handleSettingsSelect.bind(this)}
+ autoComplete="off"
+ />
+ </div>
+ <div className='row pair'>
+ <Checkbox
+ label="Muted"
+ name="muted"
+ checked={temporaryTile.settings.muted}
+ onChange={this.handleSettingsSelect.bind(this)}
+ autoComplete="off"
+ />
+ <Checkbox
+ label="Autoadvance"
+ name="autoadvance"
+ checked={temporaryTile.settings.autoadvance}
+ onChange={this.handleSettingsSelect.bind(this)}
+ autoComplete="off"
+ />
+ </div>
+ </div>
+ )
+ }
+
renderTextForm() {
const { temporaryTile } = this.props
const { errorFields } = this.state
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index 624b175..96574ff 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -44,6 +44,24 @@ const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick })
content = <img src={tile.settings.url} />
}
break
+
+ case 'video':
+ if (!tile.settings.url) {
+ return null
+ }
+ className += ' ' + tile.settings.align
+ content = (
+ <video
+ 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
@@ -60,12 +78,14 @@ const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick })
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 = tile.settings.width ? tile.settings.width + 'px' : 'auto'
style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
break
+
case 'script':
content = ""
if (viewing) {
@@ -143,4 +163,36 @@ const generateTransform = (tile, box) => {
return transform.join(' ')
}
+const generateVideoStyle = (tile, bounds) => {
+ console.log(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 default TileHandle
diff --git a/frontend/app/views/page/cursors.css b/frontend/app/views/page/cursors.css
index 56fb088..778b614 100644
--- a/frontend/app/views/page/cursors.css
+++ b/frontend/app/views/page/cursors.css
@@ -13,6 +13,9 @@
.tile.hand_left {
cursor: url(/static/img/hand_left.png) 10 60, pointer;
}
+.tile.none {
+ cursor: default;
+}
.tile.link {
cursor: pointer;
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 4559543..2014289 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -15,6 +15,9 @@
.tile.image {
display: block;
}
+.tile.video {
+ display: block;
+}
.tile.image.is_tiled {
width: 100%;
height: 100%;
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 23:25:47 +0000