Merge pull request #15 from dictoapp/dev

1.0.0-alpha.4
dictoapp · Apr 12, 2019 · 8ba81c4 · 8ba81c4
2 parents 0b72842 + 18b6ab6
commit 8ba81c4
Show file tree

Hide file tree

Showing 35 changed files with 398 additions and 160 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 *Written according to [Keep a changelog](https://keepachangelog.com/en/1.0.0/) guidelines and [semantic versioning](https://semver.org/)*.
 
+## [1.0.0-alpha.4](https://github.com/dictoapp/dicto/tree/1.0.0-alpha.4) - ??
+
+### Fixed
+
+* fix layout issues in firefox
+* fix bug with some media metadata retrieval processes
+* fix multiple chunks delete bug
+
+### Changed
+
+* use an open source maps engine
+
+### Added
+
+* timecode display and tooltips in montage player
+* display version number in home
+
 ## [1.0.0-alpha.3](https://github.com/dictoapp/dicto/tree/1.0.0-alpha.3) - 2018-09-28
 
 ### Fixed

diff --git a/app/electronIndex.html b/app/electronIndex.html
@@ -31,22 +31,22 @@
   <!-- end meta twitter-->
 
   <meta charset="utf-8">
-  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-  <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/manifest.json">
+  <link rel="apple-touch-icon" sizes="57x57" href="https://dictoapp.github.io/dicto/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="https://dictoapp.github.io/dicto/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="https://dictoapp.github.io/dicto/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="https://dictoapp.github.io/dicto/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="https://dictoapp.github.io/dicto/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="https://dictoapp.github.io/dicto/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="https://dictoapp.github.io/dicto/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="https://dictoapp.github.io/dicto/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="https://dictoapp.github.io/dicto/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="https://dictoapp.github.io/dicto/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://dictoapp.github.io/dicto/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="https://dictoapp.github.io/dicto/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://dictoapp.github.io/dicto/favicon-16x16.png">
+  <link rel="manifest" href="https://dictoapp.github.io/dicto/manifest.json">
   <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+  <meta name="msapplication-TileImage" content="https://dictoapp.github.io/dicto/ms-icon-144x144.png">
   <meta name="theme-color" content="#ffffff">
   <link rel="stylesheet" href="build/bundle.css">
 </head>
@@ -60,11 +60,11 @@ <h1>DICTO</h1>
   <!-- Element in which to mount the app -->
   <div id="mount"></div>
   <script>
-      window.__PUBLIC_URL__ = '';
-      window.__DICTO_VERSION__ = '';
-      window.__SOURCE_REPOSITORY__ = '';
+      window.__PUBLIC_URL__ = 'https://dictoapp.github.io/dicto';
+      window.__DICTO_VERSION__ = '1.0.0-alpha.4';
+      window.__SOURCE_REPOSITORY__ = 'https://github.com/dictoapp/dicto';
   </script>
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBSfycBqpNHM0ieFYBhNW24h7mgQ2CTjQ&libraries=places"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXEBFS9b54hMz4_SzU2IeEKLcC5i6gp1U&libraries=places"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
   <!-- Loading Bundle -->

diff --git a/app/index.html b/app/index.html
@@ -70,7 +70,7 @@ <h1>DICTO</h1>
       window.__DICTO_VERSION__ = '';
       window.__SOURCE_REPOSITORY__ = '';
   </script>
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBSfycBqpNHM0ieFYBhNW24h7mgQ2CTjQ&libraries=places"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXEBFS9b54hMz4_SzU2IeEKLcC5i6gp1U&libraries=places"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
   <script type="text/javascript" src="/build/bundle.js"></script>

diff --git a/app/src/components/ChunkContentEditor/ChunkContentEditor.scss b/app/src/components/ChunkContentEditor/ChunkContentEditor.scss
@@ -222,4 +222,10 @@
             cursor: pointer;
         }
     }
+
+    &.expanded{
+        .main-editor-container textarea{
+            height: 100%!important;
+        }
+    }
 }
diff --git a/app/src/components/CorpusPlayer/SpaceView.js b/app/src/components/CorpusPlayer/SpaceView.js
@@ -1,16 +1,14 @@
 import React from 'react';
 
