From ea09969e09ffd50eb7e917ef3daee47185f3ec77 Mon Sep 17 00:00:00 2001
From: agbilotia1998 <iit2016508@iiita.ac.in>
Date: Sun, 20 May 2018 06:58:15 +0530
Subject: [PATCH] Adds feature to view slides of the session

---
 src/backend/_scss/application.scss | 23 +++++++++-------
 src/backend/fold_v2.js             |  1 +
 src/backend/templates/rooms.hbs    | 42 ++++++++++++++++++++---------
 src/backend/templates/schedule.hbs | 42 +++++++++++++++++++----------
 src/backend/templates/session.hbs  |  4 +++
 src/backend/templates/tracks.hbs   | 43 ++++++++++++++++++++----------
 6 files changed, 105 insertions(+), 50 deletions(-)

diff --git a/src/backend/_scss/application.scss b/src/backend/_scss/application.scss
index 383b63d53..752f7e409 100644
--- a/src/backend/_scss/application.scss
+++ b/src/backend/_scss/application.scss
@@ -225,11 +225,18 @@ a {
 }
 
 @media (min-width: 600px) {
-  .video-iframe {
+  .video-iframe,
+  .iframe {
     height: 370px;
   }
 }
 
+@media (max-width: 600px) {
+  .iframe {
+    height: 250px;
+  }
+}
+
 @media (min-width: 768px) {
   #day-menu {
     .dropdown-menu {
@@ -1624,13 +1631,15 @@ a {
   }
 }
 
-.bookmark {
+.features {
   @include cursorpointer;
-  padding: 5px;
+  padding: 2px;
   position: absolute;
   right: 0;
   top: 0;
+}
 
+.bookmark {
   &.starred {
     color: black;
   }
@@ -2187,11 +2196,7 @@ a.skip:hover {
   overflow-y: auto;
 }
 
-.video {
-  @include cursorpointer;
-  padding: 5px;
-  position: absolute;
-  right: 23px;
-  top: 1px;
+.video,
+.slides {
   color: $black;
 }
diff --git a/src/backend/fold_v2.js b/src/backend/fold_v2.js
index 8b3819857..f1a55e660 100644
--- a/src/backend/fold_v2.js
+++ b/src/backend/fold_v2.js
@@ -786,6 +786,7 @@ function foldByRooms(room, sessions, speakers, trackInfo) {
       session_id: session.id,
       audio:session['audio-url'],
       video: (checkNullHtml(session['video-url'])) ? '' : session['video-url'].split('=')[1],
+      slides: session['slides-url'],
       speakers_list: session.speakers.map((speaker) => {
         let spkr = speakersMap.get(speaker.id);
         if(spkr['photo-url']){
diff --git a/src/backend/templates/rooms.hbs b/src/backend/templates/rooms.hbs
index 0379d66ec..12f136b63 100644
--- a/src/backend/templates/rooms.hbs
+++ b/src/backend/templates/rooms.hbs
@@ -123,18 +123,24 @@
                               {{#if ../../../mode}}
                                 <div class="sizeevent event event-title" id="title-{{session_id}}" style="background-color: {{color}}; color:{{font_color}};">
                               {{else}}
-                                <div class="sizeevent event event-title" onclick = "loadVideo('{{session_id}}', '{{video}}')" id="title-{{session_id}}" style="background-color: {{color}}; color:{{font_color}};" data-toggle="collapse" data-target="#desc-{{session_id}}, #desc2-{{session_id}}">
+                                <div class="sizeevent event event-title" onclick = "loadVideoAndSlides('{{session_id}}', '{{video}}', '{{slides}}')" id="title-{{session_id}}" style="background-color: {{color}}; color:{{font_color}};" data-toggle="collapse" data-target="#desc-{{session_id}}, #desc2-{{session_id}}">
                               {{/if}}
+                                <div class = "features">
+                                  {{#if slides}}
+                                    <i class="fa fa-file-powerpoint-o slides" aria-hidden="true"></i>
+                                  {{/if}}
+                                  {{#if audio}}
+                                    <i class="fa fa-music" aria-hidden="true"></i>
+                                  {{/if}}
+                                  {{#if video}}
+                                    <i class="fa fa-video-camera video" aria-hidden="true"></i>
+                                  {{/if}}
+                                  <a class = "bookmark" id = "c{{session_id}}" >
+                                      <i class="fa fa-star" aria-hidden="true">
+                                      </i>
+                                  </a>
+                                </div>
                                 <div class="margin-down-15">{{title}}</div>
-                                <a class = "bookmark" id="b{{session_id}}">
-                                  <i class="fa fa-star" aria-hidden="true" ></i>
-                                </a>
-                                {{#if audio}}
-                                  <i class="fa fa-music" aria-hidden="true"></i>
-                                {{/if}}
-                                {{#if video}}
-                                  <i class="fa fa-video-camera video" aria-hidden="true"></i>
-                                {{/if}}
                                 <div id="desc2-{{session_id}}" class="collapse in"
                                   style="background-color:{{{color}}}; color: {{{font_color}}};">
                                   <div class="row">
@@ -842,14 +848,24 @@
         initPage();
       });
 
-      function loadVideo(div, videoURL){
+      function loadVideoAndSlides(div, videoURL, slideURL){
         if(videoURL !== null && videoURL !== '') {
           let isVideoDisplayed = $('#desc-' + div).hasClass('in');
           if (!isVideoDisplayed) {
-            $('#desc-' + div).children('div').prepend('<iframe id = "' + videoURL + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>')
+            $('#desc-' + div).children('div').prepend('<iframe id = "video-' + div + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>')
+          }
+          else {
+            $('#video-' + div).remove();
+          }
+        }
+
+        if(slideURL !== null && slideURL !== '') {
+          let isSlideDisplayed = $('#desc-' + div).hasClass('in');
+          if (!isSlideDisplayed) {
+            $('#desc-' + div).children('div').prepend('<iframe id = "slide-' + div + '" class = "iframe col-xs-12 col-sm-12 col-md-12" frameborder="0" src="https://view.officeapps.live.com/op/embed.aspx?src=' + slideURL  +'"></iframe>');
           }
           else {
-            $('#' + videoURL).remove();
+            $('#slide-' + div).remove();
           }
         }
       }
diff --git a/src/backend/templates/schedule.hbs b/src/backend/templates/schedule.hbs
index 264343c9d..3037cd51a 100644
--- a/src/backend/templates/schedule.hbs
+++ b/src/backend/templates/schedule.hbs
@@ -120,7 +120,7 @@
 
               <div class="tracks col-xs-10 col-sm-10 col-md-10">
                 {{#sessions}}
-                <div class="schedule-track" id="{{session_id}}" onclick = "loadVideo('{{session_id}}', '{{video}}')">
+                <div class="schedule-track" id="{{session_id}}" onclick = "loadVideoAndSlides('{{session_id}}', '{{video}}', '{{slides}}')">
                   <a class="anchor" id="s-{{session_id}}"></a>
                   <div class="schedule-container">
                     <div class="padding-right-zero">
@@ -134,17 +134,22 @@
                           aria-expanded="false"
                           aria-controls="desc-{{session_id}}">
                       {{/if}}
+                        <div class = "features">
+                          {{#if slides}}
+                              <i class="fa fa-file-powerpoint-o slides" aria-hidden="true"></i>
+                          {{/if}}
+                          {{#if audio}}
+                            <i class="fa fa-music" aria-hidden="true"></i>
+                          {{/if}}
+                          {{#if video}}
+                            <i class="fa fa-video-camera video" aria-hidden="true"></i>
+                          {{/if}}
+                          <a class = "bookmark" id = "c{{session_id}}" >
+                            <i class="fa fa-star" aria-hidden="true">
+                            </i>
+                          </a>
+                        </div>
                         {{title}}
-                        {{#if audio}}
-                          <i class="fa fa-music" aria-hidden="true"></i>
-                        {{/if}}
-                        {{#if video}}
-                          <i class="fa fa-video-camera video" aria-hidden="true"></i>
-                        {{/if}}
-                        <a class = "bookmark" id = "c{{session_id}}" >
-                          <i class="fa fa-star" aria-hidden="true">
-                          </i>
-                        </a>
                       </h4>
                       <div id="desc-{{session_id}}" class="collapse">
                         {{{description}}}
@@ -1255,14 +1260,23 @@
       initPage();
     });
 
-    function loadVideo(div, videoURL){
+    function loadVideoAndSlides(div, videoURL, slideURL){
       if(videoURL !== null && videoURL !== '') {
         let isVideoDisplayed = $('#desc-' + div).hasClass('in');
         if (!isVideoDisplayed) {
-          $('#desc-' + div).children('div').prepend('<iframe id = "' + videoURL + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>')
+          $('#desc-' + div).children('div').prepend('<iframe id = "video-' + div + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>');
+        }
+        else {
+          $('#video-' + div).remove();
+        }
+      }
+      if(slideURL !== null && slideURL !== '') {
+        let isSlideDisplayed = $('#desc-' + div).hasClass('in');
+        if (!isSlideDisplayed) {
+          $('#desc-' + div).children('div').prepend('<iframe id = "slide-' + div + '" class = "iframe col-xs-12 col-sm-12 col-md-12" frameborder="0" src="https://view.officeapps.live.com/op/embed.aspx?src=' + slideURL  +'"></iframe>');
         }
         else {
-          $('#' + videoURL).remove();
+          $('#slide-' + div).remove();
         }
       }
     }
diff --git a/src/backend/templates/session.hbs b/src/backend/templates/session.hbs
index 0dc630839..4a6bd82c3 100644
--- a/src/backend/templates/session.hbs
+++ b/src/backend/templates/session.hbs
@@ -67,6 +67,10 @@
                     <source src="{{ audio }}">
                   </audio>
                 {{/if}}
+                {{#if slides}}
+                  <iframe id = "slide" class = "iframe col-xs-12 col-sm-12 col-md-12" frameborder="0" src="https://view.officeapps.live.com/op/embed.aspx?src={{slides}}">
+                  </iframe>
+                {{/if}}
                 {{#if video}}
                   <iframe id = "video" class = "video-iframe col-xs-12 col-sm-12 col-md-12"  src="https://www.youtube.com/embed/{{video}}">
                   </iframe>
diff --git a/src/backend/templates/tracks.hbs b/src/backend/templates/tracks.hbs
index 4eb698003..30dce6e96 100644
--- a/src/backend/templates/tracks.hbs
+++ b/src/backend/templates/tracks.hbs
@@ -127,19 +127,24 @@
                             {{#if ../../../mode}}
                               <div class="sizeevent event event-title" id="title-{{session_id}}"  style="background-color: {{../color}}; color:{{../font_color}};">
                             {{else}}
-                              <div class="sizeevent event event-title" onclick = "loadVideo('{{session_id}}', '{{video}}')" id="title-{{session_id}}"  style="background-color: {{../color}}; color:{{../font_color}};" data-toggle="collapse" data-target="#desc-{{session_id}}, #desc2-{{session_id}} ">
+                              <div class="sizeevent event event-title" onclick = "loadVideoAndSlides('{{session_id}}', '{{video}}', '{{slides}}')" id="title-{{session_id}}"  style="background-color: {{../color}}; color:{{../font_color}};" data-toggle="collapse" data-target="#desc-{{session_id}}, #desc2-{{session_id}} ">
                             {{/if}}
-                              <div class="margin-down-15">{{title}}</div>
-                              <a class="bookmark" id="b{{session_id}}">
-                                <i class="fa fa-star" aria-hidden="true">
-                                </i>
-                              </a>
-                              {{#if audio}}
-                                <i class="fa fa-music" aria-hidden="true"></i>
-                              {{/if}}
-                              {{#if video}}
+                              <div class = "features">
+                                {{#if slides}}
+                                  <i class="fa fa-file-powerpoint-o slides" aria-hidden="true"></i>
+                                {{/if}}
+                                {{#if audio}}
+                                  <i class="fa fa-music" aria-hidden="true"></i>
+                                {{/if}}
+                                {{#if video}}
                                   <i class="fa fa-video-camera video" aria-hidden="true"></i>
-                              {{/if}}
+                                {{/if}}
+                                <a class = "bookmark" id = "c{{session_id}}" >
+                                  <i class="fa fa-star" aria-hidden="true">
+                                  </i>
+                                </a>
+                              </div>
+                              <div class="margin-down-15">{{title}}</div>
                               <div id="desc2-{{session_id}}" class="collapse in"
                                 style="background-color: {{../color}}; color: {{../font_color}};">
                                 <div class="row">
@@ -829,14 +834,24 @@
         initPage();
       });
 
-      function loadVideo(div, videoURL){
+      function loadVideoAndSlides(div, videoURL, slideURL){
         if(videoURL !== null && videoURL !== '') {
           let isVideoDisplayed = $('#desc-' + div).hasClass('in');
           if (!isVideoDisplayed) {
-            $('#desc-' + div).children('div').prepend('<iframe id = "' + videoURL + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>')
+            $('#desc-' + div).children('div').prepend('<iframe id = "video-' + div + '" class = "video-iframe col-xs-12 col-sm-12 col-md-12" src="https://www.youtube.com/embed/' + videoURL + '"></iframe>');
+          }
+          else {
+            $('#video-' + div).remove();
+          }
+        }
+
+        if(slideURL !== null && slideURL !== '') {
+          let isSlideDisplayed = $('#desc-' + div).hasClass('in');
+          if (!isSlideDisplayed) {
+            $('#desc-' + div).children('div').prepend('<iframe id = "slide-' + div + '" class = "iframe col-xs-12 col-sm-12 col-md-12" frameborder="0" src="https://view.officeapps.live.com/op/embed.aspx?src=' + slideURL  +'"></iframe>');
           }
           else {
-            $('#' + videoURL).remove();
+            $('#slide-' + div).remove();
           }
         }
       }