SAAS-870: Schedule widget displays shows in wrong timezone

Timezone conversion done in frontend

airtime_mvc/application/common/WidgetHelper.php

@@ -57,88 +57,83 @@ class WidgetHelper
         return $result;
     }
 
-    // Second version of this function.
+    /**
-    // Removing "next" days and creating two weekly arrays
+     * Returns a weeks worth of shows in UTC, and an info array of the current week's days.
-    public static function getWeekInfoV2($timezone)
+     * Returns an array of two arrays:
+     *
+     * The first array is 7 consecutive week days, starting with the current day.
+     *
+     * The second array contains shows scheduled during the 7 week days in the first array.
+     * The shows returned in this array are not in any order and are in UTC.
+     *
+     * We don't do any timezone conversion in this function on purpose. All timezone conversion
+     * and show time ordering should be done on the frontend.
+     *
+     * @return array
+     */
+    public static function getWeekInfoV2()
     {
         $weekStartDateTime = new DateTime("now", new DateTimeZone(Application_Model_Preference::GetTimezone()));
 
-        //$maxNumOFWeeks = 2;
-
         $result = array();
 
-        // default to the station timezone
-        $timezone = Application_Model_Preference::GetDefaultTimezone();
-        $userDefinedTimezone = strtolower($timezone);
-        // if the timezone defined by the user exists, use that
-        if (array_key_exists($userDefinedTimezone, timezone_abbreviations_list())) {
-            $timezone = $userDefinedTimezone;
-        }
         $utcTimezone = new DateTimeZone("UTC");
 
         $weekStartDateTime->setTimezone($utcTimezone);
 
-        // When querying for shows we need the start and end date range to have
+        // Use this variable as the start date/time range when querying
-        // a time of "00:00". $utcDayStart is used below when querying for shows.
+        // for shows. We set it to 1 day prior to the beginning of the
-        $utcDayStartDT = clone $weekStartDateTime;
+        // schedule widget data to account for show date changes when
-        $utcDayStartDT->setTime(0, 0, 0);
+        // converting their start day/time to the client's local timezone.
+        $showQueryDateRangeStart = clone $weekStartDateTime;
+        $showQueryDateRangeStart->sub(new DateInterval("P1D"));
+        $showQueryDateRangeStart->setTime(0, 0, 0);
 
-        $utcDayStart = $utcDayStartDT->format("Y-m-d H:i:s");
-        //$weekCounter = 0;
-        //while ($weekCounter < $maxNumOFWeeks) {
-
-        Logging::info($utcDayStart);
         for ($dayOfWeekCounter = 0; $dayOfWeekCounter < DAYS_PER_WEEK; $dayOfWeekCounter++) {
             $dateParse = date_parse($weekStartDateTime->format("Y-m-d H:i:s"));
 
-            $result["scheduleData"][$weekStartDateTime->getTimestamp()] = array();
+            // Associate data to its date so that when we convert this array
-            $result["scheduleData"][$weekStartDateTime->getTimestamp()]["dayOfMonth"] = $dateParse["day"];
+            // to json the order remains the same - in chronological order.
-            $result["scheduleData"][$weekStartDateTime->getTimestamp()]["dayOfWeek"] = strtoupper(date("D", $weekStartDateTime->getTimestamp()));
+            // We also format the key to be for example: "2015-6-1" to match
+            // javascript date formats so it's easier to sort the shows by day.
+            $result["weekDays"][$weekStartDateTime->format("Y-n-j")] = array();
+            $result["weekDays"][$weekStartDateTime->format("Y-n-j")]["dayOfMonth"] = $dateParse["day"];
+            $result["weekDays"][$weekStartDateTime->format("Y-n-j")]["dayOfWeek"] = strtoupper(date("D", $weekStartDateTime->getTimestamp()));
+
+            // Shows scheduled for this day will get added to this array when
+            // we convert the show times to the client's local timezone in weekly-program.phtml
+            $result["weekDays"][$weekStartDateTime->format("Y-n-j")]["shows"] = array();
+
+            // $weekStartDateTime has to be in station timezone when adding 1 day for daylight savings.
+            // TODO: is this necessary since we set the time to "00:00" ?
+            $stationTimezone = Application_Model_Preference::GetDefaultTimezone();
+            $weekStartDateTime->setTimezone(new DateTimeZone($stationTimezone));
 
-            //have to be in station timezone when adding 1 day for daylight savings.
-            $weekStartDateTime->setTimezone(new DateTimeZone($timezone));
             $weekStartDateTime->add(new DateInterval('P1D'));
 
             //convert back to UTC to get the actual timestamp used for search.
             $weekStartDateTime->setTimezone($utcTimezone);
         }
-        Logging::info($weekStartDateTime->format("Y-m-d H:i:s"));
 
-        // When querying for shows we need the start and end date range to have
+        // Use this variable as the end date/time range when querying
-        // a time of "00:00".
+        // for shows. We set it to 1 day after the end of the schedule
-        /*$utcDayEndDT = clone $weekStartDateTime;
+        // widget data to account for show date changes when converting
-        $utcDayEndDT->setTime(0, 0, 0);
+        // their start day/time to the client's local timezone.
-        $utcDayEnd = $utcDayEndDT->format("Y-m-d H:i:s");
+        $showQueryDateRangeEnd = clone $weekStartDateTime;
-        $shows = Application_Model_Show::getNextShows($utcDayStart, "ALL", $utcDayEnd);
+        $showQueryDateRangeEnd->setTime(23, 59, 0);
-        $utcDayStart = $utcDayEnd;
 
-        // convert to user-defined timezone, or default to station
+        $shows = Application_Model_Show::getNextShows(
-        /*Application_Common_DateHelper::convertTimestampsToTimezone(
+            $showQueryDateRangeStart->format("Y-m-d H:i:s"),
-            $shows,
+            "ALL",
-            array("starts", "ends", "start_timestamp", "end_timestamp"),
+            $showQueryDateRangeEnd->format("Y-m-d H:i:s"));
-            $timezone
-        );*/
-
-
-        /*foreach($shows as &$show) {
-            $startParseDate = date_parse($show['starts']);
-            $show["show_start_hour"] = str_pad($startParseDate["hour"], 2, "0", STR_PAD_LEFT).":".str_pad($startParseDate["minute"], 2, 0, STR_PAD_LEFT);
-
-            $endParseDate = date_parse($show['ends']);
-            $show["show_end_hour"] = str_pad($endParseDate["hour"], 2, 0, STR_PAD_LEFT).":".str_pad($endParseDate["minute"],2, 0, STR_PAD_LEFT);
-        }
-        //$result[$weekCounter][$dayOfWeekCounter]["shows"] = $shows;
-        array_push($result, $shows);*/
-
-    //}
-            //$weekCounter += 1;
-        //}
 
+        $result["shows"] = $shows;
 
         // XSS exploit prevention
         SecurityHelper::htmlescape_recursive($result);
 
         // convert image paths to point to api endpoints
+        //TODO: do we need this here?
         self::findAndConvertPaths($result);
 
         return $result;

airtime_mvc/application/controllers/EmbedController.php

@@ -84,7 +84,6 @@ class EmbedController extends Zend_Controller_Action
 
         $request = $this->getRequest();
 
-
         $widgetStyle = $request->getParam('style');
         if ($widgetStyle == "premium") {
             $this->view->widgetStyle = "premium";
@@ -95,11 +94,9 @@ class EmbedController extends Zend_Controller_Action
         }
         $this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery-1.6.1.min.js?".$CC_CONFIG['airtime_version'];
 
-        $weeklyScheduleData = WidgetHelper::getWeekInfoV2($this->getRequest()->getParam("timezone"));
+        $weeklyScheduleData = WidgetHelper::getWeekInfoV2();
 
-        // Return only the current week's schedule data. In the future we may use the next week's data.
         $this->view->schedule_data = json_encode($weeklyScheduleData);
-        $this->view->weeklyScheduleData = $weeklyScheduleData;
 
         $currentDay = new DateTime("now", new DateTimeZone(Application_Model_Preference::GetTimezone()));
         //day of the month without leading zeros (1 to 31)

airtime_mvc/application/views/scripts/embed/weekly-program.phtml

@@ -25,13 +25,41 @@
             });
         });
 
