Merge tag '2.23.0' into geotrek_UX_dev_mid_2018

Author: Gaël UTARD

CHANGES.md

@@ -1,3 +1,10 @@
+2.23.0-ux / 2020-03-05
+======================
+
+**Enhancements**
+
+* Show media on detail page
+
 2.22.1-ux / 2020-02-07
 ======================
 

README.md

@@ -12,7 +12,7 @@ _See [Prerequisites](docs/README.md#Prerequisites)._
 - Geotrek-Rando v2 can synchronize only with Geotrek-Admin v2
 - Ubuntu 14.04
 
-### Syncronization
+### Synchronization
 
 _See [Synchronize data](docs/data-sync.md)._
 

npm-shrinkwrap.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrekrando",
-  "version": "2.22.1-ux",
+  "version": "2.23.0-ux",
   "description": "Geotrek rando public portal of Geotrek",
   "author": "Makina Corpus",
   "main": "src/app/app.js",

package.json

@@ -9,6 +9,7 @@ var dependencies = [
     'rando.commons',
     'rando.treks',
     'rando.sensitive',
+    'rando.media',
     'rando.pois',
     'rando.services',
     'rando.items',
@@ -101,6 +102,7 @@ require('./layout');
 require('./loader');
 require('./treks');
 require('./sensitive');
+require('./media');
 require('./pois');
 require('./services');
 require('./items-list');

src/app/app.js

@@ -68,6 +68,18 @@ function DetailController($scope, $rootScope, $state, $q, $modal, $timeout, $sta
         });
     };
 
+    $scope.openPlayer = function openPlayer (media) {
+        $modal.open({
+            template: require('../media/templates/media-modal.html'),
+            controller: 'MediaController',
+            resolve: {
+                media: function () {
+                    return media;
+                }
+            }
+        });
+    };
+
     // function switchInterestsNodes() {
     //     if (document.querySelector('.main-infos .interests') && window.matchMedia("(min-width: 769px)").matches) {
     //         document.querySelector('.detail-map').appendChild(document.querySelector('.main-infos .interests'));
@@ -438,6 +450,7 @@ function DetailController($scope, $rootScope, $state, $q, $modal, $timeout, $sta
 
                     getInterests(result, forceRefresh);
                     $rootScope.$emit('initGallery', result.properties.pictures);
+                    $rootScope.$emit('initMedia', result.properties.videos);
                     $scope.result.informations = detailService.hasInfos(result.properties, 'duration_pretty', 'duration', 'difficulty.label', 'levels', 'route', 'ascent', 'depth', 'networks', 'target_audience');
                     $rootScope.$emit('detailUpdated', forceRefresh);
                 },
@@ -473,6 +486,7 @@ function DetailController($scope, $rootScope, $state, $q, $modal, $timeout, $sta
 
 }
 
+
 module.exports = {
     DetailController: DetailController
 };

src/app/detail/controllers.js

@@ -33,6 +33,14 @@ function detailContentPictures() {
     };
 }
 
+function detailContentMedia() {
+    return {
+        restrict: 'E',
+        replace: true,
+        template: require('./templates/detail-content-media.html')
+    };
+}
+
 function detailContentElevation() {
     return {
         restrict: 'E',
@@ -94,6 +102,7 @@ module.exports = {
     detailContent:           detailContent,
     detailContentMeta:       detailContentMeta,
     detailContentPictures:   detailContentPictures,
+    detailContentMedia:      detailContentMedia,
     detailContentFromTo:     detailContentFromTo,
     detailContentEventsInfo: detailContentEventsInfo,
     detailContentElevation:  detailContentElevation,

src/app/detail/directives.js

@@ -6,6 +6,7 @@ angular.module('rando.detail', ['ui.bootstrap'])
     .directive('detailContent', require('./directives').detailContent)
     .directive('detailContentMeta', require('./directives').detailContentMeta)
     .directive('detailContentPictures', require('./directives').detailContentPictures)
+    .directive('detailContentMedia', require('./directives').detailContentMedia)
     .directive('detailContentFromTo', require('./directives').detailContentFromTo)
     .directive('detailContentEventsInfo', require('./directives').detailContentEventsInfo)
     .directive('detailContentElevation', require('./directives').detailContentElevation)

src/app/detail/index.js

@@ -454,6 +454,16 @@
     }
 }
 
+.detail-content-medias {
+    margin: 1.5em 2rem 0 2rem;
+    h3 {
+        margin-bottom: .5em;
+    }
+    a {
+        color: $secondary-color;
+    }
+}
+
 .detail-content-elevation {
 
     margin: 1.5em 2rem 0 2rem;

src/app/detail/styles/_detail-content.scss

@@ -0,0 +1,19 @@
+<div class="medias detail-content-medias" ng-if="result.properties.videos[0]">
+    <h3>Media</h3>
+    <ul class="medias-liste">
+        <li ng-repeat="media in result.properties.videos track by $index"
+            class="detail-media media"
+            ng-class="{video: media.backend === 'Youtube' || media.backend === 'Vimeo', audio: media.backend === 'SoundCloud'}">
+            <a href class="detail-media-link primary-hover-c" ng-click="openPlayer(media)" title="{{::media.legend}}">
+                <i ng-if="media.backend === 'Youtube' || media.backend === 'Vimeo'" class="fa fa-file-video-o"></i>
+                <i ng-if="media.backend === 'SoundCloud'" class="fa fa-file-audio-o"></i>
+                <span>{{::media.legend}}</span>
+            </a>
+        </li>
+        <li ng-repeat="file in result.properties.files track by $index" class="detail-media media file">
+            <a href="{{::file.url}}" title="{{::file.legend}}" class="detail-media-link primary-hover-c">
+                <i class="fa fa-file-o"></i> {{::file.legend}}
+            </a>
+        </li>
+    </ul>
+</div>