Skip to content

Instantly share code, notes, and snippets.

@mulka

mulka/itunes.html

Forked from mike-ward/README.md
Last active December 22, 2015 16:58
Show Gist options
  • Save mulka/6502775 to your computer and use it in GitHub Desktop.
Save mulka/6502775 to your computer and use it in GitHub Desktop.
Download ZIP
Found a directive called ngSrc. http://docs.angularjs.org/api/ng.directive:ngSrc
Raw
itunes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></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.0.7/angular.min.js"></script>
<style type="text/css">
body { background-color: rgb(249, 248, 249); }
#main { background-color: rgb(238, 238, 238); padding: 1pc; }
input[type=text], .pure-form select { margin-right: 1pc; }
div#simpleModal { 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; }
.pure-table { margin-top: 1pc; }
</style>
</head>
<body data-ng-app="itunes">
<div id="main" data-ng-controller="searchController">
<h2>iTunes Media Search</h2>
<form class="pure-form">
<label>Search for</label>
<input type="text" data-ng-model="searchTerm" class="pure-input-rounded" data-ng-disabled="searching">
<label>Media Type</label>
<select data-ng-model="mediaType" data-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 class="pure-button pure-button-primary" data-ng-click="doSearch()" data-ng-disabled="searching">Search</button>
<span id="qualifiers" class="pull-right">
<label>Sort by</label>
<select data-ng-model="sortProp">
<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" data-ng-model="filterTerm">
</span>
</form>
<table id="resultsTbl" class="pure-table pure-table-striped" data-ng-show="mediaResults.length > 0">
<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 data-ng-repeat="item in mediaResults | filter:filterTerm | orderBy:sortProp">
<td><button id="playBtn" class="pure-button" data-ng-click="playVideo(item)"><i class="icon-play"></i></button></td>
<td><a href="{{item.previewUrl}}" target="_blank"><img data-ng-src="{{item.artworkUrl60}}" /></a></td>
<td>{{item.trackName || item.collectionName}}</td>
<td>{{item.kind}}</td>
<td>{{item.artistName}}</td>
<td>{{item.collectionName}}</td>
<td>{{item.trackPrice | currency}}</td>
<td>{{item.collectionPrice | currency}}</td>
</tr>
</tbody>
</table>
<div id="simpleModal" data-ng-show="showFlag">
<div style="margin-bottom: .5pc;">
<button id="closeSimple" data-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>
<video id="vid" width="320" height="240" autoplay controls>
<source ng-src="{{vidsrc}}" type="video/mp4">
</video>
</div>
</div>
<script>
'use strict'
var app = angular.module("itunes", []);
app.controller("searchController", function ($scope, $http) {
var video = document.getElementById('vid');
$scope.searchTerm = "Michelle Branch";
$scope.mediaType = "musicTrack";
$scope.filterTerm = "";
$scope.sortProp = "artistName";
$scope.showFlag = false;
$scope.searching = false;
$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;
$scope.searching = false;
})
.error(function () { $scope.searching = false; });
};
$scope.playVideo = function (item) {
$scope.title = item.trackName || item.collectionName;
$scope.artist = item.artistName;
$scope.vidsrc = item.previewUrl;
video.load();
video.play();
$scope.showFlag = true;
};
$scope.closeVideo = function () {
video.pause();
$scope.showFlag = false;
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment