Merge tag '2.23.0' into geotrek_UX_dev_mid_2018

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)._
 

package.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",

src/app/app.js

@@ -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/detail/controllers.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/directives.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/index.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/styles/_detail-content.scss

@@ -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/templates/detail-content-media.html

@@ -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>

src/app/detail/templates/detail-content.html

@@ -129,6 +129,8 @@ <h3>{{ 'SOURCE' | translate}}</h3>
         </div>
     </div>
 
+    <detail-content-media></detail-content-media>
+
     <div class="detail-content-further going-further" ng-if="result.properties.web_links[0]">
         <h3>{{ 'KNOW_MORE' | translate}}</h3>
         <ul ng-if="result.properties.web_links[0]" class="websites">

src/app/media/controllers.js

@@ -0,0 +1,28 @@
+'use strict';
+
+function MediaController(media, $scope, $timeout, $modalInstance) {
+
+    function initPlayer() {
+        var player = document.createElement('iframe');
+        player.width = '100%';
+        player.height = '100%';
+        player.frameborder = '0';
+        player.setAttribute('allowfullscreen', '');
+        player.setAttribute('webkitallowfullscreen', '');
+        player.setAttribute('mozallowfullscreen', '');
+        player.src = media.url;
+        document.querySelector('#media-player').appendChild(player);
+
+    }
+
+    $scope.close = function close () {
+        $modalInstance.dismiss('close');
+    };
+
+    $timeout(initPlayer, 500);
+
+}
+
+module.exports = {
+    MediaController: MediaController
+};

src/app/media/directives.js

@@ -0,0 +1,15 @@
+'use strict';
+
+function mediaPlayer() {
+    return {
+        restrict: 'E',
+        replace: true,
+        scope: true,
+        template: require('./templates/media-modal.html'),
+        controller: 'MediaController'
+    };
+}
+
+module.exports = {
+    mediaPlayer: mediaPlayer
+};

src/app/media/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+angular.module('rando.media', [])
+    .controller('MediaController', require('./controllers').MediaController)
+    .directive('mediaPlayer', require('./directives').mediaPlayer);

src/app/media/styles/_media-player.scss

@@ -0,0 +1,10 @@
+#media-player {
+    width: 100%;
+    height: 100%;
+}
+
+.medias-liste {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

src/app/media/templates/media-modal.html

@@ -0,0 +1,5 @@
+<div class="modal-close-button" ng-click="close()">
+    <i class="fa fa-times"></i>
+</div>
+<div id="media-player">
+</div>

src/app/pois/controllers.js

@@ -96,7 +96,7 @@ function PoisListeController($scope, $rootScope, globalSettings, utilsFactory, $
 
     $scope.openPlayer = function openPlayer (media) {
         $modal.open({
-            template: require('./templates/media-modal.html'),
+            template: require('../media/templates/media-modal.html'),
             controller: 'MediaController',
             resolve: {
                 media: function () {
@@ -114,28 +114,7 @@ function PoisListeController($scope, $rootScope, globalSettings, utilsFactory, $
 
 }
 
-function MediaController(media, $scope, $timeout, $modalInstance) {
-    function initPlayer() {
-        var player = document.createElement('iframe');
-        player.width = '100%';
-        player.height = '100%';
-        player.frameborder = '0';
-        player.setAttribute('allowfullscreen', '');
-        player.setAttribute('webkitallowfullscreen', '');
-        player.setAttribute('mozallowfullscreen', '');
-        player.src = media.url;
-        document.querySelector('#media-player').appendChild(player);
-
-    }
-
-    $scope.close = function close () {
-        $modalInstance.dismiss('close');
-    };
-
-    $timeout(initPlayer, 500);
-}
 
 module.exports = {
-    PoisListeController: PoisListeController,
-    MediaController: MediaController
+    PoisListeController: PoisListeController
 };

src/app/pois/index.js

@@ -3,5 +3,4 @@
 angular.module('rando.pois', [])
     .service('poisService', require('./services').poisService)
     .controller('PoisListeController', require('./controllers').PoisListeController)
-    .controller('MediaController', require('./controllers').MediaController)
     .directive('poisListe', require('./directives').poisListeDirective);

src/app/rando.scss

@@ -101,11 +101,11 @@ a {
 @import "filters/styles/_filters-tags";
 @import "favorites/styles/_favorites";
 @import "map/styles/_map";
+@import "media/styles/_media-player";
 @import "detail/styles/_detail";
 @import "warning/styles/_warning";
 @import "social/styles/_social";
 @import "pois/styles/_poi-liste";
-@import "pois/styles/_media-player";
 @import "items-list/styles/_items-list";
 @import "gallery/styles/_lightbox-gallery";
 @import "home/styles/_home";