Skip to content

Commit f67c371

Browse files
queadquead
committed
1.7 - Updating trending videos featured
1 parent d8a3ce4 commit f67c371

File tree

5 files changed

+84
-28
lines changed

5 files changed

+84
-28
lines changed

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

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,32 +27,40 @@
2727
</div>
2828
</div>
2929
</form>
30-
<div *ngIf="feedVideos" id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
31-
<div *ngIf="trendingFirst.video.id" class="video-list-featured">
32-
<p>{{ trendingFirst.bannerURL }}</p>
33-
<p>{{ trendingFirst.video.title }}</p>
34-
<p>{{ trendingFirst.video.img }}</p>
35-
<p>{{ trendingFirst.stats.subscribers | number:'1.0' }}</p>
36-
<p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
37-
<p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>
38-
<div class="video-item-details">
39-
<p class="stats-views"><span class="fa fa-eye"></span> {{ trendingFirst.video.stats.views | number:'1.0' }}</p>
40-
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ trendingFirst.video.stats.likes | number:'1.0' }}</p>
41-
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ trendingFirst.video.stats.dislikes| number:'1.0' }}</p>
42-
</div>
30+
<ng-container *ngIf="feedVideos">
31+
<div [ngStyle]="{'background-image': 'url(' + trendingFirst.bannerURL + ')'}" class="video-list-featured">
32+
<div class="video-item" (click)="onClickVideo($event, i, 3)">
33+
<div *ngIf="thumbnails" class="video-item-image">
34+
<img src="{{ trendingFirst.video.img }}" alt="feed video thumbnail" />
35+
</div>
36+
<div class="video-item-content">
37+
<p>{{ trendingFirst.video.title }}</p>
38+
<div class="video-item-details">
39+
<p class="stats-views"><span class="fa fa-eye"></span> {{ trendingFirst.video.stats.views | number:'1.0' }}</p>
40+
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ trendingFirst.video.stats.likes | number:'1.0' }}</p>
41+
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ trendingFirst.video.stats.dislikes | number:'1.0' }}</p>
42+
</div>
43+
</div>
44+
</div>
45+
<!--
46+
<p>{{ trendingFirst.stats.subscribers | number:'1.0' }}</p>
47+
<p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
48+
<p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
4349
</div>
44-
<div *ngFor="let feedVideo of feedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i, 3)">
45-
<div *ngIf="thumbnails" class="video-item-image">
46-
<img src="{{ feedVideo.snippet.thumbnails.medium.url }}" alt="feed video thumbnail" />
47-
</div>
48-
<div class="video-item-content">
49-
<p>{{ feedVideo.snippet.title }}</p>
50-
<div class="video-item-details">
51-
<p class="stats-views"><span class="fa fa-eye"></span> {{ feedVideo.statistics.viewCount | number:'1.0' }}</p>
52-
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ feedVideo.statistics.likeCount | number:'1.0' }}</p>
53-
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ feedVideo.statistics.dislikeCount | number:'1.0' }}</p>
50+
<div id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
51+
<div *ngFor="let feedVideo of feedVideos; let i = index" [attr.data-index]="i" class="video-item" (click)="onClickVideo($event, i, 3)">
52+
<div *ngIf="thumbnails" class="video-item-image">
53+
<img src="{{ feedVideo.snippet.thumbnails.medium.url }}" alt="feed video thumbnail" />
54+
</div>
55+
<div class="video-item-content">
56+
<p>{{ feedVideo.snippet.title }}</p>
57+
<div class="video-item-details">
58+
<p class="stats-views"><span class="fa fa-eye"></span> {{ feedVideo.statistics.viewCount | number:'1.0' }}</p>
59+
<p class="stats-likes"><span class="fa fa-thumbs-up"></span> {{ feedVideo.statistics.likeCount | number:'1.0' }}</p>
60+
<p class="stats-dislikes"><span class="fa fa-thumbs-down"></span> {{ feedVideo.statistics.dislikeCount | number:'1.0' }}</p>
61+
</div>
5462
</div>
5563
</div>
5664
</div>
57-
</div>
65+
</ng-container>
5866
</div>

‎src/app/config/shared.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export class SharedService {
3838
this.youtube.getChannel(result.items[0].snippet.channelId).subscribe(
3939
result => {
4040
this.channel = result;
41-
console.log(result);
4241
});
4342
observer.next(this.feedVideos);
4443
observer.complete();

‎src/assets/css/main.css

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1086,10 +1086,36 @@ iframe {
10861086
background-color: rgba(255, 255, 255, 0.3);
10871087
}
10881088

1089+
.video-list-featured {
1090+
margin: 10px -20px 0;
1091+
height: 200px;
1092+
background-position: center center;
1093+
background-size: cover;
1094+
position: relative;
1095+
}
1096+
1097+
.video-list-featured .video-item {
1098+
position: absolute;
1099+
bottom: 10px;
1100+
left: 15px;
1101+
width: auto;
1102+
padding: 5px 10px;
1103+
background-color: rgba(255, 255, 255, 0.9);
1104+
}
1105+
1106+
.video-list-featured .video-item-image {
1107+
width: 55px;
1108+
height: auto;
1109+
}
1110+
1111+
.video-list-featured .video-item > div {
1112+
display: inline-block;
1113+
}
1114+
10891115
#feed-video-list {
10901116
top: inherit;
10911117
bottom: 0;
1092-
height: calc(100% - 100px);
1118+
height: calc(100% - 300px);
10931119
width: calc(100% - 20px);
10941120
max-height: none;
10951121
left: 0;

‎src/assets/scss/_videos.scss

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,33 @@ iframe {
194194
}
195195
}
196196

197+
.video-list-featured {
198+
margin: 10px -20px 0;
199+
height: 200px;
200+
background-position: center center;
201+
background-size: cover;
202+
position: relative;
203+
.video-item {
204+
position: absolute;
205+
bottom: 10px;
206+
left: 15px;
207+
width: auto;
208+
padding: 5px 10px;
209+
background-color: rgba($c-white, 0.9);
210+
&-image {
211+
width: 55px;
212+
height: auto;
213+
}
214+
> div {
215+
display: inline-block;
216+
}
217+
}
218+
}
219+
197220
#feed-video-list {
198221
top: inherit;
199222
bottom: 0;
200-
height: calc(100% - 100px);
223+
height: calc(100% - 300px);
201224
width: calc(100% - 20px);
202225
max-height: none;
203226
left: 0;

‎src/assets/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"value": "AIzaSyDcMvWlqPTHg7rHm-CTVXJwpaVGXKu7cBc"
1515
}, {
1616
"name": "Country trending",
17-
"value": "RO"
17+
"value": "US"
1818
}, {
1919
"name": "Number of search results",
2020
"value": 15

0 commit comments

Comments
 (0)