From fb82ff9fa188769f7cf7bb02c1c574201cbe9f85 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 23 Mar 2021 12:33:40 +0100
Subject:           disablePictureInPicture={true}

---
 frontend/app/views/page/components/page.editor.js |  3 ++-
 frontend/app/views/tile/components/tile.form.js   | 11 +++++++++++
 frontend/app/views/tile/handles/tile.video.js     | 15 ++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

(limited to 'frontend/app')

diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index adf8652..ec6ddd3 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -138,7 +138,7 @@ class PageEditor extends Component {
     const { dx, dy } = box
     let url = window.location.pathname
     this.setState({
-      page: null,
+      tile: null,
       box: null,
       initialBox: null,
       dragging: false,
@@ -150,6 +150,7 @@ class PageEditor extends Component {
     }
     const updatedTile = {
       ...tile,
+      target_page_id: tile.target_page_id || 0,
       settings: {
         ...tile.settings,
         x: tile.settings.x + dx,
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index c2a8f79..8f6fe83 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -601,6 +601,17 @@ class TileForm extends Component {
             onChange={this.handleSettingsSelect}
           />
         </div>
+        {!temporaryTile.settings.muted && (
+          <Slider
+            title='Volume'
+            name='volume'
+            value={('volume' in temporaryTile.settings) ? temporaryTile.settings.volume : 1.0}
+            onChange={this.handleSettingsSelect}
+            min={0.0}
+            max={1.0}
+            step={0.01}
+          />
+        )}
         {temporaryTile.settings.loop && (
           <div className='row'>
             <Checkbox
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index a34d348..b4183ce 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -29,6 +29,15 @@ export default class TileVideo extends Component {
     this.el = this.videoRef.current
     this.el.addEventListener('ended', this.handleEnded)
     this.el.addEventListener('timeupdate', this.handleTimeUpdate)
+    const muted = this.props.viewing
+      ? this.props.tile.settings.muted
+      : true
+    const volume = muted
+      ? 0.0
+      : ('volume' in this.props.tile.settings)
+        ? this.props.tile.settings.volume
+        : 1.0
+    this.el.volume = volume
   }
 
   unbind() {
@@ -71,6 +80,9 @@ export default class TileVideo extends Component {
       return null
     }
     className += ' ' + tile.settings.align
+    const muted = viewing
+      ? tile.settings.muted
+      : true
     return (
       <div
         className={className}
@@ -83,8 +95,9 @@ export default class TileVideo extends Component {
           src={tile.settings.url}
           autoPlay={true}
           controls={false}
+          disablePictureInPicture={true}
           loop={tile.settings.loop}
-          muted={viewing ? tile.settings.muted : true}
+          muted={muted}
           style={generateVideoStyle(tile, bounds)}
         />
       </div>
-- 
cgit v1.2.3-70-g09d2