2 |
--------------------------------------------------------------------------------
/src/app/components/current-song-meta/current-song.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { Store } from "@ngxs/store";
3 | import { SetShuffle, SetRepeat } from "../../shared/spotify.state";
4 | import { DataService } from "../../../lib/service/data/data.service";
5 | import { SpotifyPlaylistTrack } from "../../../lib/service/spotify/spotify.model";
6 |
7 | @Component({
8 | moduleId: module.id,
9 | selector: 'current-song',
10 | templateUrl: 'current-song.html',
11 | styleUrls: ['current-song.css']
12 | })
13 | export class CurrentSongComponent {
14 | currentPlayingSpotifySong: SpotifyPlaylistTrack = null;
15 | playerStatus: boolean = false;
16 | isRandom: boolean = false;
17 | isRepeat: boolean = false;
18 | shuffleImgSrc: string = './assets/shuffle.svg';
19 | repeatImgSrc: string = './assets/repeat.svg';
20 | playText: string = 'Play';
21 |
22 | constructor(private store: Store, private dataService: DataService) {
23 | this.dataService.currentSongSubject.subscribe((song) => {
24 | this.currentPlayingSpotifySong = song;
25 | });
26 |
27 | this.dataService.playerStatusSubject.subscribe((status) => {
28 | this.playerStatus = status;
29 | });
30 |
31 | this.dataService.playPauseSubject.subscribe((status) => {
32 | this.playText = status;
33 | });
34 | }
35 |
36 | changeCurrentSong(changeVal: number) {
37 | this.dataService.toggleNextSong(changeVal);
38 | }
39 |
40 | setShuffleFlag() {
41 | if (this.isRandom) {
42 | this.shuffleImgSrc = "./assets/shuffle.svg";
43 | } else {
44 | this.shuffleImgSrc = "./assets/shuffle-green.svg"
45 | }
46 |
47 | this.isRandom = !this.isRandom;
48 | this.store.dispatch(new SetShuffle(this.isRandom));
49 | }
50 |
51 | setRepeatFlag() {
52 | if (this.isRepeat) {
53 | this.repeatImgSrc = "./assets/repeat.svg";
54 | } else {
55 | this.repeatImgSrc = "./assets/repeat-green.svg"
56 | }
57 |
58 | this.isRepeat = !this.isRepeat;
59 |
60 | this.store.dispatch(new SetRepeat(this.isRepeat));
61 | }
62 |
63 | togglePlay() {
64 | let playPauseText = '';
65 | this.playerStatus ? playPauseText = 'Pause' : playPauseText = 'Play';
66 |
67 | this.dataService.togglePlayPause(playPauseText);
68 | this.dataService.updatePlayerStatus(!this.playerStatus);
69 | }
70 | }
--------------------------------------------------------------------------------
/src/app/components/current-song-meta/current-song.css:
--------------------------------------------------------------------------------
1 | /************************************************************************
2 | Css in this section is regarding current song play info.
3 | ************************************************************************/
4 |
5 | @media (max-width: 599px) {
6 | .current-song {
7 | display: grid;
8 | grid-template-rows: 40px 1fr;
9 | text-align: center;
10 | margin: auto;
11 | color: white;
12 | background-color: #424242;
13 | /* width: 100vw; */
14 | padding-right: 25px;
15 | }
16 | }
17 |
18 | @media (min-width: 600px) {
19 | .current-song {
20 | display: grid;
21 | grid-template-columns: 100px 1fr;
22 | margin: auto;
23 | color: white;
24 | background-color: #424242;
25 | max-width: 50%;
26 | }
27 | }
28 | .song-meta {
29 | margin-left: 10px;
30 | max-height: 50px;
31 | }
32 | .track-name {
33 | font-size: 16px;
34 | }
35 | .artist-name {
36 | /* font-size: 16px; */
37 | font-weight: 400;
38 | }
39 |
40 | /************************************************************************
41 | Css in this section is regarding the previous and next buttons for songs.
42 | ************************************************************************/
43 | .track-buttons {
44 | display: grid;
45 | /* height: 25px; */
46 | grid-gap: 5px;
47 | grid-template-rows: 1fr;
48 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
49 | text-align: center;
50 | padding-top: 5px;
51 | }
52 |
53 | img {
54 | height: 30px;
55 | width: 30px;
56 | }
57 |
58 | .icon-container {
59 | width: 100%;
60 | display:block;
61 | margin:auto;
62 |
63 | }
64 |
65 | .icon-container:hover {
66 | background-color: #e0e0e0;
67 | cursor: pointer;
68 | }
69 |
70 | .icon-container > img:hover {
71 | background-color: #e0e0e0;
72 | /* cursor: pointer; */
73 | }
74 |
75 | .shuffle-icon {
76 | height: 20px;
77 | width: 20px;
78 | }
79 |
80 | .repeat-icon {
81 | height: 20px;
82 | width: 20px;
83 | }
--------------------------------------------------------------------------------
/src/app/components/current-song-meta/current-song.html:
--------------------------------------------------------------------------------
1 |
2 | Psst. I'm looking for some feedback on Spotify Television.
3 | Click here for info regarding the SpotifyTV!
4 | X Close this Msg
5 |
9 |
23 |
10 | ![shuffle]()
11 |
12 |
13 | 
14 |
15 |
16 |
14 |
17 | 
18 |
19 |
18 |
20 | ![repeat]()
21 |
22 |
2 |
7 |
24 |
--------------------------------------------------------------------------------
/src/app/components/video/video.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { DataService } from '../../../lib/service/data/data.service';
3 | import { YoutubeService } from '../../../lib/service/youtube/youtube.service';
4 | import { SpotifyPlaylistTrack, SpotifySong } from '../../../lib/service/spotify/spotify.model';
5 | import { Store } from '@ngxs/store';
6 | import { SetPlayingSong, SetSinglePlaylist } from '../../shared/spotify.state';
7 | import { Router } from '@angular/router';
8 |
9 | @Component({
10 | moduleId: module.id,
11 | selector: 'video-player',
12 | templateUrl: 'video.html',
13 | styleUrls: ['video.css']
14 | })
15 | export class VideoComponent {
16 | currentSong: SpotifyPlaylistTrack;
17 | displayYoutubePlayer: boolean = false;
18 | private id: string = 'qDuKsiwS5xw';
19 | player: YT.Player;
20 | isRandom: boolean = false;
21 | isRepeat: boolean = false;
22 |
23 | constructor(private dataService: DataService, private youtubeService: YoutubeService, private store: Store, private router: Router) {
24 | this.dataService.currentSongSubject.subscribe((song) => {
25 | this.currentSong = song;
26 | this.checkSongCache(song);
27 | });
28 |
29 | this.dataService.playerStatusSubject.subscribe((status) => {
30 | status ? this.player.pauseVideo() : this.player.playVideo();
31 | });
32 | }
33 |
34 | /**
35 | * Used to build the iframe url to be pased into an iframe. All functionality since has been replaced by youtube-player lib.
36 | *
37 | * @param youtubeVideoId
38 | */
39 | getSingleSongYoutubeVideoUrl(youtubeVideoId: string): string {
40 | return `https://www.youtube.com/embed/${youtubeVideoId}?autoplay=1`;
41 | }
42 |
43 | checkSongCache(song: SpotifyPlaylistTrack) {
44 | song.youtubeVideoId ? this.setVideoPlayer(song) : this.getYoutubeVideoForSong(song);
45 | }
46 |
47 | getYoutubeVideoForSong(song: SpotifyPlaylistTrack) {
48 | let tempSong: SpotifySong = new SpotifySong(song.track.artists[0].name, song.track.name);
49 |
50 | this.youtubeService.searchYoutube(tempSong).subscribe((response) => {
51 | song.youtubeVideoId = response.items[0].id.videoId;
52 | let state = this.store.snapshot().spotifydata;
53 |
54 | let tempSongs = state.currentSpotifyPlaylistSongs;
55 | let index = state.trackIndex;
56 |
57 | tempSongs.items[index].youtubeVideoId = song.youtubeVideoId;
58 |
59 | this.store.dispatch(new SetPlayingSong(song));
60 | this.store.dispatch(new SetSinglePlaylist(tempSongs));
61 |
62 | this.setVideoPlayer(song);
63 | }, (error) => this.handleApiError(error), () => { });
64 | }
65 |
66 | /**
67 | * Handles setting the Youtube Player as a callback from the lib factory.
68 | *
69 | * @param player The YoutubePlayer singleton.
70 | */
71 | savePlayer(player) {
72 | this.player = player;
73 | this.displayYoutubePlayer = true;
74 | this.player.playVideo();
75 | }
76 |
77 | setVideoPlayer(song: SpotifyPlaylistTrack) {
78 | if (this.displayYoutubePlayer) {
79 | this.setVideoPlayerSong(song.youtubeVideoId);
80 | } else {
81 | this.id = song.youtubeVideoId;
82 | this.displayYoutubePlayer = true;
83 | }
84 | }
85 |
86 | setVideoPlayerSong(videoId: string) {
87 | this.id = videoId;
88 | this.player.loadVideoById(videoId);
89 | this.player.playVideo();
90 | }
91 |
92 | onStateChange(event) {
93 | switch (event.data) {
94 | case 0: // Status: ended
95 | this.dataService.togglePlayPause('Play');
96 | this.dataService.toggleNextSong(1);
97 | break;
98 | case 1: // Status: playing
99 | this.dataService.togglePlayPause('Pause');
100 | break;
101 | case 2: // Status: paused
102 | this.dataService.togglePlayPause('Play');
103 | break;
104 | case 3: // Status: buffering
105 | case 5: // Status: video cued
106 | default:
107 |
108 | }
109 | }
110 |
111 | handleApiError(error: any) {
112 | if (error) {
113 | switch (error.status) {
114 | case 401:
115 | this.router.navigate(['/login']);
116 | break;
117 | default:
118 | }
119 | }
120 | }
121 | }
--------------------------------------------------------------------------------
/src/app/components/video/video.css:
--------------------------------------------------------------------------------
1 | /************************************************************************
2 | Css in this section is regarding UI ViewPorts for mobile width devices.
3 | ************************************************************************/
4 | @media (max-width: 599px) {
5 | .iframe-container {
6 | position: relative;
7 | width: 100%;
8 | height: 40vh;
9 | }
10 | }
11 |
12 | /************************************************************************
13 | Css in this section is regarding UI ViewPorts for desktop width devices.
14 | ************************************************************************/
15 | @media (min-width: 600px) {
16 | .iframe-container {
17 | position: relative;
18 | width: 100%;
19 | height: 80vh;
20 | }
21 | }
22 |
23 | .video-container {
24 | /* height: 100%; */
25 | width: inherit;
26 | grid-area: "video";
27 | text-align: center;
28 | margin: 10px;
29 | }
30 |
31 | .video-default-text {
32 | color: white;
33 | }
--------------------------------------------------------------------------------
/src/app/components/video/video.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
6 |
4 | Spotify Television
5 |
8 |
9 |
10 |
11 | {{playlist.name}}
12 |
13 |
14 |
15 |
16 | {{song.track.name}}
17 | {{song.track.artists[0].name}}
18 |
19 |
20 |
21 |
22 |
23 |
2 |
--------------------------------------------------------------------------------
/src/app/config.development.json:
--------------------------------------------------------------------------------
1 | {"spotify": {"redirect_url": "https://immannino.github.io/SpotifyTelevision/login"},"youtube": {}}
--------------------------------------------------------------------------------
/src/app/config.production.json:
--------------------------------------------------------------------------------
1 | {
2 | "spotify": {
3 | "redirect_url": "https://immannino.github.io/SpotifyTelevision/login",
4 | "clientid": ""
5 | },
6 | "youtube": {
7 | "apikey": ""
8 | }
9 | }
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 | import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
3 |
4 | import { AuthenticationService } from '../../lib/service/authentication/authentication.service';
5 | import { AuthData } from '../../lib/service/authentication/authentication.model';
6 | import { SpotifySong, SpotifyPlaylist, SpotifyUserProfile, UserSpotifyPlaylists, SpotifyPlaylistTracks, SpotifyPlaylistTrack, SimpleSpotifyTrack } from '../../lib/service/spotify/spotify.model';
7 | import { DashboardPlaylist, PlaylistItem } from './dashboard.model';
8 | import { SafeUrlPipe } from '../../lib/utils/safeurl.pipe';
9 |
10 | import { Observable } from 'rxjs';
11 |
12 | import { SpotifyService } from '../../lib/service/spotify/spotify.service';
13 | import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
14 | import { EventListener } from '@angular/core/src/debug/debug_node';
15 | import { Store } from '@ngxs/store';
16 | import { SetProfile, SetPlaylists, SetSinglePlaylist, SetPlayingSong } from '../shared/spotify.state';
17 | import { DataService } from '../../lib/service/data/data.service';
18 |
19 | @Component({
20 | selector: 'dashboard',
21 | templateUrl: './dashboard.html',
22 | styleUrls: ['./dashboard.css']
23 | })
24 | export class DashboardComponent {
25 | constructor(private authService: AuthenticationService, private spotifyService: SpotifyService, private router: Router, private store: Store, private dataService: DataService) {
26 | this.router.events.subscribe(event => {
27 | if (event instanceof NavigationEnd) {
28 | if (!this.store.snapshot().spotifydata.spotifyPlaylists) {
29 | this.getUserProfileInformation();
30 | } else {
31 | this.refreshLocalStateData();
32 | }
33 | }
34 | });
35 | }
36 |
37 | spotifyPlaylists: UserSpotifyPlaylists = null;
38 | userProfile: SpotifyUserProfile = null;
39 |
40 | ngOnInit() {
41 | let authData = this.store.snapshot().survey;
42 |
43 | if (!authData.userAccessToken) {
44 | this.router.navigate(['/login']);
45 | }
46 | }
47 |
48 | getUserProfileInformation() {
49 | this.spotifyService.getSpotifyUserProfile().subscribe((value: SpotifyUserProfile) => {
50 | this.userProfile = value;
51 | this.store.dispatch(new SetProfile(this.userProfile)).subscribe(() => {
52 |
53 | /**
54 | * Prep the playlist variables.
55 | */
56 | this.spotifyPlaylists = new UserSpotifyPlaylists();
57 | this.spotifyPlaylists.items = new ArrayClick on a video to begin
3 |
4 |
6 |
4 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.model.ts:
--------------------------------------------------------------------------------
1 | import { YoutubeThumbnail } from "../../lib/service/youtube/youtube.model";
2 |
3 | export class DashboardPlaylist {
4 | playlistItem: Array
5 |
9 | Wow there bucko, that page aint be existin.
' 5 | }) 6 | export class FourOhFourComponent {} -------------------------------------------------------------------------------- /src/app/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AppMaterialsModule } from '../app-materials.module'; 4 | import { SpotifyService } from '../../lib/service/spotify/spotify.service'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router'; 7 | import { SafeResourceUrl, DomSanitizer} from '@angular/platform-browser'; 8 | import { SafeUrlPipe } from '../../lib/utils/safeurl.pipe'; 9 | import { UserData } from '../../lib/service/spotify/spotify.model'; 10 | import { AppConfig } from '../app.config'; 11 | import { Timestamp } from 'rxjs'; 12 | import { Store } from '@ngxs/store'; 13 | import { SetAuth } from '../shared/auth.state'; 14 | 15 | @Component({ 16 | moduleId: module.id, 17 | selector: 'login', 18 | templateUrl: 'login.html', 19 | styleUrls: [ 'login.css' ] 20 | }) 21 | export class LoginComponent implements OnInit { 22 | constructor( 23 | private config: AppConfig, 24 | private spotifyService: SpotifyService, 25 | private router: Router, 26 | private sanitizer: DomSanitizer, 27 | private store: Store 28 | ) { 29 | this.router.events.subscribe(event => { 30 | if (event instanceof NavigationEnd ) { 31 | let data = event.urlAfterRedirects.split("#")[1]; 32 | 33 | if (data && data !== '' && !data.includes("error")) { 34 | let responseItems: string[] = data.split("&"); 35 | /** 36 | * In the future, add logic to check that client state key is valid from response; 37 | */ 38 | this.userSpotifyLogin(responseItems); 39 | } else { 40 | let currentToken: string = localStorage.getItem('auth_error'); 41 | 42 | if (currentToken && currentToken === "true") { 43 | this.errorMessagePrimaryText = "Spotify session token has expired." 44 | this.errorMessageSubText = "Please log back in."; 45 | this.hasErrorOccurred = true; 46 | } 47 | } 48 | } 49 | }); 50 | } 51 | 52 | title = 'Spotify Television'; 53 | errorMessagePrimaryText: string = ""; 54 | errorMessageSubText: string = ""; 55 | hasErrorOccurred: boolean = false; 56 | hrefUrl: SafeResourceUrl = ""; 57 | client_id: string; 58 | 59 | ngOnInit() { 60 | this.client_id = this.config.getConfig('spotify').clientid; 61 | this.generateSpotifyLoginUrl(); 62 | } 63 | 64 | userSpotifyLogin(responseItems: string[]) { 65 | let tempUserData: UserData = { 66 | userAccessToken: responseItems[0].split("=")[1], 67 | token_type: responseItems[1].split("=")[1], 68 | refreshTokenTimeout: Number(responseItems[2].split("=")[1]), 69 | state: responseItems[3].split("=")[1] 70 | }; 71 | 72 | this.store.dispatch(new SetAuth(tempUserData)).subscribe(() => { 73 | 74 | }); 75 | 76 | if (this.hasErrorOccurred) this.hasErrorOccurred = false; 77 | 78 | this.navigateToDashboard(); 79 | } 80 | 81 | generateSpotifyLoginUrl() { 82 | let clientStateKey = this.spotifyService.generateRandomString(50); 83 | // let appRedirectUrl: string = "http://localhost:4200/login"; 84 | // let appRedirectUrl: string = "http://10.0.0.101:4200/login"; 85 | let appRedirectUrl: string = this.config.getConfig('spotify').redirect_url; 86 | 87 | /** 88 | * Update scopes to appropriate values for what information I'm requesting from the user. 89 | */ 90 | let scopes: string = 'user-read-private user-read-email playlist-read-private playlist-read-collaborative user-library-read'; 91 | 92 | let url = 'https://accounts.spotify.com/authorize' + 93 | '?client_id=' + this.client_id + 94 | '&redirect_uri=' + encodeURIComponent(appRedirectUrl) + 95 | (scopes ? '&scope=' + encodeURIComponent(scopes) : '') + 96 | '&response_type=token' + '&state=' + clientStateKey; 97 | 98 | this.hrefUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 99 | } 100 | 101 | authUser() { 102 | this.navigateToDashboard(); 103 | } 104 | 105 | navigateToDashboard() { 106 | this.router.navigate(['/dashboard']); 107 | } 108 | } -------------------------------------------------------------------------------- /src/app/login/login.css: -------------------------------------------------------------------------------- 1 | .button-container { 2 | text-align: center; 3 | color: white; 4 | background: linear-gradient(to bottom left, #77C9D4, #57DC90); 5 | box-shadow: 0 0 5px inset gray; 6 | padding-bottom: 0.5em; 7 | } 8 | 9 | .title { 10 | font-size: 1.5rem; 11 | padding: 0.5em 0; 12 | } 13 | 14 | .login-button { 15 | margin: 1em; 16 | height: 4em; 17 | width: 15em; 18 | border: none; 19 | color: white; 20 | padding-top: 10px; 21 | } 22 | 23 | #spotify { 24 | color: #1db954; 25 | /* background-color: #1db954; */ 26 | background-color: white; 27 | } 28 | 29 | #spotify:hover { 30 | color: white; 31 | background-color: #1ed760; 32 | } 33 | 34 | #continue { 35 | color: #676767; 36 | /* background-color: #676767; */ 37 | background-color: white; 38 | } 39 | 40 | #continue:hover { 41 | color: white; 42 | background-color: #1ed760; 43 | } 44 | 45 | .disabled:hover { 46 | cursor: not-allowed !important; 47 | } 48 | 49 | .error-info { 50 | margin: auto; 51 | text-align: center; 52 | width: 40%; 53 | background: red; 54 | word-wrap: break-word; 55 | color: white; 56 | margin-bottom: 8px; 57 | } 58 | 59 | .container { 60 | text-align: center; 61 | height: 100%; 62 | } 63 | 64 | h1 { 65 | width: 100%; 66 | margin:0; 67 | padding-bottom: 5px; 68 | } 69 | 70 | .container:hover { 71 | cursor: pointer; 72 | } -------------------------------------------------------------------------------- /src/app/login/login.html: -------------------------------------------------------------------------------- 1 |
2 | 
4 | {{ title }}
3 |{{errorMessageSubText}}