Merge pull request #603 from orangemug/feature/add-image-and-video-sources

Added ability to add image/video sources

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}

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", "top right", "bottom right", "bottom left"].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", "top right", "bottom right", "bottom left"].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
     }
   }

src/styles/_components.scss

@@ -138,6 +138,7 @@
     user-select: none;
     width: 50%;
     vertical-align: top;
+    font-size: 12px;
   }
 
   &-content {