-import GMap from 'google-map-react';
-
 import {
   extent,
   mean,
 } from 'd3-array';
 import { nest } from 'd3-collection';
 import { scaleLinear } from 'd3-scale';
 
-import getConfig from '../../helpers/getConfig';
-const { googleApiKey } = getConfig();
+import Map from 'pigeon-maps'
+import Overlay from 'pigeon-overlay'
 
 import {
   mapToArray,
@@ -27,7 +25,9 @@ const LocalizationMarker = ( {
   location,
   tags = [],
   onClick,
-  tagCategories = {}
+  tagCategories = {},
+  lat,
+  lng,
 } ) => {
   let color = 'white';
   if ( tags.length ) {
@@ -126,28 +126,32 @@ const SpaceView = ( {
     <div>
       <div className={ 'map-wrapper' }>
         <div className={ 'map-container' }>
-          <GMap
-            bootstrapURLKeys={ { key: [ googleApiKey ] } }
-            defaultCenter={ { lat: latMean, lng: lngMean } }
-            defaultZoom={ zoom }
+          <Map
+            center={ [ latMean, lngMean ] }
+            zoom={ zoom }
           >
             {
               places.map( ( place, index ) => {
                 const onClick = () => addPlaylistBuilder( 'place', place );
                 return (
-                  <LocalizationMarker
+                  <Overlay
                     key={ index }
-                    onClick={ onClick }
-                    lat={ place.location.latitude }
-                    lng={ place.location.longitude }
-                    tags={ place.values }
-                    tagCategories={ tagCategories }
-                    location={ place.location }
-                  />
+                    anchor={ [ place.location.latitude, place.location.longitude ] }
+                  >
+                    <LocalizationMarker
+                      key={ index }
+                      onClick={ onClick }
+                      lat={ place.location.latitude }
+                      lng={ place.location.longitude }
+                      tags={ place.values }
+                      tagCategories={ tagCategories }
+                      location={ place.location }
+                    />
+                  </Overlay>
                 );
               } )
             }
-          </GMap>
+          </Map>
         </div>
       </div>
 

diff --git a/app/src/components/LocationPicker/LocationPicker.js b/app/src/components/LocationPicker/LocationPicker.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
-import GMap from 'google-map-react';
 
-import getConfig from '../../helpers/getConfig';
-const { googleApiKey } = getConfig();
+import Map from 'pigeon-maps'
+import Overlay from 'pigeon-overlay'
 
 const Marker = () =>
   (
@@ -123,7 +122,9 @@ export default class LocationPickerContainer extends Component {
       } );
   }
 
-  onMapChange = ( { center: { lat, lng } } ) => {
+  onMapChange = ( { center } ) => {
+    const lat = center[0];
+    const lng = center[1];
     this.setState( {
       latitude: lat,
       longitude: lng,
@@ -328,27 +329,25 @@ export default class LocationPickerContainer extends Component {
           latitude && longitude &&
           <div className={ 'is-flex-1' }>
             <div style={ { width: '100%', height: '20rem' } }>
-              <GMap
-                bootstrapURLKeys={ { key: [ googleApiKey ] } }
-                defaultCenter={ { lat: latitude, lng: longitude } }
-                defaultZoom={ 11 }
-                onChange={ onMapChange }
+              <Map
+                center={ [ latitude, longitude ] }
+                zoom={ 11 }
+                onBoundsChanged={ onMapChange }
               >
                 {
                       location &&
                               location.latitude &&
                               location.latitude !== latitude &&
                               location.longitude !== longitude &&
-                              <PrevMarker
-                                lat={ location.latitude }
-                                lng={ location.longitude }
-                              />
+                              <Overlay anchor={ [ location.latitude, location.longitude ] }>
+                                <PrevMarker />
+                              </Overlay>
+
                     }
-                <Marker
-                  lat={ latitude }
-                  lng={ longitude }
-                />
-              </GMap>
+                <Overlay anchor={ [ latitude, longitude ] }>
+                  <Marker />
+                </Overlay>
+              </Map>
             </div>
           </div>
         }

diff --git a/app/src/components/MediaEditor/MediaEditor.js b/app/src/components/MediaEditor/MediaEditor.js
@@ -58,30 +58,46 @@ export default class MediaEditor extends Component {
 
     const onChange = ( metadata ) => {
       return new Promise( ( resolve ) => {
+        const newMetadata = {
+          ...this.state.media.metadata,
+          ...metadata
+        };
         const thatMedia = {
           ...this.state.media,
-          metadata
+          metadata: newMetadata
         };
+        this.setState( {
+          media: {
+            ...thatMedia,
+          }
+        } );
         if ( this.state.media &&
             this.state.media.metadata &&
             metadata.mediaUrl !== this.state.media.metadata.mediaUrl ) {
+
           enrichMediaMetadata( thatMedia )
             .then( ( thatMetadata ) => {
               this.setState( {
                 media: {
                   ...thatMedia,
-                  metadata: thatMetadata
+                  metadata: {
+                    ...newMetadata,
+                    ...thatMetadata
+                  }
                 }
               } );
-              resolve( thatMetadata );
+              resolve( {
+                ...newMetadata,
+                ...thatMetadata
+              } );
             } )
             .catch( console.error );/* eslint no-console : 0 */
         }
         else {
           this.setState( {
             media: thatMedia
           } );
-          resolve( thatMedia.metadata );
+          resolve( newMetadata );
         }
       } );
     };

diff --git a/app/src/components/MontagePlayer/MontagePlayer.js b/app/src/components/MontagePlayer/MontagePlayer.js
@@ -13,7 +13,8 @@ import './MontagePlayer.scss';
 import 'react-image-gallery/styles/scss/image-gallery.scss';
 
 import {
-  computePlaylist
+  computePlaylist,
+  secsToSrt
 } from '../../helpers/utils';
 
 const TOLERANCE_SECONDS = 1.1;
@@ -461,6 +462,7 @@ export default class MontagePlayer extends Component {
               >
                 <span className={ 'icon' }>
                   <i className={ 'fas fa-pause' } />
+
                 </span>
               </button>
               <button
@@ -471,13 +473,23 @@ export default class MontagePlayer extends Component {
                 <i className={ 'fas fa-play' } />
               </button>
             </div>
+            <div className={ "time-display" }>
+              <span className="time-display-anchor">🕐</span>
+              <span className="time-display-value">
+              <span>{currentPosition && currentPosition > 0 ? secsToSrt( parseInt( currentPosition ), false ) : secsToSrt( 0, false )}</span>
+                <span>/</span>
+                <span>{duration && duration > 0 ? secsToSrt( parseInt( duration ), false ) : secsToSrt( 0, false )}</span>
+              </span>
+
+            </div>
             <div className={ 'railway-container' }>
               <Railway
                 orientation={ 'horizontal' }
                 mediaCurrentTime={ currentPosition }
                 mediaDuration={ duration }
                 seekToMediaTime={ onSeek }
                 chunks={ list }
+                enableTooltip={true}
               />
             </div>
             <div className={ 'gui-btn-container' }>

diff --git a/app/src/components/MontagePlayer/MontagePlayer.scss b/app/src/components/MontagePlayer/MontagePlayer.scss
@@ -248,4 +248,42 @@
             border-left: 1px solid red!important;
         }
     }
+
+    .time-display {
+        background: #232323;
+        color: white;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        height: 100%;
+        border: 1px solid white;
+        max-height: 100%;
+        overflow: hidden;
+        .time-display-anchor{
+            padding-left: .3rem;
+            padding-right: .3rem;
+            max-width: 2rem;
+        }
+        .time-display-value{
+            max-width: 0e-6;
+            transition: all .5s ease;
+            padding: 0;
+            display: flex;
+        flex-flow: row nowrap;
+
+            align-items: center;
+        justify-content: center;
+        opacity: 0;
+        }
+        &:hover{
+            .time-display-value{
+                max-width: 100%;
+            padding-left: 1rem;
+        padding-right: 1rem;
+        opacity :1;
+            }
+        }
+
+    }
 }
diff --git a/app/src/components/Nav/NavLayout.scss b/app/src/components/Nav/NavLayout.scss
@@ -1,4 +1,7 @@
 
+.navbar{
+    min-height: 4rem;
+}
 
 .navbar:not([class*=is-]) .navbar-burger span
 {