Skip to content

Commit cc82b86

Browse files
dgtlmoondgtlmoon
committed
WIP - fixing thumbanils with app context
1 parent 55bac99 commit cc82b86

File tree

6 files changed

+42
-28
lines changed

6 files changed

+42
-28
lines changed

‎changedetectionio/blueprint/watchlist/templates/watch-overview.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script src="{{url_for('static_content', group='js', filename='watch-overview.js')}}" defer></script>
66
<script>let nowtimeserver={{ now_time_server }};</script>
77
<script>let ajax_toggle_url="{{ ajax_toggle_url }}";</script>
8-
8+
<script>let thumbnail_baseURL="{{ url_for('static_content', group='thumbnail', filename="PLACEHOLDER", _external=True) }}"</script>
99
<style>
1010
.checking-now .last-checked {
1111
background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.1) 100%);
@@ -123,9 +123,8 @@
123123
<a class="ajax-op state-on mute-toggle" data-op="mute" style="display: none" href="{{url_for('watchlist.index', op='mute', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="UnMute notification" title="UnMute notification" class="icon icon-mute" ></a>
124124
</td>
125125
<td class="title-col inline">
126-
126+
<img style="display: none" class="thumbnail" {% if watch.get_screenshot() %} src="{{url_for('static_content', group='thumbnail', filename=watch.uuid)}}"{% endif %} alt="thumbnail screenshot" title="thumbnail screenshot" >
127127
<div class="title-col-inner">
128-
<img style="display: none" class="thumbnail" {% if watch.get_screenshot() %} src="{{url_for('static_content', group='thumbnail', filename=watch.uuid)}}"{% endif %} alt="thumbnail screenshot" title="thumbnail screenshot" >
129128
{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
130129
<a class="external" target="_blank" rel="noopener" href="{{ watch.link.replace('source:','') }}"></a>
131130
<a class="link-spread" href="{{url_for('ui.form_share_put_watch', uuid=watch.uuid)}}"><img src="{{url_for('static_content', group='images', filename='spread.svg')}}" class="status-icon icon icon-spread" title="Create a link to share watch config with others" ></a>

‎changedetectionio/realtime/socket_server.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ def handle_watch_update(socketio, **kwargs):
149149
'event_timestamp': time.time(),
150150
'fetch_time': watch.get('fetch_time'),
151151
'has_error': True if error_texts else False,
152+
'has_thumbnail': True if watch.get_screenshot_as_thumbnail() else False,
152153
'last_changed': watch.get('last_changed'),
153154
'last_changed_text': timeago.format(int(watch['last_changed']), time.time()) if watch.history_n >= 2 and int(watch.get('last_changed', 0)) > 0 else 'Not yet',
154155
'last_checked': watch.get('last_checked'),
@@ -157,7 +158,6 @@ def handle_watch_update(socketio, **kwargs):
157158
'paused': True if watch.get('paused') else False,
158159
'queued': True if watch.get('uuid') in queue_list else False,
159160
'unviewed': watch.has_unviewed,
160-
'thumbnail': watch.get_screenshot_as_thumbnail(),
161161
'uuid': watch.get('uuid'),
162162
}
163163

‎changedetectionio/static/js/plugins.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@
159159
// Return the current request in case it's needed
160160
return requests[namespace];
161161
};
162+
162163
})(jQuery);
163164

164165

