Skip to content

Commit 46afd76

Browse files
mas-iotamas-iota
authored
Merge pull request #169 from BuildFire/cached-thumbnails
Cached thumbnails
2 parents e9d08c6 + f95a6f3 commit 46afd76

File tree

9 files changed

+182
-102
lines changed

9 files changed

+182
-102
lines changed

‎control/content/assets/css/bf_base.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
html {
3939
font-size: 16px !important;
4040
}
41-
body {
41+
body, span, h1, h2, h3, h4, h5, h6, p, label {
4242
font-family: 'Conv_apercu_regular','Helvetica','Sans-Serif','Arial';
4343
}
4444
/* Text */

‎control/content/assets/css/style.css‎

Lines changed: 108 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,62 @@
1-
.customTooltipBox {
2-
display: inline-block;
3-
text-align: center;
4-
margin-right: 8px;
5-
position: relative;
6-
top: 2px;
1+
/* tooltip */
2+
.tooltip-container {
3+
display: flex;
4+
align-items: center;
5+
margin-right: 13px !important;
6+
gap: 0.25rem;
7+
}
8+
.tooltip-container .btn-info-icon {
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
margin-left: 8px;
13+
min-width: 16px;
14+
min-height: 16px;
715
width: 16px;
816
height: 16px;
17+
line-height: 16px;
918
color: #fff;
10-
border-radius: 100%;
11-
}
12-
13-
.customTooltipBox::after {
14-
content: 'i';
1519
position: relative;
16-
bottom: 2px;
17-
display: block;
18-
}
19-
20-
.customTooltipBox:hover .customTooltipText {
21-
visibility: visible;
22-
opacity: 0.9;
23-
}
24-
25-
.customTooltipBox .customTooltipText {
26-
visibility: hidden;
27-
font-size: 11px;
28-
width: 300px;
29-
background-color: #414547;
20+
}
21+
.tooltip-container .btn-info-icon:after {
22+
content: 'i';
23+
font-weight: 400;
24+
font-size: 12px;
25+
font-style: normal;
26+
left: 0;
27+
top: auto !important;
28+
height: 100%;
29+
}
30+
.tooltip-container .btn-info-icon .cp-tooltip {
31+
pointer-events: none;
32+
background-color: rgba(0, 0, 0, .80);
3033
color: #fff;
31-
text-align: center;
32-
border-radius: 6px;
33-
padding: 5px;
34+
padding: 8px;
35+
border-radius: 4px;
3436
position: absolute;
35-
z-index: 1;
36-
bottom: 50%;
37-
transform: translate(10px, 50%);
38-
left: 100%;
37+
left: calc(100% + 12px);
38+
cursor: auto;
39+
font-size: 12px;
40+
text-align: left;
41+
width: 200px;
3942
opacity: 0;
40-
transition: opacity 0.3s;
41-
}
43+
transform: scale(.1);
44+
transition: opacity ease .1s, transform ease .1s;
45+
transform-origin: left;
46+
z-index: 100;
47+
font-weight: 400;
48+
line-height: 18px;
49+
font-family: 'Conv_apercu_regular','Helvetica','Sans-Serif','Arial';
50+
-webkit-text-stroke: 0;
51+
}
4252

43-
.customTooltipBox .customTooltipText::after {
53+
.tooltip-container .btn-info-icon .cp-tooltip.left-tooltip {
54+
left: auto;
55+
right: calc(100% + 12px);
56+
transform-origin: right;
57+
}
58+
59+
.tooltip-container .btn-info-icon .cp-tooltip::before {
4460
content: "";
4561
position: absolute;
4662
top: 50%;
@@ -49,27 +65,69 @@
4965
margin-left: -5px;
5066
border-width: 5px;
5167
border-style: solid;
52-
border-color: #414547 transparent transparent transparent;
53-
bottom: 1px;
54-
font-size: 13px;
55-
}
68+
border-color: rgba(0, 0, 0, .80) transparent transparent transparent;
69+
}
70+
.tooltip-container .btn-info-icon .cp-tooltip.left-tooltip::before {
71+
left: auto;
72+
right: -5px;
73+
transform: rotate(0deg) translate(0);
74+
margin-right: -5px;
75+
top: 45%;
76+
border-color: transparent transparent transparent rgba(0, 0, 0, .80);
77+
}
78+
.top-cp-tooltip::before {
79+
top: 10px !important;
80+
}
81+
82+
.tooltip-container .btn-info-icon:hover .cp-tooltip {
83+
opacity: 1;
84+
transform: scale(1);
85+
}
5686

57-
.customTooltipBox .customTooltipText {
58-
word-break: break-word;
59-
max-width: 220px;
60-
padding: 8px 12px;
61-
color: #fff;
62-
text-align: center;
63-
text-decoration: none;
64-
background-color: #32373a;
65-
border-radius: 4px;
66-
}
87+
.url-types {
88+
display: flex;
89+
flex-wrap: wrap;
90+
}
6791

6892
.url-types p {
69-
display: inline-block;
7093
margin-right: 50px;
7194
}
7295

96+
#carousel .item.clearfix .col-md-3 {
97+
width: calc(100% / 3);
98+
}
99+
100+
#carousel .item.clearfix .col-md-9 {
101+
width: calc(100% / 3*2);
102+
padding-left: 0;
103+
}
104+
105+
#carousel .item.clearfix .col-md-9 .clearfix {
106+
padding-left: 30px;
107+
width: 25%;
108+
margin-left: auto;
109+
}
110+
111+
#carousel .item.clearfix .col-md-9 .btn {
112+
float: right !important;
113+
color: #05acf0 !important;
114+
background-color: transparent !important;
115+
border: 1px solid var(--c-primary);
116+
padding: 6px 12px 6px 20px !important;
117+
width: 100%;
118+
}
119+
120+
#carousel .item.clearfix .col-md-9 .btn:hover {
121+
background-color: #f2f2f2 !important;
122+
}
123+
124+
#carousel .item.clearfix .col-md-9 .btn::before,
125+
#carousel .item.clearfix .col-md-9 .btn::after {
126+
background-color: var(--c-primary) !important;
127+
left: unset;
128+
right: 70%;
129+
}
130+
73131
.url-types p .icon-check{
74132
margin-left: 10px;
75133
color: #14cb5d;

‎control/content/controllers/content.home.controller.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@
3939
rssUrl: TAG_NAMES.DEFAULT_FEED_URL,
4040
type: "",
4141
playListID: null,
42-
videoID: null
42+
videoID: null,
43+
videoThumbnailVersion: null
4344
},
4445
design: {
4546
itemListLayout: LAYOUTS.listLayouts[0].name,
@@ -466,6 +467,10 @@
466467
}
467468
};
468469

