From 7915abd833e1ab7a72ad27b3ec52020ac9ab7051 Mon Sep 17 00:00:00 2001 From: Inverle Date: Mon, 30 Jun 2025 12:01:56 +0200 Subject: Implement custom feed favicons (#7646) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #3789, #6503 Icon setting when no custom icon is set yet: ![image](https://github.com/user-attachments/assets/28b07dd0-7dac-4c76-b1d7-77035f91a87a) - `Change...` button opens a file dialog, and after selecting a file shows the chosen icon in the preview on the left. `Submit` must be clicked after selecting the icon. - `Reset to default` changes the preview icon to the default one, and also requires `Submit` to be clicked to apply the changes. Full list of changes: - CSP now includes `blob:` in `img-src` for - `indexAction()` and `feedAction()` in `subscriptionController.php` - all of the view actions in `indexController.php` - Introduce new attribute `customFavicon (boolean)` for feeds that indicates if the feed has a custom favicon - `hashFavicon()` in `Feed.php` is dependent on this attribute - `hashFavicon()` has a new parameter called `skipCache (boolean)` that allows the reset of the favicon hash for the Feed object - `resetFaviconHash()` just calls `hashFavicon(skipCache: true)` - `f.php` URLs now have the format of `/f.php?h=XXXXX&t=cachebuster`, where the `t` parameter is only used for serving custom favicons - if `t` parameter is set, `f.php` returns a `Cache-Control: immutable` header - `stripos` and `strpos` were changed to `str_contains` in various places (refactor) - JS for handling the custom favicon configuration logic is in `extra.js` inside `init_update_feed()` which is called when feed configuration is opened from the aside or when the subscription management page with the feed is loaded - Server-side code for uploading the icon in `subscriptionController.php` under `feedAction()` - Errors that may occur during the setting of a custom favicon: - Unsupported image file type (handled only server-side with `isImgMime()`) - When the file is bigger than 1 MiB (default), handled both client-side and server-side - Standard feed error when `updateFeed()` fails - JS vars `javascript_vars.phtml` are no longer escaped with `htmlspecialchars()`, instead with json encoding, - CSS for disabled buttons was added - Max favicon file size is configurable with the `max_favicon_upload_size` option in `config.php` (not exposed via UI) - Custom favicons are currently deleted only when they are either reset to the default icon, or the feed gets deleted. They do not get deleted when the user deletes their account without removing their feeds first. - ` faviconPrepare()` and `faviconRebuild()` are not allowed to be called when the `customFavicon` attribute is `true` - New i18n strings: - `'sub.feed.icon' => 'Icon'` - `'sub.feed.change_favicon' => 'Change…'` - `'sub.feed.reset_favicon' => 'Reset to default'` - `'sub.feed.favicon_changed_by_ext' => 'The icon has been set by the %s extension.'` - `'feedback.sub.feed.favicon.too_large' => 'Uploaded icon is too large. The maximum file size is %s.'` - `'feedback.sub.feed.favicon.unsupported_format' => 'Unsupported image file format!'` - Extension hook `custom_favicon_hash` - `setCustomFavicon()` method - `resetCustomFavicon()` method - `customFaviconExt` and `customFaviconDisallowDel` attributes - example of usage: https://github.com/FreshRSS/Extensions/pull/337 - Extension hook `custom_favicon_btn_url` - Allows extensions to implement a button for setting a custom favicon for individual feeds by providing an URL. The URL will be sent a POST request with the `extAction` field set to either `query_icon_info` or `update_icon`, along with an `id` field which describes the feed's ID. --- p/f.php | 5 +- p/scripts/extra.js | 146 +++++++++++++++++++++++++++++++++++++++ p/scripts/main.js | 7 +- p/themes/Origine/origine.css | 2 +- p/themes/Origine/origine.rtl.css | 2 +- p/themes/base-theme/frss.css | 46 ++++++++++++ p/themes/base-theme/frss.rtl.css | 46 ++++++++++++ 7 files changed, 245 insertions(+), 9 deletions(-) (limited to 'p') diff --git a/p/f.php b/p/f.php index eafb92710..71859d6d1 100644 --- a/p/f.php +++ b/p/f.php @@ -14,7 +14,7 @@ function show_default_favicon(int $cacheSeconds = 3600): void { } } -$id = $_SERVER['QUERY_STRING'] ?? '0'; +$id = $_GET['h'] ?? '0'; if (!is_string($id) || !ctype_xdigit($id)) { $id = '0'; } @@ -53,5 +53,8 @@ if (!httpConditional($ico_mtime, mt_rand(14, 21) * 86400, 2)) { $ico_content_type = contentType($ico); header('Content-Type: ' . $ico_content_type); header('Content-Disposition: inline; filename="' . $id . '.ico"'); + if (isset($_GET['t'])) { + header('Cache-Control: immutable'); + } readfile($ico); } diff --git a/p/scripts/extra.js b/p/scripts/extra.js index e19e1e899..2a8bb61a3 100644 --- a/p/scripts/extra.js +++ b/p/scripts/extra.js @@ -144,6 +144,150 @@ function init_archiving(parent) { }); } +function init_update_feed() { + const feed_update = document.querySelector('div.post#feed_update'); + if (!feed_update) { + return; + } + + const faviconUpload = feed_update.querySelector('#favicon-upload'); + const resetFavicon = feed_update.querySelector('#reset-favicon'); + const faviconError = feed_update.querySelector('#favicon-error'); + const faviconExt = feed_update.querySelector('#favicon-ext'); + const extension = faviconExt.querySelector('b'); + const faviconExtBtn = feed_update.querySelector('#favicon-ext-btn'); + const favicon = feed_update.querySelector('.favicon'); + + function clearUploadedIcon() { + faviconUpload.value = ''; + } + function discardIconChange() { + const resetField = feed_update.querySelector('input[name="resetFavicon"]'); + if (resetField) { + resetField.remove(); + } + if (faviconExtBtn) { + faviconExtBtn.disabled = false; + extension.innerText = extension.dataset.initialExt ?? extension.innerText; + } + if (extension.innerText == '') { + faviconExt.classList.add('hidden'); + } + clearUploadedIcon(); + favicon.src = favicon.dataset.initialSrc; + + const isCustomFavicon = favicon.getAttribute('src') !== favicon.dataset.originalIcon; + resetFavicon.disabled = !isCustomFavicon; + } + + faviconUpload.onchange = function () { + if (faviconUpload.files.length === 0) { + return; + } + + faviconExt.classList.add('hidden'); + if (faviconUpload.files[0].size > context.max_favicon_upload_size) { + faviconError.innerHTML = context.i18n.favicon_size_exceeded; + discardIconChange(); + return; + } + if (faviconExtBtn) { + faviconExtBtn.disabled = false; + extension.innerText = extension.dataset.initialExt ?? extension.innerText; + } + faviconError.innerHTML = ''; + + const resetField = feed_update.querySelector('input[name="resetFavicon"]'); + if (resetField) { + resetField.remove(); + } + resetFavicon.disabled = false; + favicon.src = URL.createObjectURL(faviconUpload.files[0]); + }; + + resetFavicon.onclick = function (e) { + e.preventDefault(); + if (resetFavicon.disabled) { + return; + } + if (faviconExtBtn) { + faviconExtBtn.disabled = false; + extension.innerText = extension.dataset.initialExt ?? extension.innerText; + } + + faviconExt.classList.add('hidden'); + faviconError.innerHTML = ''; + clearUploadedIcon(); + resetFavicon.insertAdjacentHTML('afterend', ''); + resetFavicon.disabled = true; + + favicon.src = favicon.dataset.originalIcon; + }; + + // Discard the icon change when the "Cancel" button is clicked + feed_update.querySelectorAll('[type="reset"]').forEach(cancelBtn => { + cancelBtn.addEventListener('click', () => { + faviconExt.classList.remove('hidden'); + faviconError.innerHTML = ''; + discardIconChange(); + }); + }); + + if (faviconExtBtn) { + faviconExtBtn.onclick = function (e) { + e.preventDefault(); + faviconExtBtn.disabled = true; + fetch(faviconExtBtn.dataset.extensionUrl, { + method: "POST", + body: new URLSearchParams({ + '_csrf': context.csrf, + 'extAction': 'query_icon_info', + 'id': feed_update.dataset.feedId + }), + }).then(resp => { + if (!resp.ok) { + faviconExtBtn.disabled = false; + return Promise.reject(resp); + } + return resp.json(); + }).then(json => { + clearUploadedIcon(); + const resetField = feed_update.querySelector('input[name="resetFavicon"]'); + if (resetField) { + resetField.remove(); + } + resetFavicon.disabled = false; + faviconError.innerHTML = ''; + faviconExt.classList.remove('hidden'); + extension.dataset.initialExt = extension.innerText; + extension.innerText = json.extName; + favicon.src = json.iconUrl; + }); + }; + faviconExtBtn.form.onsubmit = async function (e) { + const extChanged = faviconExtBtn.disabled; + const isSubmit = !e.submitter.hasAttribute('formaction'); + + if (extChanged && isSubmit) { + e.preventDefault(); + faviconExtBtn.form.querySelectorAll('[type="submit"]').forEach(el => { + el.disabled = true; + }); + await fetch(faviconExtBtn.dataset.extensionUrl, { + method: "POST", + body: new URLSearchParams({ + '_csrf': context.csrf, + 'extAction': 'update_icon', + 'id': feed_update.dataset.feedId + }), + }); + faviconExtBtn.form.onsubmit = null; + faviconExtBtn.form.submit(); + } + }; + } +} + // const freshrssSliderLoadEvent = new Event('freshrss:slider-load'); @@ -169,6 +313,7 @@ function open_slider_listener(ev) { slider.classList.add('active'); slider.scrollTop = 0; slider_content.innerHTML = this.response.body.innerHTML; + init_update_feed(); slider_content.querySelectorAll('form').forEach(function (f) { f.insertAdjacentHTML('afterbegin', ''); }); @@ -308,6 +453,7 @@ function init_extra_afterDOM() { init_select_observers(); init_configuration_alert(); init_2stateButton(); + init_update_feed(); const slider = document.getElementById('slider'); if (slider) { diff --git a/p/scripts/main.js b/p/scripts/main.js index 3e825ff96..4566a1141 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -1033,11 +1033,6 @@ function init_column_categories() { function init_shortcuts() { Object.keys(context.shortcuts).forEach(function (k) { context.shortcuts[k] = (context.shortcuts[k] || '').toUpperCase(); - if (context.shortcuts[k].indexOf('&') >= 0) { - // Decode potential HTML entities <'&"> - const parser = new DOMParser(); - context.shortcuts[k] = parser.parseFromString(context.shortcuts[k], 'text/html').documentElement.textContent; - } }); document.addEventListener('keydown', ev => { @@ -1156,7 +1151,7 @@ function init_shortcuts() { return; } if (ev.key === '?') { - window.location.href = context.urls.shortcuts.replace(/&/g, '&'); + window.location.href = context.urls.shortcuts; return; } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 5c658345c..36ca2a2de 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -201,7 +201,7 @@ th { margin-bottom: 0.25rem; } -.form-group .group-controls label { +.form-group .group-controls label:not(.btn) { padding: 0; } diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index 417a9003c..d38fbe4da 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -201,7 +201,7 @@ th { margin-bottom: 0.25rem; } -.form-group .group-controls label { +.form-group .group-controls label:not(.btn) { padding: 0; } diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 4e6a1d4fc..30e213371 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -7,6 +7,7 @@ --frss-font-color-grey-dark: #666; --frss-font-color-grey-light: #aaa; --frss-font-color-light: #fff; + --frss-font-color-disabled: #a6a6a6; --frss-background-color-error-transparent: #ff000040; --frss-font-color-error: #f00; @@ -166,11 +167,27 @@ h6 { display: none !important; } +.hidden { + display: none; +} + /*=== Paragraphs */ p { margin: 1rem 0 0.5rem; } +p.error { + color: var(--frss-font-color-error); +} + +p.error:empty { + display: none; +} + +p#favicon-ext { + text-decoration: underline; +} + p.help, .prompt p.help { margin: 0.25rem 0 0.5rem; text-align: left; @@ -205,6 +222,11 @@ img.favicon { vertical-align: middle; } +img.favicon.upload { + width: 2rem; + height: 2rem; +} + .content_thin figure, .content_medium figure { margin: 8px 0px; @@ -501,7 +523,24 @@ td.numeric { } } +input#favicon-upload { + display: none; +} + +.favicon-controls { + display: inline; +} + /*=== Buttons */ +button[disabled] { + opacity: 0.5; + color: var(--frss-font-color-disabled); +} + +button[disabled]:hover, input[disabled]:hover { + cursor: not-allowed; +} + .stick, .group { display: inline-flex; @@ -2508,6 +2547,13 @@ html.slider-active { margin-left: 0; } + .favicon-controls { + display: flex; + flex-wrap: wrap; + margin-top: 0.8rem; + gap: 0.2em; + } + .dropdown { position: inherit; } diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 67c247b62..97a5dccba 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -7,6 +7,7 @@ --frss-font-color-grey-dark: #666; --frss-font-color-grey-light: #aaa; --frss-font-color-light: #fff; + --frss-font-color-disabled: #a6a6a6; --frss-background-color-error-transparent: #ff000040; --frss-font-color-error: #f00; @@ -166,11 +167,27 @@ h6 { display: none !important; } +.hidden { + display: none; +} + /*=== Paragraphs */ p { margin: 1rem 0 0.5rem; } +p.error { + color: var(--frss-font-color-error); +} + +p.error:empty { + display: none; +} + +p#favicon-ext { + text-decoration: underline; +} + p.help, .prompt p.help { margin: 0.25rem 0 0.5rem; text-align: right; @@ -205,6 +222,11 @@ img.favicon { vertical-align: middle; } +img.favicon.upload { + width: 2rem; + height: 2rem; +} + .content_thin figure, .content_medium figure { margin: 8px 0px; @@ -501,7 +523,24 @@ td.numeric { } } +input#favicon-upload { + display: none; +} + +.favicon-controls { + display: inline; +} + /*=== Buttons */ +button[disabled] { + opacity: 0.5; + color: var(--frss-font-color-disabled); +} + +button[disabled]:hover, input[disabled]:hover { + cursor: not-allowed; +} + .stick, .group { display: inline-flex; @@ -2508,6 +2547,13 @@ html.slider-active { margin-right: 0; } + .favicon-controls { + display: flex; + flex-wrap: wrap; + margin-top: 0.8rem; + gap: 0.2em; + } + .dropdown { position: inherit; } -- cgit v1.2.3