Normalize and fix paths to mp3, Images cleanup

imports/helpers.js

@@ -0,0 +1,7 @@
+export function normalizeString (string) {
+  return
+}
+
+export function normalizeStringToURLPath (string) {
+  return string.replace(/\.mp3/g, "").replace(/[^\x00-\x7F]/g, "_").replace(/\.|\//gi, '').replace(/^\s+|\s+$/gm, '').toLowerCase().replace(/ /g, "_").concat('.mp3');
+}

imports/startup/server/fileRoutes.js

@@ -12,6 +12,7 @@ Picker.route('/images/tmp/:filename', function (params, request, response, next)
     response.end(data)
   } catch (err) {
     if (err.code === 'ENOENT') {
+      console.log("_______ filePath", filePath);
       console.log('File not found! filename:', params.filename)
     } else {
       console.log('batman: error', error)

imports/ui/MusicMap/Markers.js

@@ -9,10 +9,10 @@ export const Markers = (props) => {
       enableRetinaIcons
       gridSize={10}
       zoomOnClick={false}
-      imagePath='img/resize/cluster'
+      imagePath='/img/cluster'
       styles={[{
         textColor: '#313131',
-        url: 'img/resize/cluster1.png',
+        url: '/img/cluster1.png',
         height: 50,
         width: 50
       }]}

imports/ui/components/Legend/index.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react'
+import Paper from 'material-ui/Paper'
+
+export class LegendElement extends Component {
+  render () {
+    const style = {
+      height: 32,
+      width: 32,
+      padding: 2,
+      textAlign: 'center',
+      color: 'white',
+      boxShadow: 'black 0px 0px 0px 1px,white 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 19px 60px, rgba(0, 0, 0, 0.22) 0px 15px 20px'
+    }
+
+    return (
+      <div style={{zIndex: 2, color: 'white', marginRight: '5px'}}>
+        <Paper style={style} zDepth={5} circle ><img src={this.props.image} width='24px' /></Paper>
+        <div style={{marginTop: '15px', marginRight: '8px', marginLeft: '5px'}}>{this.props.name}</div>
+      </div>
+    )
+  }
+}
+
+export default LegendElement

imports/ui/components/common/PlaceMarker.js

@@ -22,7 +22,7 @@ export default class PlaceMarker extends Component {
   getIconForMedia (record) {
     const iconMap = {
       youtubeVideo: '/img/youtube.svg',
-      mp3: '/img/resize/record.png'
+      mp3: '/img/record.png'
     }
     return iconMap[record.mediaType] || iconMap['mp3']
   }
@@ -33,9 +33,11 @@ export default class PlaceMarker extends Component {
       club: '/img/disco-ball.svg',
       outdoorHall: '/img/outdoorHall.png',
       pub: '/img/cafe.png',
-      tv: '/img/resize/tv.png',
-      radio: '/img/resize/radio.png',
-      culture: '/img/resize/culture.png'
+      tv: '/img/tv.png',
+      radio: '/img/radio.png',
+      theatre: '/img/theatre.png',
+      philharmonia: '/img/piano.png',
+      culture: '/img/culture.png'
     }
     return iconMap[place.type] || iconMap['culture']
   }

imports/ui/components/dialogs/AddMediaDialog.js

@@ -9,6 +9,7 @@ import MenuItem from 'material-ui/MenuItem'
 import {Events} from '../../../api/events.js'
 import TextInput from '../common/TextInput'
 import PlaceSelect from '../common/PlaceSelect'
+import { normalizeStringToURLPath } from "../../../helpers";
 
 export default class AddMediaDialog extends React.Component {
   state = {
@@ -41,14 +42,13 @@ export default class AddMediaDialog extends React.Component {
       mediaObject.videoId = this.state.videoLink.replace(/http.*watch.*=/gi, '')
     }
 
-    Meteor.call('addMedia', mediaObject)
-
     if (this.state.mediaType === 'mp3' && this.state.mp3 && this.state.uploadedFile) {
-      mediaObject.mp3 = this.state.mp3
-      mediaObject.filename = this.state.filename
-      Meteor.call('uploadMp3File', this.state.mp3.name, this.state.uploadedFile)
+      const normalizedFileName = normalizeStringToURLPath(this.state.mp3.name)
+      mediaObject.filename = normalizedFileName
+      Meteor.call('uploadMp3File', normalizedFileName, this.state.uploadedFile)
     }
 
+    Meteor.call('addMedia', mediaObject)
     this.handleClose()
     // TODO get rid of this reload by utilizing createContainer properly
     // location.reload()

imports/ui/components/dialogs/MapVideoDialog.js

@@ -30,7 +30,6 @@ export const MapVideoDialog = (props) => {
       repositionOnUpdate={false}
       autoScrollBodyContent
     >
-      <h1>{video.name}</h1>
       {video.youtubeId
         ? <YouTube key={video._id} videoId={video.youtubeId} opts={opts} />
         : 'Coś poszło nie tak...'

imports/ui/components/dialogs/Mp3Dialog.js

@@ -19,14 +19,15 @@ export const Mp3Dialog = (props) => {
     repositionOnUpdate={false}
     autoScrollBodyContent
   >
-    <strong>Opis:&nbsp;</strong>
-    <span>{props.media.description || 'brak'}</span>
-    <br />
-    <br />
-
     <audio controls>
       <source src={`/images/tmp/${props.media.filename}`} type='audio/mp3' />
           Your browser does not support the audio element.
     </audio>
+
+    <br />
+    <br />
+
+    <strong>Opis:&nbsp;</strong>
+    <span>{props.media.description || 'brak'}</span>
   </Dialog>
 }

imports/ui/components/dialogs/PlaceDialog.js

@@ -62,6 +62,6 @@ const SocialIcons = (props) => {
 
 const PlaceIcon = (props) => {
   return <a href={props.href} target='_blank' style={{marginLeft: 10}}>
-    <img src={`/img/resize/${props.icon}.png`} width='32px' />
+    <img src={`/img/${props.icon}.png`} width='32px' />
   </a>
 }