iTunes browser in AngularJS
Last active
December 18, 2018 12:46
-
-
Save mike-ward/6389991 to your computer and use it in GitHub Desktop.
AngularJS Demo using iTunes as a data source
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- Original Source: http://devgirl.org/files/MediaExplorer/#/ --> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>AngularJS iTunes Example</title> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css"> | |
| <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script> | |
| <style type="text/css"> | |
| body { background-color: rgb(238, 238, 238); padding: 1pc; } | |
| input[type=text], .pure-form select { margin-right: 1pc; } | |
| div.popupPlayer { z-index: 10; position: fixed; top: 50%; left: 50%; margin-left: -160px; margin-top: -150px; width: 320px; border: solid 1px #bbb; padding: 20px; background-color: white; } | |
| </style> | |
| </head> | |
| <body ng-app="itunes"> | |
| <div ng-controller="searchController"> | |
| <h2>iTunes Media Search</h2> | |
| <form class="pure-form"> | |
| <label>Search for</label> | |
| <input type="text" ng-model="searchTerm" ng-disabled="searching" class="pure-input-rounded"> | |
| <label>Media Type</label> | |
| <select ng-model="mediaType" ng-disabled="searching"> | |
| <option value="all" selected>All</option> | |
| <option value="musicVideo" selected>Video</option> | |
| <option value="movie">Movie</option> | |
| <option value="musicTrack">Music</option> | |
| <option value="podcast">Podcast</option> | |
| <option value="tvShow">TV Show</option> | |
| </select> | |
| <button ng-click="doSearch()" ng-disabled="searching" class="pure-button pure-button-primary">Search</button> | |
| <span class="pull-right"> | |
| <label>Sort by</label> | |
| <select ng-model="sortProp" ng-disabled="searching"> | |
| <option value="artistName">Artist</option> | |
| <option value="collectionName">Collection Name</option> | |
| <option value="wrapperType">Media Item Name</option> | |
| <option value="kind" selected>Media Type</option> | |
| </select> | |
| <label>Filter by</label> | |
| <input type="text" ng-model="filterTerm" ng-disabled="searching"> | |
| </span> | |
| </form> | |
| <hr> | |
| <table ng-show="mediaResults.length > 0" class="pure-table pure-table-striped"> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th>Cover</th> | |
| <th>Track</th> | |
| <th>Type</th> | |
| <th>Artist</th> | |
| <th>Collection</th> | |
| <th>Track</th> | |
| <th>Collection</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="media in mediaResults | filter:filterTerm | orderBy:sortProp"> | |
| <td> | |
| <button ng-click="playVideo(media)" class="pure-button"><i class="icon-play"></i></button> | |
| </td> | |
| <td><a ng-href="{{media.previewUrl}}" target="_blank"><img ng-src="{{media.artworkUrl60}}" /></a></td> | |
| <td>{{media.trackName || media.collectionName}}</td> | |
| <td>{{media.kind}}</td> | |
| <td>{{media.artistName}}</td> | |
| <td>{{media.collectionName}}</td> | |
| <td>{{media.trackPrice | currency}}</td> | |
| <td>{{media.collectionPrice | currency}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="popupPlayer" ng-show="showVideo"> | |
| <div> | |
| <button ng-click="closeVideo()" class="pure-button pure-button-xsmall pull-right"><i class="icon-remove"></i></button> | |
| <div>{{title}}</div> | |
| <small>by <cite>{{artist}}</cite></small> | |
| </div> | |
| <videoplayer src="{{previewUrl}}" width="320" height="240" controls> | |
| </div> | |
| </div> | |
| <script> | |
| 'use strict' | |
| var app = angular.module("itunes", []); | |
| app.controller("searchController", function ($scope, $http, $sce) { | |
| $scope.searchTerm = "Michelle Branch"; | |
| $scope.mediaType = "musicTrack"; | |
| $scope.filterTerm = ""; | |
| $scope.sortProp = "artistName"; | |
| $scope.showVideo = false; | |
| $scope.searching = false; | |
| $scope.previewUrl = null; | |
| $scope.doSearch = function () { | |
| $scope.closeVideo(); | |
| $scope.mediaResults = []; | |
| $scope.searching = true; | |
| var type = ($scope.mediaType === "all") ? "" : $scope.mediaType; | |
| $http | |
| .jsonp('https://itunes.apple.com/search', { params: { term: $scope.searchTerm, entity: type, callback: 'JSON_CALLBACK' } }) | |
| .success(function (response) { $scope.mediaResults = response.results; }) | |
| .finally(function () { $scope.searching = false; }); | |
| }; | |
| $scope.playVideo = function (item) { | |
| $scope.title = item.trackName || item.collectionName; | |
| $scope.artist = item.artistName; | |
| $scope.previewUrl = $sce.trustAsResourceUrl(item.previewUrl); | |
| $scope.showVideo = true; | |
| }; | |
| $scope.closeVideo = function () { | |
| $scope.previewUrl = ""; | |
| $scope.showVideo = false; | |
| }; | |
| }); | |
| app.directive('videoplayer', function () { | |
| return { | |
| restrict: 'E', | |
| replace: true, | |
| template: '<video type="video/mp4"></video>', | |
| link: function (scope, element, attributes) { | |
| attributes.$observe('src', function (val) { | |
| if (val) { element[0].load(); element[0].play(); } | |
| else { element[0].pause(); } | |
| }); | |
| } | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment