Skip to content

Commit 76c6021

Browse files
eightantseightants
committed
Alternate ssr method by serving html on node server
1 parent a621ba8 commit 76c6021

File tree

10 files changed

+368
-193
lines changed

10 files changed

+368
-193
lines changed

‎application/angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"aot": false,
2626
"assets": [
2727
"src/favicon.ico",
28-
"src/assets"
28+
"src/assets",
29+
"src/ssr"
2930
],
3031
"styles": [
3132
"src/styles.scss",

‎application/src/app/app.component.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Injectable, Inject, PLATFORM_ID } from '@angular/core';
22
import { Router, NavigationEnd } from '@angular/router';
33
import {DatastoreService} from './components/services/datastore.service';
4+
import {isPlatformBrowser} from '@angular/common';
45

56
declare let gtag: Function;
67

@@ -9,8 +10,9 @@ declare let gtag: Function;
910
templateUrl: './app.component.html',
1011
styleUrls: ['./app.component.scss'],
1112
})
13+
@Injectable()
1214
export class AppComponent implements OnInit {
13-
constructor(private router: Router, private data: DatastoreService) {}
15+
constructor(private router: Router, private data: DatastoreService, @Inject(PLATFORM_ID) protected platformId: Object) {}
1416

1517
title = 'Whisperify';
1618

@@ -22,9 +24,11 @@ export class AppComponent implements OnInit {
2224

2325
ngOnInit() {
2426
// on load, if url contains ? (means that it's authenticated), will call checkUrl()
25-
this.url = window.location.href;
26-
if (this.url.includes("?")) {
27-
this.checkUrl();
27+
if (isPlatformBrowser(this.platformId)) {
28+
this.url = window.location.href;
29+
if (this.url.includes("?")) {
30+
this.checkUrl();
31+
}
2832
}
2933
this.router.events.subscribe(event => {
3034
if (event instanceof NavigationEnd) {

‎application/src/app/components/about/about.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<app-navbar></app-navbar>
33
<h1 class="sec-title">About</h1>
44
<p>How well do you know your favourite songs? The answer varies depending on who you ask. One of my favourite songs is Careless Whisper by George Michael. Interestingly, all most people needed was the first two seconds of the opening drum riff to recognise Careless Whisper. That was the main inspiration behind Whisperify. </p>
5-
<p>Whisperify is an interactive way to learn about your favourite songs on Spotify. It chooses 10 songs from your top tracks or a playlist on Spotify, and plays you 5-second snippets, or 'whispers', of each song. You get time to guess the song and scored on your speed and accuracy. You can create and share quizzes with friends</p>
5+
<p>Whisperify is an interactive way to learn about your favourite songs on Spotify. It is a Spotify quiz that chooses 10 songs from your top tracks or a playlist, and plays you 5-second snippets, or 'whispers', of each song. You get time to guess the song and scored on your speed and accuracy. You can create and share quizzes with friends</p>
66
<p>In addition to that, Whisperify provides detailed stats on the audio features of your favourite songs, and how your listening habits compare to your favourite albums, your friends, listeners with specific personalities, and listeners from all around the world. </p>
77
<p>There is something about song identification that makes an interesting pasttime and my friends have always enjoyed quizzing each other on our music. This pushed me to figure out the ideal length of a song snippet that would allow you to identify a song, and how to get a metric for performance. </p>
88
<p>If you enjoyed this application, consider ✨ <a class="p-url" href="https://github.com/eightants/whisperify" target="_blank" rel="noopener noreferrer">giving a star on Github</a> or ☕ <a class="p-url" href="https://ko-fi.com/eightants" target="_blank" rel="noopener noreferrer">buying me a coffee</a>. </p>

‎application/src/app/components/home/home.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<app-navbar></app-navbar>
33
<div class="main-text">
44
<h1 class="main-title">Whisperify</h1>
5-
<p class="main-desc anchor-desc">View stats, generate quizzes, and challenge friends. How well do you know your favourite songs?</p>
5+
<p class="main-desc anchor-desc">View stats, generate Spotify quizzes, and challenge friends. How well do you know your favourite songs?</p>
66
</div>
7-
<button class="btn clr-wgreen" (click)="onLogin()">Login With Spotify</button>
7+
<a href="https://whisperify.net/login"><button class="btn clr-wgreen">Login With Spotify</button></a>
88
</div>

‎application/src/app/components/home/home.component.ts‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Injectable, Inject, PLATFORM_ID } from '@angular/core';
22
import { TitleTagService } from '../services/title-tag.service';
3-
import { MAINURL } from "../../globals";
3+
import {isPlatformBrowser} from '@angular/common';
44

55
@Component({
66
selector: 'app-home',
77
templateUrl: './home.component.html',
88
styleUrls: ['./home.component.scss']
99
})
10+
@Injectable()
1011
export class HomeComponent implements OnInit {
1112

12-
constructor(private titleTagService: TitleTagService) { }
13+
constructor(private titleTagService: TitleTagService, @Inject(PLATFORM_ID) protected platformId: Object) { }
1314

1415
ngOnInit() {
1516
this.titleTagService.setTitle('Whisperify - Spotify Quiz and Music Analysis');
1617
this.titleTagService.setSocialMediaTags(
1718
'Whisperify - Spotify Quiz and Music Analysis',
1819
"An interactive way to learn about your favourite songs on Spotify. View stats, quiz yourself on your favourite playlists, and share quizzes with friends. "
1920
);
20-
// sets some session variables to null, which logs the user out
21-
sessionStorage.setItem("currentLink", "");
22-
sessionStorage.setItem("token", "");
23-
sessionStorage.setItem("username", "");
24-
sessionStorage.setItem("displayName", "");
21+
if (isPlatformBrowser(this.platformId)) {
22+
// sets some session variables to null, which logs the user out
23+
sessionStorage.setItem("currentLink", "");
24+
sessionStorage.setItem("token", "");
25+
sessionStorage.setItem("username", "");
26+
sessionStorage.setItem("displayname", "");
27+
}
2528
}
2629

27-
onLogin() {
28-
document.location.href = MAINURL + "login";
29-
}
30-
31-
3230
}

‎application/src/app/components/navbar/navbar.component.html‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
<div class="nav-bar">
2-
<button (click)="toMenu()" class="btn nav-btn-c"><img id='menu' src="assets/menu.svg"></button>
3-
<button (click)="toAnalysis()" class="btn nav-btn-c"><img src="assets/radar.svg"></button>
4-
<button routerLink="/about" class="btn nav-btn-c"><img id="info-icon" src="assets/info.svg"></button>
5-
<div class="nav-profile" *ngIf="username!=''">
6-
<div class="profile-btn" (click)="toggleProfile($event)">
7-
<div class="nav-pfp" [ngStyle]="{'background-image': pfp }"></div>
8-
<span class="profile-name">{{username}}</span>
9-
<span class="nav-down"></span>
10-
</div>
11-
<ul class="profile-menu" *ngIf="showProfile">
12-
<!--<li><a>Profile</a></li>-->
13-
<li><a routerLink="/top">Favourites</a></li>
14-
<li><a routerLink="/documentation">Documentation</a></li>
15-
<li><a routerLink="/">Log out</a></li>
16-
</ul>
2+
<button (click)="toMenu()" class="btn nav-btn-c">
3+
<img id="menu" src="assets/menu.svg" />
4+
</button>
5+
<button (click)="toAnalysis()" class="btn nav-btn-c">
6+
<img src="assets/radar.svg" />
7+
</button>
8+
<button routerLink="/about" class="btn nav-btn-c">
9+
<img id="info-icon" src="assets/info.svg" />
10+
</button>
11+
<div class="nav-profile" *ngIf="displayname != ''">
12+
<div class="profile-btn" (click)="toggleProfile($event)">
13+
<div class="nav-pfp" [ngStyle]="{ 'background-image': pfp }"></div>
14+
<span class="profile-name">{{ displayname }}</span>
15+
<span class="nav-down"></span>
16+
</div>
17+
<ul class="profile-menu" *ngIf="showProfile">
18+
<!--<li><a>Profile</a></li>-->
19+
<li><a routerLink="/top">Favourites</a></li>
20+
<li><a routerLink="/documentation">Documentation</a></li>
21+
<li><a routerLink="/">Log out</a></li>
22+
</ul>
1723
</div>
18-
</div>
24+
</div>
25+

‎application/src/app/components/navbar/navbar.component.ts‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
import { Component, HostListener, OnInit } from '@angular/core';
1+
import { Component, HostListener, OnInit, Injectable, Inject, PLATFORM_ID } from '@angular/core';
22
import { Router } from '@angular/router';
3+
import {isPlatformBrowser} from '@angular/common';
34
import { SpotifyService } from '../services/spotify.service';
45

56
@Component({
67
selector: 'app-navbar',
78
templateUrl: './navbar.component.html',
89
styleUrls: ['./navbar.component.scss']
910
})
11+
@Injectable()
1012
export class NavbarComponent implements OnInit {
1113

12-
constructor(private router:Router, private spotify: SpotifyService) { }
14+
constructor(private router:Router, private spotify: SpotifyService, @Inject(PLATFORM_ID) protected platformId: Object) { }
1315

1416
showProfile = false;
17+
displayname = "";
18+
token = "";
1519
username = "";
1620
pfp = "url(/assets/pfp.jpg)";
1721

@@ -21,15 +25,19 @@ export class NavbarComponent implements OnInit {
2125

2226
ngOnInit() {
2327
this.showProfile = false;
24-
this.username = sessionStorage.getItem("username") || "";
25-
this.pfp = sessionStorage.getItem("pfp");
26-
if (this.username =="" || this.pfp == "") {
27-
this.spotify.getProfile(sessionStorage.getItem('token')).then(res => {
28-
this.username = res["id"];
29-
if (res["images"].length > 0) {
30-
this.pfp = res["images"][0]["url"];
31-
}
32-
});
28+
if (isPlatformBrowser(this.platformId)) {
29+
this.displayname = sessionStorage.getItem("displayname") || "";
30+
this.username = sessionStorage.getItem("username") || "";
31+
this.pfp = sessionStorage.getItem("pfp");
32+
this.token = sessionStorage.getItem('token');
33+
if (this.token != "" && (this.displayname == "" || this.pfp == "")) {
34+
this.spotify.getProfile(this.token).then(res => {
35+
this.displayname = res["display_name"];
36+
if (res["images"].length > 0) {
37+
this.pfp = res["images"][0]["url"];
38+
}
39+
});
40+
}
3341
}
3442
}
3543

0 commit comments

Comments
 (0)