Skip to content

Commit 15c5e8c

Browse files
queadquead
committed
1.1 - Cleaning the code and reorganised footer
1 parent 2ee0cd4 commit 15c5e8c

File tree

8 files changed

+148
-59
lines changed

8 files changed

+148
-59
lines changed

‎src/app/components/youtube-search.component.html

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</div>
99
<div *ngIf="searchForm.valid" id="search-video-list" class="video-list">
1010
<div *ngFor="let video of videos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i)">
11-
<div class="video-item-image">
11+
<div *ngIf="searchVideoImage" class="video-item-image">
1212
<img src="{{ video.snippet.thumbnails.default.url }}" alt="video thumbnail" />
1313
</div>
1414
<div class="video-item-content">
@@ -23,7 +23,7 @@
2323
</div>
2424
<div *ngFor="let relatedVideo of relatedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickRelatedVideo($event, i)">
2525
<div class="video-item-image">
26-
<img src="{{ relatedVideo.snippet.thumbnails.high.url }}" alt="video thumbnail" />
26+
<img src="{{ relatedVideo.snippet.thumbnails.high.url }}" alt="related video thumbnail" />
2727
</div>
2828
<div class="video-item-content">
2929
<h2>{{ relatedVideo.snippet.title }}</h2>
@@ -43,25 +43,34 @@ <h2>{{ relatedVideo.snippet.title }}</h2>
4343
<youtube-player [videoId]="currentVideoID" (ready)="savePlayer($event)" (change)="onStateChange($event)" [playerVars]="playerVars()"></youtube-player>
4444
</main>
4545
<footer>
46-
<div class="volume-range-value" [ngClass]="videoCurVolume <= 0 ? 'inactive' : 'active'">
47-
<span class="fa" (click)="toggleMute()" [ngClass]="currentMuteState ? 'fa-volume-off' : 'fa-volume-up'"></span>
48-
<div class="volume-input-container">
49-
<input type="range" id="youtube-volume-range" class="volume-input" [value]="videoCurVolume" min="0" max="100" #volumeRange (mouseup)="volumeRangeMouseUp(volumeRange.value)">
50-
<span class="volume-input-shadow" [ngClass]="{'inactive': currentMuteState }" [style.width]="volumeRange.value + '%'"></span>
46+
<div class="col col-3">
47+
<div *ngIf="currentVideoName" class="current-video-details">
48+
<img src="{{ currentVideoImage }}" class="current-video-thumbnail" alt="current video thumbnail" />
49+
<p class="current-video-name">{{ currentVideoName }}</p>
5150
</div>
51+
<p *ngIf="!currentVideoName" class="current-video-none">Not Playing</p>
5252
</div>
53-
<p *ngIf="currentVideoName" class="current-video-name">{{ currentVideoName }}</p>
54-
<p *ngIf="!currentVideoName" class="current-video-name">Not Playing</p>
55-
<div class="current-video-range">
56-
<input type="range" id="youtube-player-range" class="player-range" [ngClass]="videoMaxRange <= 0 ? 'inactive' : 'active'" [value]="videoCurRange" min="0" max="{{videoMaxRange}}" (mousedown)="RangeNouseDown($event)" #videoRange (mouseup)="RangeMouseUp(videoRange.value)">
57-
<p class="current-video-range-value">{{videoCurFull}}</p>
58-
<p class="current-video-range-max-value">{{videoMaxFull}}</p>
53+
<div class="col col-6">
54+
<div id="player-controls">
55+
<div class="player-buttons">
56+
<button id="previous-song" ondragstart="return false;"><span class="fa fa-backward"></span></button>
57+
<button id="play-song" (click)="playPauseVideo()" ><span class="fa" [ngClass]="currentState === 1 ? 'fa-pause' : 'fa-play' "></span></button>
58+
<button id="next-song"><span class="fa fa-forward"></span></button>
59+
</div>
60+
</div>
61+
<div class="current-video-range">
62+
<input type="range" id="youtube-player-range" class="player-range" [ngClass]="videoMaxRange <= 0 ? 'inactive' : 'active'" [value]="videoCurRange" min="0" max="{{videoMaxRange}}" (mousedown)="RangeNouseDown($event)" #videoRange (mouseup)="RangeMouseUp(videoRange.value)">
63+
<p class="current-video-range-value">{{videoCurFull}}</p>
64+
<p class="current-video-range-max-value">{{videoMaxFull}}</p>
65+
</div>
5966
</div>
60-
<div id="player-controls">
61-
<div class="player-buttons">
62-
<button id="previous-song" ondragstart="return false;"><span class="fa fa-backward"></span></button>
63-
<button id="play-song" (click)="playPauseVideo()" ><span class="fa" [ngClass]="currentState === 1 ? 'fa-pause' : 'fa-play' "></span></button>
64-
<button id="next-song"><span class="fa fa-forward"></span></button>
67+
<div class="col col-2">
68+
<div class="volume-range-value" [ngClass]="videoCurVolume <= 0 ? 'inactive' : 'active'">
69+
<span class="fa" (click)="toggleMute()" [ngClass]="currentMuteState ? 'fa-volume-off' : 'fa-volume-up'"></span>
70+
<div class="volume-input-container">
71+
<input type="range" id="youtube-volume-range" class="volume-input" [value]="videoCurVolume" min="0" max="100" #volumeRange (mouseup)="volumeRangeMouseUp(volumeRange.value)">
72+
<span class="volume-input-shadow" [ngClass]="{'inactive': currentMuteState }" [style.width]="volumeRange.value + '%'"></span>
6573
</div>
74+
</div>
6675
</div>
6776
</footer>

