SAAS-843: Create Embeddable Schedule Widget View

Replaced player controller with embeddablewidgets controller.
Replaced 'Player' page with 'Widgets' page.
Added schedule widget to the widgets page.

airtime_mvc/application/configs/ACL.php

@@ -38,7 +38,7 @@ $ccAcl->add(new Zend_Acl_Resource('library'))
       ->add(new Zend_Acl_Resource('billing'))
       ->add(new Zend_Acl_Resource('thank-you'))
       ->add(new Zend_Acl_Resource('provisioning'))
-      ->add(new Zend_Acl_Resource('player'));
+      ->add(new Zend_Acl_Resource('embeddablewidgets'));
 
 /** Creating permissions */
 $ccAcl->allow('G', 'index')
@@ -71,7 +71,7 @@ $ccAcl->allow('G', 'index')
       ->allow('A', 'user')
       ->allow('A', 'systemstatus')
       ->allow('A', 'preference')
-      ->allow('A', 'player')
+      ->allow('A', 'embeddablewidgets')
       ->allow('S', 'thank-you')
       ->allow('S', 'billing');
       

airtime_mvc/application/configs/navigation.php

@@ -87,10 +87,10 @@ $pages = array(
                 'resource'   => 'listenerstat'
             ),
             array(
-                'label'      => _('Player'),
+                'label'      => _('Widgets'),
                 'module'     => 'default',
-                'controller' => 'player',
+                'controller' => 'embeddablewidgets',
-                'action'     => 'customize'
+                'action'     => 'index'
             )
         )
     ),

airtime_mvc/application/controllers/EmbedController.php

@@ -24,7 +24,6 @@ class EmbedController extends Zend_Controller_Action
 
         $request = $this->getRequest();
 
-
         $this->view->mrp_js = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/player/mrp.js?".$CC_CONFIG['airtime_version'];
         $this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "js/libs/jquery-1.10.2.js";
         $this->view->muses_swf = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/player/muses.swf";
@@ -83,7 +82,14 @@ class EmbedController extends Zend_Controller_Action
 
         $CC_CONFIG = Config::getConfig();
 
-        $this->view->css = Application_Common_HTTPHelper::getStationUrl() . "/css/radio-page/weekly-schedule-widget.css?".$CC_CONFIG['airtime_version'];
+        $request = $this->getRequest();
+
+        $widgetStyle = $request->getParam('style');
+        if ($widgetStyle == "premium") {
+            $this->view->css = Application_Common_HTTPHelper::getStationUrl() . "/css/embed/weekly-schedule-widget.css?" . $CC_CONFIG['airtime_version'];
+        } else {
+            $this->view->css = Application_Common_HTTPHelper::getStationUrl() . "/css/embed/weekly-schedule-widget-basic.css?" . $CC_CONFIG['airtime_version'];
+        }
         $this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "widgets/js/jquery-1.6.1.min.js?".$CC_CONFIG['airtime_version'];
 
         $result = WidgetHelper::getWeekInfoV2($this->getRequest()->getParam("timezone"));

airtime_mvc/application/controllers/EmbeddablewidgetsController.php

@@ -1,13 +1,14 @@
 <?php
 
-class PlayerController extends Zend_Controller_Action
+class EmbeddableWidgetsController extends Zend_Controller_Action
 {
+
     public function init()
     {
 
     }
-    
+
-    public function customizeAction()
+    public function indexAction()
     {
         $CC_CONFIG = Config::getConfig();
         $baseUrl = Application_Common_OsPath::getBaseDir();
@@ -20,12 +21,17 @@ class PlayerController extends Zend_Controller_Action
         $numEnabledStreams = $form->getElement('player_stream_url')->getAttrib('numberOfEnabledStreams');
 
         if ($numEnabledStreams > 0 && $apiEnabled) {
-            $this->view->form = $form;
+            $this->view->player_form = $form;
         } else {
-            $this->view->errorMsg = "To configure and use the embeddable player you must:<br><br>
+            $this->view->player_error_msg = "To configure and use the embeddable player you must:<br><br>
             1. Enable at least one MP3, AAC, or OGG stream under System -> Streams<br>
             2. Enable the Public Airtime API under System -> Preferences";
         }
 
+        if (!$apiEnabled) {
+            $this->view->weekly_schedule_error_msg = "To use the embeddable weekly schedule you must:<br><br>
+            1. Enable the Public Airtime API under System -> Preferences";
+        }
     }
 }