+        String.prototype.paddingLeft = function(paddingValue) {
+            return String(paddingValue + this).slice(-paddingValue.length);
+        };
 
         var schedule_data = <?php echo $this->schedule_data; ?>;
-        console.log(schedule_data);
 
         var app = angular.module('scheduleWidget', []);
         app.controller('scheduleController', ['$scope', '$window', function($scope, $window) {
-            $scope.schedule_data = $window.schedule_data["scheduleData"];
+
+            // Loop through every show and assign it to the corresponding day of the week's
+            // show array.
+            angular.forEach($window.schedule_data["shows"], function(value, key) {
+
+                // First we have to create a Date object out of the show time in UTC.
+                // Then we can format the string in the client's local timezone.
+                var start_date = new Date(value.starts + " UTC");
+                var end_date = new Date(value.ends + " UTC");
+
+                // This variable is used to identify which schedule_data object (which day of the week)
+                // we should assign the show to.
+                // NOTE: we have to add 1 to the month because javascript's Date.getMonth()
+                // function returns the month number starting with an index of 0. In PHP,
+                // the months are indexed starting at 1.
+                var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
+
+                if ($window.schedule_data["weekDays"][format_start_date] !== undefined) {
+                    $window.schedule_data["weekDays"][format_start_date]["shows"].push(
+                        {
+                            "show_start_hour": start_date.getHours().toString().paddingLeft("00")+":"+ start_date.getMinutes().toString().paddingLeft("00"),
+                            "show_end_hour": end_date.getHours().toString().paddingLeft("00")+":"+ end_date.getMinutes().toString().paddingLeft("00"),
+                            "name": value.name
+                        });
+                }
+            });
+            $scope.weekDays = $window.schedule_data["weekDays"];
 
             $scope.isEmpty = function(obj) {
                 return obj.length == 0;
@@ -43,13 +71,13 @@
 <body ng-app="scheduleWidget" ng-controller="scheduleController">
 <div class="schedule tab_content current">
     <ul class="tabs">
-        <li ng-repeat="x in schedule_data track by $index">
+        <li ng-repeat="x in weekDays track by $index">
             {{x.dayOfWeek}}<span>{{x.dayOfMonth}}</span>
         </li>
     </ul>
 
     <div class="schedule_content">
-        <div ng-repeat="x in schedule_data track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
+        <div ng-repeat="x in weekDays track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
             <div ng-if="isEmpty(x.shows)" class="row empty-schedule">Looks like there are no shows scheduled on this day.</div>
             <div ng-repeat="show in x.shows" class="row">
                 <div class="time_grid">{{show.show_start_hour}} - {{show.show_end_hour}}</div>

airtime_mvc/application/views/scripts/embed/weekly-program.phtml.bak

@@ -1,64 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-    <link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
-    <script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
-    <script type="text/javascript">
-        $(document).ready(function() {
-            $('.tabs li').click(function(){
-                var tab_id = $(this).attr('data-tab');
-
-                $('.tabs li').removeClass('active');
-                $('.schedule_item').removeClass('active');
-
-                $(this).addClass('active');
-                $("#"+tab_id).addClass('active');
-            });
-        });
-
-    </script>
-</head>
-
-<body>
-
-<div class="schedule tab_content current">
-    <ul class="tabs">
-        <?php
-        foreach($this->weeklyScheduleData as $day => $data) {
-            $activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
-            echo "<li class='".$activeClass."' data-tab='day-".$data["dayOfMonth"]."'>" . $data["dayOfWeek"] . "<span>" . $data["dayOfMonth"] . "</span></li>";
-        }?>
-    </ul>
-
-    <div class="schedule_content">
-        <?php
-        foreach($this->weeklyScheduleData as $day => $data) {
-            $activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
-
-            echo "<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>";
-                if (count($data["shows"]) == 0) {
-                    echo "<div class='row empty-schedule'>Looks like there are no shows scheduled on this day.</div>";
-                } else {
-                    foreach ($data["shows"] as $show => $showData) {
-                        echo "<div class='row'>";
-                        echo "<div class='time_grid'>" . $showData["show_start_hour"] . ' - ' . $showData["show_end_hour"] . "</div>";
-                        echo "<div class='name_grid'>" . $showData["name"] . "</div>";
-                        echo "</div>";
-                    }
-                }
-            echo "</div>";
-        }?>
-    </div>
-
-    <div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
-        <a href="https://airtime.pro" target="_blank">Powered by <span>Airtime Pro</span></a>
-    </div>
-</div>
-
-</body>
-
-</html>
-
-

airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css

@@ -186,7 +186,7 @@ background: rgba(53, 53, 53, 1.0);
     }
 
     .schedule_item div.name_grid {
-        width: 72%;
+        width: 70%;
     }
 }