HWC Winners announcement

public/templates/partials/announcements/hwc/winners.html

@@ -0,0 +1,26 @@
+<div class="announce-content">
+    <h2>{{ ::announcement.title }}</h2>
+    <p marked="announcement.text_content"></p>
+</div>
+<div class="announce-tracks">
+    <ul class="tracks-listing">
+        <li ng-repeat="track in announcement.parsedTracks track by track.id" ng-class="{'can-favourite': auth.isLogged, 'is-favourited': auth.isLogged && track.user_data.is_favourited, 'is-playing': track.isPlaying, 'has-played': auth.isLogged && track.user_data.views}">
+            <div class="image">
+                <a href="#" class="play-button" pfm-eat-click ng-click="play(track)">
+                    <i class="fa fa-play" ng-if="!track.isPlaying"></i>
+                    <i class="fa fa-pause" ng-if="track.isPlaying"></i>
+                </a>
+                <img pfm-src-loader="track.covers.thumbnail" pfm-src-size="thumbnail" />
+            </div>
+            <a class="info" ng-href="{{::track.url}}" ng-if="!hasOverride">
+                <span class="title">{{::track.title}}</span>
+                <span class="artist">{{::track.user.name}} / {{::track.genre.name}}</span>
+            </a>
+        </li>
+    </ul>
+</div>
+<div class="announce-actions">
+    <a ng-repeat="link in announcement.links" ng-href="{{ ::link.url }}" target="_blank">{{ ::link.title }}</a>
+    <a href="#" ng-click="announcement.dontShowAgain()">Don't show again</a>
+</div>
+<a href="#" class="dismiss-button" ng-click="announcement.dismiss()"><i class="fa fa-times"></i></a>

resources/assets/scripts/app/controllers/dashboard.coffee

@@ -20,18 +20,29 @@ window.pfm.preloaders['dashboard'] = [
 ]
 
 module.exports = angular.module('ponyfm').controller "dashboard", [
-    '$scope', 'dashboard', 'auth', '$http', 'announcements', '$compile'
+    '$scope', 'dashboard', 'auth', '$http', 'announcements', '$compile', 'tracks', 'player'
-    ($scope, dashboard, auth, $http, announcements, $compile) ->
+    ($scope, dashboard, auth, $http, announcements, $compile, tracks, player) ->
 
         $scope.recentTracks = null
         $scope.popularTracks = null
         $scope.announcementClass = 'disabled'
         $scope.announceWrapperClass = 'disabled'
 
+        $scope.play = (track) ->
+            index = _.indexOf $scope.announcement.parsedTracks, (t) -> t.id == track.id
+            player.playTracks $scope.announcement.parsedTracks, index
+
         $scope.loadAnnouncementTemplate = (url) ->
             $http.get('/templates/' + url).success (templateContent) ->
                 compiledHtml = $compile(templateContent)($scope)
                 $('#announcement').append(compiledHtml)
+                if $scope.announcement.tracks.length > 0
+                    console.log($scope.announcement.tracks)
+                    $scope.announcement.parsedTracks = []
+                    for track in $scope.announcement.tracks
+                        tracks.fetch(track, false).done (trackResponse) ->
+                            $scope.announcement.parsedTracks.push(trackResponse.track)
+                            console.log(trackResponse)
 
         dashboard.refresh().done (res) ->
             $scope.recentTracks = res.recent_tracks

resources/assets/styles/dashboard.less

@@ -200,7 +200,7 @@
       }
 
       &.hwc-announce {
-        height: 150px;
+        height: 160px;
         background-color: #68a1ee;
         background-image: url(/images/hwc/hwc-announcement.jpg);
         background-size: 300px;
@@ -216,13 +216,36 @@
           background: none;
         }
 
-        .announce-actions, .announce-content {
+        .announce-actions, .announce-content, .announce-tracks {
           padding-left: 300px;
 
           @media (max-width: 1200px) {
             padding-left: 15px;
           }
         }
+
+        .announce-tracks {
+          li {
+            width: 33%;
+            float: left;
+
+            .title {
+              color: #fff;
+            }
+
+            .artist {
+              color: #eee;
+            }
+
+            &:hover {
+              background: rgba(0,0,0,0.2);
+            }
+
+            &.is-playing {
+              background: rgba(0,0,0,0.1);
+            }
+          }
+        }
       }
       
       &.secret-santa-announce {