+

airtime_mvc/application/controllers/IndexController.php

@@ -13,7 +13,7 @@ class IndexController extends Zend_Controller_Action
         $CC_CONFIG = Config::getConfig();
         $baseUrl = Application_Common_OsPath::getBaseDir();
         $this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/radio-page.css?'.$CC_CONFIG['airtime_version']);
-        $this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/weekly-schedule-widget.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'css/embed/weekly-schedule-widget.css?'.$CC_CONFIG['airtime_version']);
 
         $this->_helper->layout->setLayout('radio-page');
 

airtime_mvc/application/views/scripts/embed/player.phtml

@@ -268,7 +268,7 @@
                             //Master/show source have no current track but they do have a current show.
                             $("p.now_playing").html("On Air:" + "<span>" + data.currentShow[0].name + "</span>");
                         } else {
-                            $("p.now_playing").html("Offline");
+                            $("p.now_playing").html("Off Air" + "<span>Offline</span>");
                         }
                         time_to_next_track_starts = 20000;
                     } else {

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

@@ -39,7 +39,7 @@
             $activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
         echo"<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>
             <table class='widget widget now-playing-list'>
-            <colgroup><col width='110'><col width='350'><col width='240'></colgroup>
+            <colgroup><col width='150'><col width='350'><col width='20'></colgroup>
             <thead></thead>
             <tfoot><tr><td></td></tr></tfoot>
             <tbody>";

airtime_mvc/application/views/scripts/embeddablewidgets/index.phtml

@@ -0,0 +1,45 @@
+<div id="widget-menu" class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong ">
+    <h2><?php echo _("Widgets:"); ?></h2>
+    <a href="#player-widget">Player</a>
+    <a href="#weekly-schedule-widget-error">Weekly Schedule</a>
+</div>
+
+<div id="player-widget" class="ui-widget ui-widget-content block-shadow simple-formblock embed-player-form clearfix padded-strong ">
+
+    <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
+
+    <form method="post" id="player_form" enctype="multipart/form-data">
+        <h2 style="float:left"><?php echo _("Player") ?></h2>
+        <div style="clear:both"></div>
+        <?php echo $this->player_error_msg; ?>
+        <?php echo $this->player_form; ?>
+
+    </form>
+</div>
+<br>
+
+<div id="weekly-schedule-widget" class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong ">
+
+    <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
+
+    <h2 style="float:left"><?php echo _("Weekly Schedule") ?></h2>
+    <div style="clear:both"></div>
+
+    <div id="weekly-schedule-widget-error">
+        <?php echo $this->weekly_schedule_error_msg; ?>
+    </div>
+
+    <div id="weekly-schedule-widget-preview" <?php if (isset($this->weekly_schedule_error_msg)) echo "style=display:none"; ?>>
+        <label>Preview:</label>
+        <div class="blah">
+            <iframe id="schedule_iframe" height="400px" width="550px" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program"?>></iframe>
+        </div>
+
+        <div style="clear:both"></div>
+        <label>Embeddable Code:</label>
+        <textarea style="width:100%" rows="3" readonly="readonly"><iframe height="400px" width="550px" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program"?>></iframe>
+        </textarea>
+        Copy this code and paste it into your website's HTML to embed the weekly schedule in your site.
+        Adjust the height and width attributes to your desired size.
+    </div>
+</div>

airtime_mvc/application/views/scripts/index/index.phtml

@@ -6,11 +6,11 @@
     <?php if ($this->stationLogo === "airtime_logo.png") {
         echo "<a href='#' class='logo'><img src='airtime_logo.png'></a>";
     } else {
-        echo "<a href='#' class='logo' ><img src='data:image/png;base64," . $this->stationLogo . "'></a>";
+        echo "<a href='#' class='logo'><img src='data:image/png;base64," . $this->stationLogo . "'></a>";
     } ?>
 
     <div id="tab-1" class="schedule tab_content current">
-        <iframe id="schedule_iframe" height="400px" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program"?>></iframe>
+        <iframe id="schedule_iframe" height="400px" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program?style=premium"?>></iframe>
     </div>
 
     <div id="tab-2" class="about_us tab_content">
@@ -27,7 +27,7 @@
         </form>
     </div>
 
-    <iframe id="player_iframe" frameborder="0" width="100%" style="bottom:0px; left:0px; position:fixed; right:0px;" src=<?php echo $this->stationUrl."embed/player?stream=auto&title=Staging1&style=premium";?>></iframe>
+    <iframe id="player_iframe" frameborder="0" width="100%" style="bottom:0px; left:0px; position:fixed; right:0px;" src=<?php echo $this->stationUrl."embed/player?stream=auto&style=premium";?>></iframe>
 
 </div>
 

airtime_mvc/application/views/scripts/player/customize.phtml

@@ -1,12 +0,0 @@
-<div class="ui-widget ui-widget-content block-shadow simple-formblock embed-player-form clearfix padded-strong ">
-
-    <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
-
-    <form method="post" id="player_form" enctype="multipart/form-data">
-        <h2 style="float:left"><?php echo _("Embeddable Player") ?></h2>
-        <div style="clear:both"></div>
-        <?php echo $this->errorMsg; ?>
-        <?php echo $this->form; ?>
-
-    </form>
-</div>

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

@@ -0,0 +1,124 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0px;
+}
+
+.tab_content {
+    color: #fff;
+    text-align: center;
+    visibility: hidden;
+    max-width: 750px;
+    /*margin: 0 auto;*/
+    margin-bottom: 140px;
+    padding: 10px;
+    position: absolute;
+    /*left: 50%;
+    margin-left: -380px;*/
+}
+
+.tab_content.current {
+    /*display: block;*/
+    visibility: visible;
+}
+
+.schedule .tabs {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+    background: rgba(69, 155, 143, 0.8);
+}
+
+.schedule .tabs li {
+    width: 105px;
+    height: 80px;
+    display: inline-block;
+    font-size: 14px;
+    padding: 15px;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.schedule .tabs li span {
+    font-size: 30px;
+    display: block;
+}
+
+.schedule .tabs li.active {
+    background: #459B8F;
+}
+
+.schedule .tabs li.active:hover {
+    background: #459B8F;
+}
+
+.schedule .tabs li:hover {
+    background: rgba(69, 155, 143, 0.6)
+}
+
+.schedule_content {
+    background: rgba(0, 0, 0, 0.3);
+    max-height: 0px;
+    transition: max-height 2s ease;
+
+    overflow-y: auto;
+    /*transition-delay: 1s;*/
+}
+
+.schedule.current .schedule_content {
+    max-height: 300px;
+}
+
+.schedule_content table {
+    opacity: 0;
+    /*transition: all 1s ease;*/
+}
+
+.schedule.current .schedule_content table {
+    opacity: 1;
+    -webkit-transition-delay: 0.6s;
+    transition-delay: 0.6s;
+}
+
+.schedule_item {
+    display: none;
+    font-size: 17px;
+    text-align: left;
+    text-transform: uppercase;
+    padding: 30px 40px;
+}
+
+.schedule_item.active {
+    display: block;
+}
+
+.schedule_item .time_grid  {
+    font-weight: 300;
+    color: #AAAAAA;
+}
+
+.schedule_item .name_grid {
+    padding-left: 30px;
+}
+
+.schedule_item h4 {
+    margin: 10px 0px;
+    font-weight: 400;
+}
+
+@media (max-width: 730px) {
+    .tab_content {
+        margin-top: 0px;
+        width: auto;
+        max-width: 100%;
+        margin-left: auto;
+        left: 10px;
+        right: 10px;
+    }
+
+    .schedule .tabs li {
+        width: 64px;
+        height: 64px;
+        padding: 6px;
+    }
+}
+

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

@@ -8,12 +8,12 @@ body {
     text-align: center;
     visibility: hidden;
     max-width: 750px;
-    margin: 0 auto;
+    /*margin: 0 auto;*/
     margin-bottom: 140px;
     padding: 10px;
     position: absolute;
-    left: 50%;
+    /*left: 50%;
-    margin-left: -380px;
+    margin-left: -380px;*/
 }
 
 .tab_content.current {

airtime_mvc/public/css/styles.css

@@ -3261,3 +3261,33 @@ dd .stream-status {
 .enable-tunein {
     font-weight:bold;
 }
+
+#weekly-schedule-widget {
+    margin: 0 auto;
+    width: 50%;
+}
+
+#widget-menu {
+    margin: 0 auto;
+    width: 40%;
+}
+
+#widget-menu a {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
+}
+
+#weekly-schedule-widget label {
+    font-weight: bold;
+}
+
+.blah {
+    width: 100%;
+    float: left;
+    text-align: center;
+}
+
+#schedule_iframe {
+    margin: 0 auto;
+}