From 33e04b352771026055bae8b91d994c166a784699 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 19 Jan 2020 14:40:35 +0000
Subject: [PATCH 1/2] Added ability to add/edit image and video sources

---
 src/components/modals/SourcesModal.jsx      | 30 +++++++
 src/components/sources/SourceTypeEditor.jsx | 98 +++++++++++++++++++++
 src/styles/_components.scss                 |  1 +
 3 files changed, 129 insertions(+)

diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index e291607..7d13170 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -60,6 +60,12 @@ function editorMode(source) {
       return 'geojson_json';
     }
   }
+  if(source.type === 'image') {
+    return 'image';
+  }
+  if(source.type === 'video') {
+    return 'video';
+  }
   return null
 }
 
@@ -153,6 +159,28 @@ class AddSource extends React.Component {
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'image': return {
+        type: 'image',
+        url: `${protocol}//localhost:3000/image.png`,
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
+      case 'video': return {
+        type: 'video',
+        urls: [
+          `${protocol}//localhost:3000/movie.mp4`
+        ],
+        coordinates: [
+          [0,0],
+          [0,0],
+          [0,0],
+          [0,0],
+        ],
+      }
       default: return {}
     }
   }
@@ -185,6 +213,8 @@ class AddSource extends React.Component {
             ['tilexyz_raster', 'Raster (XYZ URL)'],
             ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
             ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
+            ['image', 'Image'],
+            ['video', 'Video'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 8ed4672..3451713 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -6,6 +6,8 @@ import StringInput from '../inputs/StringInput'
 import UrlInput from '../inputs/UrlInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
+import DynamicArrayInput from '../inputs/DynamicArrayInput'
+import ArrayInput from '../inputs/ArrayInput'
 import JSONEditor from '../layers/JSONEditor'
 
 
@@ -88,6 +90,100 @@ class TileURLSourceEditor extends React.Component {
   }
 }
 
+class ImageSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const changeCoord = (idx, val) => {
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    return <div>
+      <InputBlock label={"Image URL"} doc={latest.source_image.url.doc}>
+        <UrlInput
+          value={this.props.source.url}
+          onChange={url => this.props.onChange({
+            ...this.props.source,
+            url,
+          })}
+        />
+      </InputBlock>
+      {["top", "left", "bottom", "right"].map((label, idx) => {
+        return (
+          <InputBlock label={`Coord ${label}`} key={label}>
+            <ArrayInput
+              length={2}
+              type="number"
+              value={this.props.source.coordinates[idx]}
+              default={[0, 0]}
+              onChange={(val) => changeCoord(idx, val)}
+            />
+          </InputBlock>
+        );
+      })}
+    </div>
+  }
+}
+
+class VideoSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const changeCoord = (idx, val) => {
+      const coordinates = this.props.source.coordinates.slice(0);
+      coordinates[idx] = val;
+
+      this.props.onChange({
+        ...this.props.source,
+        coordinates,
+      });
+    }
+
+    const changeUrls = (urls) => {
+      this.props.onChange({
+        ...this.props.source,
+        urls,
+      });
+    }
+
+    return <div>
+      <InputBlock label={"Video URL"} doc={latest.source_video.urls.doc}>
+        <DynamicArrayInput
+          type="string"
+          value={this.props.source.urls}
+          default={""}
+          onChange={changeUrls}
+        />
+      </InputBlock>
+      {["top", "left", "bottom", "right"].map((label, idx) => {
+        return (
+          <InputBlock label={`Coord ${label}`} key={label}>
+            <ArrayInput
+              length={2}
+              type="number"
+              value={this.props.source.coordinates[idx]}
+              default={[0, 0]}
+              onChange={val => changeCoord(idx, val)}
+            />
+          </InputBlock>
+        );
+      })}
+    </div>
+  }
+}
+
 class GeoJSONSourceUrlEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
@@ -161,6 +257,8 @@ class SourceTypeEditor extends React.Component {
           />
         </InputBlock>
       </TileURLSourceEditor>
+      case 'image': return <ImageSourceEditor {...commonProps} />
+      case 'video': return <VideoSourceEditor {...commonProps} />
       default: return null
     }
   }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index c8b0749..2827b9b 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -138,6 +138,7 @@
     user-select: none;
     width: 50%;
     vertical-align: top;
+    font-size: 12px;
   }
 
   &-content {

From 096e2b6aec4c272eaa0873134a99b277abfe9964 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 19 Jan 2020 15:48:11 +0000
Subject: [PATCH 2/2] Fixed image/video coord labels.

---
 src/components/sources/SourceTypeEditor.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 3451713..1726b86 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -117,7 +117,7 @@ class ImageSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      {["top", "left", "bottom", "right"].map((label, idx) => {
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
           <InputBlock label={`Coord ${label}`} key={label}>
             <ArrayInput
@@ -167,7 +167,7 @@ class VideoSourceEditor extends React.Component {
           onChange={changeUrls}
         />
       </InputBlock>
-      {["top", "left", "bottom", "right"].map((label, idx) => {
+      {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
         return (
           <InputBlock label={`Coord ${label}`} key={label}>
             <ArrayInput