diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1587c9..ba52438 100644
--- 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
index 48180f0..a25ff0c 100644
--- a/app/electronIndex.html
+++ b/app/electronIndex.html
@@ -31,22 +31,22 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
@@ -60,11 +60,11 @@
-
{
places.map( ( place, index ) => {
const onClick = () => addPlaylistBuilder( 'place', place );
return (
-
+ anchor={ [ place.location.latitude, place.location.longitude ] }
+ >
+
+
);
} )
}
-
+
diff --git a/app/src/components/LocationPicker/LocationPicker.js b/app/src/components/LocationPicker/LocationPicker.js
index 6754c96..53978fb 100644
--- 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 &&
-
{
location &&
location.latitude &&
location.latitude !== latitude &&
location.longitude !== longitude &&
-
+
+
+
+
}
-
-
+
+
+
+
}
diff --git a/app/src/components/MediaEditor/MediaEditor.js b/app/src/components/MediaEditor/MediaEditor.js
index fe24725..4d91cd0 100644
--- a/app/src/components/MediaEditor/MediaEditor.js
+++ b/app/src/components/MediaEditor/MediaEditor.js
@@ -58,22 +58,38 @@ 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 */
}
@@ -81,7 +97,7 @@ export default class MediaEditor extends Component {
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
index 506fa12..bcecb5c 100644
--- 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 {
>
+
+
diff --git a/app/src/components/MontagePlayer/MontagePlayer.scss b/app/src/components/MontagePlayer/MontagePlayer.scss
index 9931e6d..6bc6e53 100644
--- 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
index 67abf99..385ac7a 100644
--- 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
{
diff --git a/app/src/components/Railway/Railway.js b/app/src/components/Railway/Railway.js
index 2b080ca..a6d3db7 100644
--- a/app/src/components/Railway/Railway.js
+++ b/app/src/components/Railway/Railway.js
@@ -1,10 +1,18 @@
import React, { Component } from 'react';
import {
getEventRelativePosition,
+ abbrev,
} from '../../helpers/utils';
+import CommonMark from 'commonmark';
+
+const reader = new CommonMark.Parser();
+const writer = new CommonMark.HtmlRenderer();
+
import './Railway.scss';
+import Tooltip from 'react-tooltip';
+
export default class Railway extends Component {
constructor ( props ) {
@@ -13,6 +21,7 @@ export default class Railway extends Component {
dragStart: undefined,
dragPosition: undefined,
dragOnLift: undefined,
+ tooltipContent: undefined,
};
}
@@ -27,8 +36,13 @@ export default class Railway extends Component {
onDrag,
onDragEnd,
selectedChunkId,
+ enableTooltip = false,
} = this.props;
+ const {
+ tooltipContent
+ } = this.state;
+
const silentEvent = ( e ) => {
e.stopPropagation();
e.preventDefault();
@@ -76,6 +90,28 @@ export default class Railway extends Component {
const onMouseMove = ( e ) => {
silentEvent( e );
+ if (enableTooltip) {
+ const { x, y, rect } = getEventRelativePosition( e, 'dicto-Railway' );
+ const h = orientation === 'vertical' ? rect.height : rect.width;
+ const position = orientation === 'vertical' ? y : x;
+ const thatRatio = position / h;
+ const realPosition = mediaDuration * thatRatio;
+ const hoveredChunk = chunks.find(thatChunk => thatChunk.start < realPosition && thatChunk.end > realPosition);
+ if (hoveredChunk) {
+ const tooltipFieldId = hoveredChunk.activeFieldId;
+ let newTooltipContent = hoveredChunk.chunk && hoveredChunk.chunk.fields[tooltipFieldId];
+ newTooltipContent = newTooltipContent && abbrev(newTooltipContent.split('\n')[0], 100);
+ newTooltipContent = newTooltipContent && writer.render(reader.parse(newTooltipContent));
+ if (newTooltipContent !== tooltipContent) {
+ this.setState({
+ tooltipContent: newTooltipContent
+ });
+ this.tooltip.tooltipRef.innerHTML = newTooltipContent;
+ Tooltip.rebuild();
+ }
+ }
+ }
+
if ( typeof onDrag === 'function' && this.state.mouseDown && !this.state.dragStart ) {
setStartDrag( e );
}
@@ -204,6 +240,10 @@ export default class Railway extends Component {
return railwayStyle;
};
+ const bindTooltip = tooltip => {
+ this.tooltip = tooltip;
+ }
+
const timeMarkPosition = `${( mediaCurrentTime / mediaDuration ) * 100 }%`;
return (
@@ -214,6 +254,9 @@ export default class Railway extends Component {
onMouseMove={ onMouseMove }
onWheel={ onMouseWheel }
onMouseLeave={ onMouseLeave }
+ data-tip={tooltipContent}
+ data-for="railway-tooltip"
+ data-html={true}
>
{
chunks.map( ( chunk, index ) => {
@@ -247,6 +290,7 @@ export default class Railway extends Component {
left: orientation === 'horizontal' ? timeMarkPosition : undefined,
} }
/>
+
);
}
diff --git a/app/src/features/ChunksEdition/components/ChunksEditionLayout.js b/app/src/features/ChunksEdition/components/ChunksEditionLayout.js
index 72280e9..2b823cd 100644
--- a/app/src/features/ChunksEdition/components/ChunksEditionLayout.js
+++ b/app/src/features/ChunksEdition/components/ChunksEditionLayout.js
@@ -183,6 +183,7 @@ export class ChunksEditionLayout extends Component {
updateChunk,
deleteChunk,
+ deleteChunks,
createTag,
updateTag,
@@ -716,7 +717,27 @@ export class ChunksEditionLayout extends Component {
};
const onDeleteAllChunks = () => {
deselectChunk();
- setTimeout( () => chunks.forEach( ( chunk ) => deleteChunk( corpus.metadata.id, chunk.metadata.id ) ) );
+ setTimeout( () => {
+ const chunksIds = chunks.map( ( thatChunk ) => thatChunk.metadata.id );
+ console.log( 'chunks ids', chunksIds );
+ deleteChunks( corpus.metadata.id, chunksIds );
+
+ /*
+ * chunks.reduce( ( curr, chunk ) => {
+ * return curr.then(() =>
+ * new Promise((resolve, reject) => {
+ * deleteChunk( corpus.metadata.id, chunk.metadata.id, err => {
+ * console.log('in callback');
+ * if (err) {
+ * reject();
+ * } else resolve()
+ * } )
+ * })
+ * );
+ */
+
+ // }, Promise.resolve() )
+ } );
};
const onPromptActiveMediaEdition = () => promptMediaEdition( corpusId, activeMedia.metadata.id, activeMedia );
@@ -825,7 +846,16 @@ export class ChunksEditionLayout extends Component {
importantOperations={ [] }
/>