470+
ContentHome.updateCachedVideos = function() {
471+
ContentHome.data.content.videoThumbnailVersion = Date.now();
472+
}
473+
469474
ContentHome.clearData = function() {
470475
if (!ContentHome.rssLink) {
471476
ContentHome.contentType = undefined;

‎control/content/templates/home.html‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div class="item clearfix row">
22
<div class="labels col-md-3 padding-right-zero pull-left">
33
</div>
4-
<div class="main pull-right col-md-9 padding-left-zero">
4+
<div class="main pull-right col-md-8 padding-left-zero">
55
<p class="info-note margin-zero caption margin-left-fifteen" style="font-size: 13px; word-spacing: 2px;">
66
Copy and paste a URL from YouTube to insert a <strong>Channel Feed</strong>, <strong>Playlist</strong>, or <strong>Single Video</strong>
77
</p>
88
</div>
99
</div>
1010
<hr class="none">
1111
<div class="item clearfix row margin-bottom-fifteen">
12-
<div class="labels col-md-3 padding-right-zero pull-left">
12+
<div class="labels col-md-4 padding-right-zero pull-left">
1313
<span>YouTube URL</span>
1414
</div>
15-
<div class="main pull-right col-md-9 padding-left-zero row">
16-
<div class="pull-left col-md-8 padding-zero">
15+
<div class="main pull-right col-md-8 padding-left-zero row">
16+
<div class="pull-left col-md-9 padding-zero">
1717
<input type="text" class="form-control"
1818
placeholder="Enter your channel or video URL"
1919
ng-model="ContentHome.rssLink"
@@ -22,28 +22,17 @@
2222
Please paste a valid URL from YouTube
2323
</div>
2424
</div>
25-
<div class="col-md-4 pull-right">
26-
<button class="btn btn-primary pull-right stretch"
25+
<div class="col-md-3 pull-right">
26+
<button class="btn btn-success pull-right stretch"
2727
ng-disabled="!(ContentHome.rssLink) || loading"
2828
ng-click="ContentHome.validateRssLink()">
2929
{{loading ? 'Validating URL...' : 'Validate URL'}}
3030
</button>
3131
</div>
3232
</div>
3333
</div>
34-
<!-- <div class="item clearfix row">
35-
<div class="main pull-right col-md-9">
36-
<div class="alert alert-success alert-sm text-center margin-bottom-ten"
37-
ng-show="ContentHome.validLinkSuccess">Feed
38-
successfully validated as {{ContentHome.detectedType}}
39-
</div>
40-
<div class="alert alert-danger alert-sm text-center margin-bottom-ten"
41-
ng-show="ContentHome.validLinkFailure">{{ContentHome.failureMessage}}
42-
</div>
43-
</div>
44-
</div> -->
4534
<div class="item clearfix row margin-bottom-fifteen">
46-
<div class="main pull-right col-md-9">
35+
<div class="main pull-right col-md-8">
4736

4837
<p class="info-note-no-bg margin-bottom-ten caption">
4938
Please use the full video URL and not the shortened URL
@@ -54,30 +43,30 @@
5443
</p>
5544

5645
<div class="url-types">
57-
<p style="line-height: 1.33;">
58-
<span class="customTooltipBox btn-primary">
59-
<span class="customTooltipText">
46+
<p class="tooltip-container" style="line-height: 1.33;">
47+
<span class="btn-info-icon btn-primary margin-left-zero">
48+
<span class="cp-tooltip">
6049
Navigate to a channel on YouTube and copy then paste the URL above
6150
</span>
6251
</span>
6352
Channel Feed URL <span class="icon-check" ng-if="ContentHome.contentType === ContentHome.CONTENT_TYPE.CHANNEL_FEED"></span>
6453
</p>
6554

66-
<p style="line-height: 1.33;">
67-
<span class="customTooltipBox btn-primary">
68-
<span class="customTooltipText">
55+
<p class="tooltip-container" style="line-height: 1.33;">
56+
<span class="btn-info-icon btn-primary margin-left-zero">
57+
<span class="cp-tooltip">
6958
Navigate to a channel on YouTube; go to the “Playlist” tab; Then open the playlist; Copy then paste the URL above
7059
</span>
71-
</span>
60+
</span>
7261
Playlist URL <span class="icon-check" ng-if="ContentHome.contentType === ContentHome.CONTENT_TYPE.PLAYLIST_FEED"></span>
7362
</p>
7463

75-
<p style="line-height: 1.33;">
76-
<span class="customTooltipBox btn-primary">
77-
<span class="customTooltipText">
64+
<p class="tooltip-container" style="line-height: 1.33;">
65+
<span class="btn-info-icon btn-primary margin-left-zero">
66+
<span class="cp-tooltip left-tooltip">
7867
Navigate to a video on YouTube and copy then paste the URL above
79-
</span>
80-
</span>
68+
</span>
69+
</span>
8170

8271
Single Video URL <span class="icon-check" ng-if="ContentHome.contentType === ContentHome.CONTENT_TYPE.SINGLE_VIDEO"></span>
8372
</p>
@@ -86,9 +75,29 @@
8675

8776
</div>
8877
</div>
78+
<div class="item clearfix row margin-bottom-fifteen" ng-show="(ContentHome.contentType == ContentHome.CONTENT_TYPE.CHANNEL_FEED) || (ContentHome.contentType == ContentHome.CONTENT_TYPE.PLAYLIST_FEED)">
79+
<div class="labels col-md-4 padding-right-zero pull-left">
80+
<span class="tooltip-container">
81+
Update Video Thumbnails
82+
<span class="btn-info-icon btn-primary">
83+
<span class="cp-tooltip">
84+
Refresh video thumbnails in the list if you've updated them on any of your YouTube videos.
85+
</span>
86+
</span>
87+
</span>
88+
</div>
89+
<div class="main pull-right col-md-8 padding-left-zero row">
90+
<div class="col-md-3 pull-right">
91+
<button class="stretch btn btn-primary btn-outlined pull-right"
92+
ng-disabled="loading"
93+
ng-click="ContentHome.updateCachedVideos()"> Refresh Now
94+
</button>
95+
</div>
96+
</div>
97+
</div>
8998
<div class="margin-bottom-fifteen" id="carousel" ng-show="ContentHome.contentType == ContentHome.CONTENT_TYPE.CHANNEL_FEED || (ContentHome.contentType == ContentHome.CONTENT_TYPE.PLAYLIST_FEED)"></div>
9099
<div class="item clearfix row " ng-show="(ContentHome.contentType == ContentHome.CONTENT_TYPE.CHANNEL_FEED) || (ContentHome.contentType == ContentHome.CONTENT_TYPE.PLAYLIST_FEED)">
91-
<div class="labels col-md-3 padding-right-zero pull-left">
100+
<div class="labels col-md-4 padding-right-zero pull-left">
92101
<span>Summary Text</span>
93102
</div>
94103
</div>

‎widget/app.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"Buildfire",
3131
function(Buildfire) {
3232
filter.$stateful = true;
33-
function filter(url, width, height, type) {
33+
function filter(url, width, height, type, videoThumbnailVersion) {
3434
var _imgUrl;
3535
if (!_imgUrl) {
3636
if (type == "resize") {
@@ -58,6 +58,9 @@
5858
}
5959
}
6060

61+
if (videoThumbnailVersion) {
62+
_imgUrl = _imgUrl + `&_v=${videoThumbnailVersion}`;
63+
}
6164
return _imgUrl;
6265
}
6366
return filter;
@@ -199,7 +202,7 @@
199202
])
200203
.filter("cropImage", [
201204
function() {
202-
function filter(url, width, height, noDefault) {
205+
function filter(url, width, height, noDefault, videoThumbnailVersion) {
203206
var _imgUrl;
204207
filter.$stateful = true;
205208
if (noDefault) {
@@ -217,6 +220,10 @@
217220
}
218221
);
219222
}
223+
224+
if (videoThumbnailVersion) {
225+
_imgUrl = _imgUrl + `&_v=${videoThumbnailVersion}`;
226+
}
220227
return _imgUrl;
221228
}
222229
return filter;

0 commit comments

Comments
 (0)