fix: show featured event into main area

Leonardo Merlin
1 parent 4d6ba201
Showing 3 changed files with 24 additions and 9 deletions Show diff stats
src/app/pages/inicio/inicio.controller.js
src/app/pages/inicio/inicio.html
src/app/pages/inicio/inicio.scss
@@ -79,7 +79,7 @@
     vm.DialogaService.getEvents().then(function(data) {
       vm.$log.debug('getEvents.success', data);
       vm.events = data.articles;
-
+      vm.featuredEvent = vm.events[0];
     }, function(error) {
       vm.$log.debug('Error on getEvents.', error);
       vm.eventsError = error;
@@ -165,6 +165,15 @@
     vm.article.videoIsLoaded = true;
   };
+  InicioPageController.prototype.showEventVideo = function() {
+    var vm = this;
+
+    hideBackground(0); // force to hide
+
+    vm.featuredEvent.canView = true;
+    vm.featuredEvent.bodyTrusted = vm.$sce.trustAsHtml(vm.featuredEvent.body);
+  };
+
   InicioPageController.prototype.submitSearch = function() {
     var vm = this;
@@ -5,7 +5,12 @@
         <div class="col-md-8" ng-class="{'col-md-offset-2': !pageInicio.featuredEvent}">
           <div class="video-player js-youtube">
             <div class="embed-responsive embed-responsive-16by9">
-              <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
+              <div ng-if="!pageInicio.featuredEvent || !pageInicio.featuredEvent.canView">
+                <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
+              </div>
+              <div ng-if="pageInicio.featuredEvent && pageInicio.featuredEvent.canView">
+                <div class="js-iframe" ng-bind-html="pageInicio.featuredEvent.bodyTrusted"></div>
+              </div>
               <div class="video-background" ng-click="pageInicio.showVideo()">
                 <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>
                 <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">
@@ -22,15 +27,16 @@
                 <h2 class="box-title">Bate papo com <b>MINISTROS/AS</b></h2>
               </div>
               <div class="box-middle col-xs-12 col-sm-4 col-md-12">
-                <div class="video" style="background-image: url(/assets/images/event-video-area.png)">
+                <div class="video"
+                ng-style="{'background-image': 'url(' + pageInicio.featuredEvent.image.url + ')'}"
+                ng-click="pageInicio.showEventVideo()"
+                >
                 </div>
               </div>
               <div class="box-bottom col-xs-12 col-sm-4 col-md-12">
-                <div class="date">DD/MM/YYYY</div>
+                <div class="date">{{pageInicio.featuredEvent.start_date | date : "dd/MM/yyyy"}}</div>
                 <div class="live">AO VIVO</div>
-                <p>
-                  Lorem ipsum dolor sit amet, mei at facete constituto partiendo et.
-                </p>
+                <div class="description" ng-bind-html="pageInicio.featuredEvent.abstract"></div>
               </div>
               <div class="clearfix"></div>
             </div>
@@ -53,9 +53,9 @@
             padding: 0;
             .video {
+                cursor: pointer;
                 width: 100%;
                 min-height: 125px;
-                background-color: #4A4A0E;
                 background-size: cover;
                 background-position: center;
             }
@@ -84,7 +84,7 @@
                 border-radius: 20px;
             }
-            p { padding: 10px 0;}
+            .description { padding: 10px 0;}
         }
         @media screen and (min-width: $screen-lg) {