'}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").children().detach().end()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){this.$body=a(document.body),this.$scrollElement=a(a(c).is(document.body)?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",a.proxy(this.process,this)),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.3.4",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b=this,c="offset",d=0;this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight(),a.isWindow(this.$scrollElement[0])||(c="position",d=this.$scrollElement.scrollTop()),this.$body.find(this.selector).map(function(){var b=a(this),e=b.data("target")||b.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[c]().top+d,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b
2 |
6 |
--------------------------------------------------------------------------------
/src/ytlive/playlist/playlistentry.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
2 |
17 |
--------------------------------------------------------------------------------
/src/ytlive/search/SearchComponents.ts:
--------------------------------------------------------------------------------
1 | import { Component, View, NgFor, NgIf, FORM_DIRECTIVES } from 'angular2/angular2';
2 | import { LocalStoragePlayList } from '../playlist/PlaylistBackend';
3 | import * as ytbackend from './YTLiveBackend';
4 |
5 | @Component({
6 | selector: 'search-result',
7 | properties: ["concert"],
8 | providers: [LocalStoragePlayList]
9 | })
10 | @View({
11 | templateUrl: "ytlive/search/searchresult.html",
12 | directives: []
13 | })
14 | class SearchResultComponent {
15 | concert: ytbackend.ConcertSummary
16 |
17 | constructor(private playlistService: LocalStoragePlayList,
18 | private videoPlayer: ytbackend.VideoPlayer) {}
19 |
20 | addToPlaylist(concert: ytbackend.ConcertSummary) {
21 | this.playlistService.addConcert(concert);
22 | }
23 |
24 | playConcert(id: string) {
25 | this.videoPlayer.playConcert(id);
26 | }
27 | }
28 |
29 | @Component({
30 | selector: 'search',
31 | providers: [ytbackend.ConcertService]
32 | })
33 | @View({
34 | templateUrl: "ytlive/search/search.html",
35 | directives: [NgFor, NgIf, SearchResultComponent, FORM_DIRECTIVES]
36 | })
37 | export class SearchComponent {
38 | searchTerm: string
39 | duration: string
40 |
41 | concerts: ytbackend.ConcertSummary[] = [];
42 |
43 | constructor(private concertService: ytbackend.ConcertService,
44 | private videoPlayer: ytbackend.VideoPlayer) { }
45 |
46 | get playing() {
47 | return this.videoPlayer.isPlaying;
48 | }
49 |
50 | get embedUrl() {
51 | return this.videoPlayer.currentVideoUrl;
52 | }
53 |
54 | searchConcerts(): void {
55 | this.videoPlayer.stop();
56 | this.concertService
57 | .findConcerts(this.searchTerm)
58 | .subscribe((results: ytbackend.ConcertSummary[]) => this.concerts = results);
59 | }
60 |
61 | }
62 |
--------------------------------------------------------------------------------
/src/ytlive/search/YTLiveBackend.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from 'angular2/angular2'
2 | import { Http } from 'angular2/http'
3 |
4 | var API_KEY = 'AIzaSyC83IjzPJwZjYWWdfWXpzCJteyYIMDzgLY';
5 | var yt_search = 'https://www.googleapis.com/youtube/v3/search?part=id,snippet&key=' +
6 | API_KEY + '&videoCategoryId=10&videoEmbeddable=true&type=video&videoDuration=';
7 | var yt_embed = 'https://www.youtube.com/embed/'
8 |
9 | interface YTSearchResult {
10 | id: { videoId: string };
11 | snippet: {
12 | title: string;
13 | description: string;
14 | thumbnails: {
15 | medium: {
16 | url: string;
17 | };
18 | }
19 | }
20 | }
21 |
22 | export class ConcertSummary {
23 | constructor(public id: string,
24 | public previewImg: string,
25 | public title: string,
26 | public desc: string) {
27 |
28 | }
29 | }
30 |
31 | export enum Duration { SONG, SET, FULLCONCERT }
32 |
33 | export class VideoPlayer {
34 | public isPlaying = false;
35 | public currentVideoUrl: string
36 |
37 | public playConcert(id: string) {
38 | console.log('service play', id)
39 | this.isPlaying = true;
40 | this.currentVideoUrl = this.concertIdToEmbedUrl(id);
41 | }
42 |
43 | public stop() {
44 | this.isPlaying = false;
45 | this.currentVideoUrl = undefined;
46 | }
47 |
48 | private concertIdToEmbedUrl(id: string): string {
49 | return yt_embed + id + '?showinfo=0&autoplay=1';
50 | }
51 | }
52 |
53 | @Injectable()
54 | export class ConcertService {
55 |
56 | private concerts: ConcertSummary[];
57 |
58 | constructor(private http: Http) { }
59 |
60 | public findConcerts(artist: string, duration = Duration.FULLCONCERT): any {
61 | var ytDuration: string;
62 | switch(duration) {
63 | case Duration.SONG:
64 | ytDuration = 'short';
65 | break;
66 | case Duration.SET:
67 | ytDuration = 'medium';
68 | break;
69 | case Duration.FULLCONCERT:
70 | ytDuration = 'long';
71 | break;
72 | }
73 |
74 | var searchString = yt_search + ytDuration + '&q=' + encodeURIComponent('live ' + artist);
75 |
76 | return this.http.get(searchString).map((res: any) => {
77 | var ytResults: {items: YTSearchResult[] } = res.json();
78 | var transformedResults = ytResults.items.map(this.toConcertSummary)
79 | this.concerts = transformedResults;
80 | return transformedResults;
81 | });
82 | }
83 |
84 | public getConcert(id: String): ConcertSummary {
85 | return this.concerts.filter(c => c.id === id)[0];
86 | }
87 |
88 | private toConcertSummary(result: YTSearchResult): ConcertSummary {
89 | var desc = result.snippet.description || "No description available";
90 | return new ConcertSummary(result.id.videoId, result.snippet.thumbnails.medium.url,
91 | result.snippet.title, desc);
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/ytlive/search/search.html:
--------------------------------------------------------------------------------
1 |
3 | ![]()
4 |
5 |
6 |
8 | {{ entry.title }}
7 |
9 |
12 |
15 |
16 |
2 |
21 |
22 |
23 | Search for your favorite bands!
24 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/ytlive/search/searchresult.html:
--------------------------------------------------------------------------------
1 |
2 |
19 |
--------------------------------------------------------------------------------
/src/ytlive/ytlive.html:
--------------------------------------------------------------------------------
1 |
3 | ![]()
4 |
5 |
6 | {{ concert.title }}
7 |
8 | {{ concert.desc }} 9 |
10 | 8 | {{ concert.desc }} 9 |
11 |
14 |
17 |
18 | YouTube live!
2 | 3 |
4 |
15 |
--------------------------------------------------------------------------------
/src/ytlive/ytlive.ts:
--------------------------------------------------------------------------------
1 | import { Component, View, bootstrap } from 'angular2/angular2';
2 | import { HTTP_PROVIDERS } from 'angular2/http'
3 | import { VideoPlayer } from './search/YTLiveBackend';
4 | import { PlaylistComponent } from './playlist/PlaylistComponents'
5 | import { SearchComponent } from './search/SearchComponents';
6 |
7 | @Component({
8 | selector: 'yt-live',
9 | providers: [VideoPlayer]
10 | })
11 | @View({
12 | templateUrl: "ytlive/ytlive.html",
13 | directives: [SearchComponent, PlaylistComponent]
14 | })
15 | class YTLiveComponent { }
16 |
17 | bootstrap(YTLiveComponent, [HTTP_PROVIDERS]);
18 |
--------------------------------------------------------------------------------
5 |
14 |
6 |
7 |
8 |
10 | Stored concerts:
11 |
13 |