Skip to content

Instantly share code, notes, and snippets.

@mike-ward

mike-ward/README.md

Last active December 18, 2018 12:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mike-ward/6389991 to your computer and use it in GitHub Desktop.
Save mike-ward/6389991 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS Demo using iTunes as a data source
Raw
README.md

iTunes browser in AngularJS

Raw
index.html
<!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