‎src/app/components/youtube-search.component.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,14 @@ export class SearchComponent implements OnInit {
2020

2121
videos: any;
2222
relatedVideos = false;
23-
debuggingInfo = true;
23+
24+
debuggingInfo: boolean;
25+
searchVideoImage: boolean;
2426

2527
player: YT.Player;
2628
currentVideoID = 'Not Exist';
2729
currentVideoName: string;
30+
currentVideoImage: string;
2831
currentState: number;
2932
currentMuteState = true;
3033

@@ -65,15 +68,15 @@ export class SearchComponent implements OnInit {
6568
console.log('error on search');
6669
}
6770
);
68-
})
71+
});
6972
}
7073

7174
playerVars() {
7275
const playerVars = {
7376
'controls': 0,
7477
'disablekb': 1,
7578
'rel': 0
76-
}
79+
};
7780
return playerVars;
7881
}
7982

@@ -84,6 +87,12 @@ export class SearchComponent implements OnInit {
8487
} else {
8588
this.debuggingInfo = event.settings[0];
8689
}
90+
91+
if (event.settings[1].selected != null) {
92+
this.searchVideoImage = event.settings[1].selected;
93+
} else {
94+
this.searchVideoImage = event.settings[1];
95+
}
8796
}
8897

8998
getRelatedVideos() {
@@ -114,6 +123,7 @@ export class SearchComponent implements OnInit {
114123
const clickedVideo = this.videos[i];
115124
this.currentVideoID = clickedVideo.id.videoId;
116125
this.currentVideoName = clickedVideo.snippet.title;
126+
this.currentVideoImage = clickedVideo.snippet.thumbnails.default.url;
117127
this.player.loadVideoById(this.currentVideoID);
118128
this.getRelatedVideos();
119129
this.clearSearch();
@@ -123,6 +133,7 @@ export class SearchComponent implements OnInit {
123133
const clickedVideo = this.relatedVideos[i];
124134
this.currentVideoID = clickedVideo.id.videoId;
125135
this.currentVideoName = clickedVideo.snippet.title;
136+
this.currentVideoImage = clickedVideo.snippet.thumbnails.default.url;
126137
this.player.loadVideoById(this.currentVideoID);
127138
this.getRelatedVideos();
128139
}

‎src/app/components/youtube-settings.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export class SettingsComponent implements OnInit {
1818

1919
playerAttr = {
2020
settings: []
21-
}
21+
};
2222

2323
constructor(private fb: FormBuilder, private http: Http) {
2424
this.fb = fb;
@@ -44,7 +44,7 @@ export class SettingsComponent implements OnInit {
4444
.map(res => res.json())
4545
.subscribe(
4646
data => {
47-
this.playerAttr.settings = data
47+
this.playerAttr.settings = data;
4848
},
4949
err => console.log('JSON Settings ' + err),
5050
() => {
@@ -66,7 +66,7 @@ export class SettingsComponent implements OnInit {
6666
mapSettings() {
6767
const arr = this.playerAttr.settings.map(s => {
6868
return this.fb.control(s.selected);
69-
})
69+
});
7070
return this.fb.array(arr);
7171
}
7272

‎src/app/config/youtube.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ export class YoutubeGetVideo {
1212

1313
searchVideo(query: string) {
1414
return this.http.get(this.url + '&q=' + query + '&maxResults=15&type=video&key=' + this.apiKey)
15-
.map(response => response.json())
15+
.map(response => response.json());
1616
}
1717

1818
relatedVideos(query: string) {
1919
return this.http.get(this.url + '&relatedToVideoId=' + query + '&maxResults=15&type=video&key=' + this.apiKey)
20-
.map(response => response.json())
20+
.map(response => response.json());
2121
}
2222
}

‎src/assets/css/main.css

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -300,22 +300,59 @@ header h1 {
300300
}
301301

302302
footer {
303+
background-color: #e52d27;
303304
position: absolute;
305+
display: flex;
306+
align-items: center;
304307
height: 85px;
305308
width: 100%;
306309
bottom: 0;
307-
padding: 5px 0;
308-
text-align: center;
309-
background-color: #e52d27;
310+
padding: 5px 15px;
311+
}
312+
313+
footer .col {
314+
padding: 0 15px;
315+
}
316+
317+
footer .col-2 {
318+
width: 16.666667%;
319+
}
320+
321+
footer .col-3 {
322+
width: 25%;
323+
}
324+
325+
footer .col-6 {
326+
width: 50%;
327+
}
328+
329+
footer .col:first-child {
330+
padding-left: 0;
331+
}
332+
333+
footer .col:last-child {
334+
margin-left: auto;
335+
padding-right: 0;
336+
}
337+
338+
.current-video-details {
339+
display: flex;
340+
align-items: center;
341+
}
342+
343+
.current-video-thumbnail {
344+
height: 45px;
345+
width: auto;
310346
}
311347

312348
.current-video-name {
313349
color: #ffffff;
314-
margin: 0 0 4px;
315-
overflow: hidden;
316-
white-space: nowrap;
317-
text-overflow: ellipsis;
318-
margin: 0 15px 0 15px;
350+
margin: 0 0 0 10px;
351+
}
352+
353+
.current-video-none {
354+
margin: 0;
355+
color: #ffffff;
319356
}
320357

321358
.player-buttons {
@@ -367,7 +404,8 @@ footer {
367404

368405
.current-video-range {
369406
position: relative;
370-
width: 350px;
407+
width: calc(100% - 130px);
408+
max-width: 350px;
371409
margin: 0 auto;
372410
}
373411

@@ -426,11 +464,8 @@ footer {
426464
color: #ffffff;
427465
display: flex;
428466
align-items: center;
429-
position: absolute;
467+
margin-left: auto;
430468
width: 100px;
431-
right: 20px;
432-
top: 50%;
433-
transform: translateY(-50%);
434469
}
435470

436471
.volume-range-value span {
@@ -709,7 +744,6 @@ iframe {
709744

710745
#related-video-list .video-item:hover {
711746
z-index: 1;
712-
box-shadow: 0px 3px 10px 2px rgba(33, 33, 33, 0.1);
713747
}
714748

715749
#related-video-list .video-item:hover .video-item-image:before {
@@ -723,6 +757,10 @@ iframe {
723757
visibility: visible;
724758
}
725759

760+
#related-video-list .video-item:hover h2 {
761+
color: #e52d27;
762+
}
763+
726764
#related-video-list .video-item-image {
727765
flex: inherit;
728766
margin: 0;
@@ -772,7 +810,7 @@ iframe {
772810
cursor: pointer;
773811
background-color: #ffffff;
774812
color: #212121;
775-
padding: 2px 10px;
813+
padding: 1px 10px;
776814
border-radius: 20px;
777815
}
778816

‎src/assets/scss/_footer.scss

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,51 @@
11
footer {
2+
background-color: $c-primary;
23
position: absolute;
4+
display: flex;
5+
align-items: center;
36
height: 85px;
47
width: 100%;
58
bottom: 0;
6-
padding: 5px 0;
7-
text-align: center;
8-
background-color: $c-primary;
9+
padding: 5px 15px;
10+
.col {
11+
padding: 0 15px;
12+
&-2 {
13+
width: 16.666667%;
14+
}
15+
&-3 {
16+
width: 25%;
17+
}
18+
&-6 {
19+
width: 50%;
20+
}
21+
&:first-child {
22+
padding-left: 0;
23+
}
24+
&:last-child {
25+
margin-left: auto;
26+
padding-right: 0;
27+
}
28+
}
29+
}
30+
31+
.current-video-details {
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
.current-video-thumbnail {
37+
height: 45px;
38+
width: auto;
939
}
1040

1141
.current-video-name {
1242
color: $c-white;
13-
margin: 0 0 4px;
14-
overflow: hidden;
15-
white-space: nowrap;
16-
text-overflow: ellipsis;
17-
margin: 0 15px 0 15px;
43+
margin: 0 0 0 10px;
44+
}
45+
46+
.current-video-none {
47+
margin: 0;
48+
color: $c-white;
1849
}
1950

2051
.player-buttons {
@@ -60,7 +91,8 @@ footer {
6091

6192
.current-video-range {
6293
position: relative;
63-
width: 350px;
94+
width: calc(100% - 130px);
95+
max-width: 350px;
6496
margin: 0 auto;
6597
.current-video-range-max-value,
6698
.current-video-range-value {
@@ -113,11 +145,8 @@ footer {
113145
color: $c-white;
114146
display: flex;
115147
align-items: center;
116-
position: absolute;
148+
margin-left: auto;
117149
width: 100px;
118-
right: 20px;
119-
top: 50%;
120-
transform: translateY(-50%);
121150
span {
122151
width: 15px;
123152
margin-right: auto;

0 commit comments

Comments
 (0)