disablePictureInPicture={true}

2 files changed, 25 insertions, 1 deletions

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>