‎changedetectionio/static/js/realtime.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,34 +71,33 @@ $(document).ready(function () {
7171
const general_stats = data.general_stats;
7272

7373
// Log the entire watch object for debugging
74-
console.log('!!! WATCH UPDATE EVENT RECEIVED !!!');
7574
console.log(`${watch.event_timestamp} - Watch update ${watch.uuid} - Checking now - ${watch.checking_now} - UUID in URL ${window.location.href.includes(watch.uuid)}`);
7675
console.log('Watch data:', watch);
7776
console.log('General stats:', general_stats);
7877

7978
// Updating watch table rows
8079
const $watchRow = $('tr[data-watch-uuid="' + watch.uuid + '"]');
81-
console.log('Found watch row elements:', $watchRow.length);
82-
8380
if ($watchRow.length) {
8481
$($watchRow).toggleClass('checking-now', watch.checking_now);
8582
$($watchRow).toggleClass('queued', watch.queued);
8683
$($watchRow).toggleClass('unviewed', watch.unviewed);
8784
$($watchRow).toggleClass('has-error', watch.has_error);
8885
$($watchRow).toggleClass('notification_muted', watch.notification_muted);
8986
$($watchRow).toggleClass('paused', watch.paused);
90-
$($watchRow).toggleClass('has-thumbnail', watch.thumbnail !== null);
87+
$($watchRow).toggleClass('has-thumbnail', watch.has_thumbnail);
9188

9289
$('td.title-col .error-text', $watchRow).html(watch.error_text)
93-
$('img.thumbnail', $watchRow).attr('src', watch.thumbnail);
9490

95-
$('td.last-changed', $watchRow).text(watch.last_checked_text)
91+
if (watch.has_thumbnail) {
92+
// Because the event could be emitted from a process that is outside the app context, url_for() might not work.
93+
// Lets use url_for at template generation time to give us a PLACEHOLDER instead
94+
$('img.thumbnail', $watchRow).attr('src', thumbnail_baseURL.replace('/PLACEHOLDER', `/${watch.uuid}`));
95+
}
9696

97+
$('td.last-changed', $watchRow).text(watch.last_checked_text)
9798
$('td.last-checked .innertext', $watchRow).text(watch.last_checked_text)
9899
$('td.last-checked', $watchRow).data('timestamp', watch.last_checked).data('fetchduration', watch.fetch_time);
99100
$('td.last-checked', $watchRow).data('eta_complete', watch.last_checked + watch.fetch_time);
100-
101-
console.log('Updated UI for watch:', watch.uuid);
102101
}
103102

104103
// Tabs at bottom of list

‎changedetectionio/static/styles/scss/parts/_lister_extra.scss

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,31 @@
99
img.thumbnail {
1010
display: inline-block !important;
1111
}
12+
&.unviewed {
13+
img.thumbnail {
14+
opacity: 1.0 !important;
15+
}
16+
}
1217
}
1318
td.title-col {
14-
.title-col-inner >*{
19+
.title-col-inner {
20+
display: inline-block;
21+
* {
1522
vertical-align: middle;
23+
}
1624
}
1725
}
1826
td.inline.title-col {
1927
img.thumbnail {
20-
width: 50px;
21-
object-fit: cover; /* crop/fill if needed */
28+
background-color: #fff; /* fallback bg for SVGs without bg */
2229
border-radius: 4px; /* subtle rounded corners */
23-
padding: 4px;
24-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* soft shadow */
2530
border: 1px solid #ddd; /* light border for contrast */
31+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* soft shadow */
2632
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
27-
background-color: #fff; /* fallback bg for SVGs without bg */
33+
margin-right: 1rem;
34+
object-fit: cover; /* crop/fill if needed */
35+
opacity: 0.5;
36+
width: 50px;
2837
}
2938
}
3039
}

‎changedetectionio/static/styles/styles.css

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -687,23 +687,29 @@ ul#conditions_match_logic {
687687
.watch-table tr.has-thumbnail img.thumbnail {
688688
display: inline-block !important; }
689689

690-
.watch-table td.title-col .title-col-inner > * {
691-
vertical-align: middle; }
690+
.watch-table tr.has-thumbnail.unviewed img.thumbnail {
691+
opacity: 1.0 !important; }
692+
693+
.watch-table td.title-col .title-col-inner {
694+
display: inline-block; }
695+
.watch-table td.title-col .title-col-inner * {
696+
vertical-align: middle; }
692697

693698
.watch-table td.inline.title-col img.thumbnail {
694-
width: 50px;
695-
object-fit: cover;
696-
/* crop/fill if needed */
699+
background-color: #fff;
700+
/* fallback bg for SVGs without bg */
697701
border-radius: 4px;
698702
/* subtle rounded corners */
699-
padding: 4px;
700-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
701-
/* soft shadow */
702703
border: 1px solid #ddd;
703704
/* light border for contrast */
705+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
706+
/* soft shadow */
704707
filter: contrast(1.05) saturate(1.1) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.2));
705-
background-color: #fff;
706-
/* fallback bg for SVGs without bg */ }
708+
margin-right: 1rem;
709+
object-fit: cover;
710+
/* crop/fill if needed */
711+
opacity: 0.5;
712+
width: 50px; }
707713

708714
body.checking-now #checking-now-fixed-tab {
709715
display: block !important; }

0 commit comments

Comments
 (0)