From 238e894377d9c3261b8bfe6e9e22435ca781b371 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 24 Dec 2017 18:18:24 -0500 Subject: [PATCH 1/3] Improve the version checking part of the changelog feature - There is no client caching of the changelog/version anymore. Instead, server returns the expiration date of its cache, and that is used by the client as well. - There is now a "Check now" button on the client that appears when data is stale. This means that info is fetched only once and never refreshed (it was refreshed every hour before) unless the user explicitly wants to check latest version, which in turn is as stale as server info is, i.e. 15 minutes max. - Button style is shared with the "Join a channel" feature, `.btn-small` (not `.btn-sm` to be explicit that this is not a Bootstrap thing). - Version checker content is now centralized in the `version_checker` template, instead of being partially in the checker template, partially in the Help template, and partially in the code. - A "Try again" button lets user attempt to fetch info instead of forcing them to reload the page. - Use Flexbox to display a nicer version checker: icon is slightly bigger, and button is always aligned on the right. - Changelog logic has been removed from `lounge.js` and moved into the component file. - Changelog template is only passed what it needs instead of everything the server gives us. - Public version now displays version checker, since server is caching things. - Cleaner code overall. --- client/css/style.css | 61 ++++++++++++++++++++-------- client/js/lounge.js | 10 +---- client/js/socket-events/changelog.js | 57 ++++++++++++++++++++++---- client/views/index.js | 2 +- client/views/join_channel.tpl | 2 +- client/views/new_version.tpl | 6 --- client/views/version_checker.tpl | 27 ++++++++++++ client/views/windows/changelog.tpl | 10 ++--- client/views/windows/help.tpl | 6 +-- src/plugins/changelog.js | 10 +++-- 10 files changed, 136 insertions(+), 55 deletions(-) delete mode 100644 client/views/new_version.tpl create mode 100644 client/views/version_checker.tpl diff --git a/client/css/style.css b/client/css/style.css index f0487c55..5fa19b02 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -137,6 +137,10 @@ kbd { cursor: pointer; /* This is useful for ` + diff --git a/client/views/new_version.tpl b/client/views/new_version.tpl deleted file mode 100644 index 8825ed16..00000000 --- a/client/views/new_version.tpl +++ /dev/null @@ -1,6 +0,0 @@ -The Lounge {{latest.version}}{{#if latest.prerelease}} (pre-release){{/if}} -is now available. - - - Read more on GitHub - diff --git a/client/views/version_checker.tpl b/client/views/version_checker.tpl new file mode 100644 index 00000000..8b75d09f --- /dev/null +++ b/client/views/version_checker.tpl @@ -0,0 +1,27 @@ +{{#equal status "loading"}} +

+ Checking for updates... +

+{{else equal status "new-version"}} +

+ The Lounge {{latest.version}}{{#if latest.prerelease}} (pre-release){{/if}} + is now available. +
+ + + Read more on GitHub + +

+{{else equal status "up-to-date"}} +

+ The Lounge is up to date! +

+ + +{{else equal status "error"}} +

+ Information about latest releases could not be retrieved. +

+ + +{{/equal}} diff --git a/client/views/windows/changelog.tpl b/client/views/windows/changelog.tpl index 2ffd5c57..222a1a6b 100644 --- a/client/views/windows/changelog.tpl +++ b/client/views/windows/changelog.tpl @@ -4,15 +4,15 @@
« Help - {{#if current}} -

Release notes for {{current.version}}

+ {{#if version}} +

Release notes for {{version}}

- {{#if current.changelog}} + {{#if changelog}}

Introduction

-
{{{current.changelog}}}
+
{{{changelog}}}
{{else}}

Unable to retrieve releases from GitHub.

-

View release notes for this version on GitHub

+

View release notes for this version on GitHub

{{/if}} {{else}}

Loading changelog…

diff --git a/client/views/windows/help.tpl b/client/views/windows/help.tpl index 8f1e9b37..2802d89e 100644 --- a/client/views/windows/help.tpl +++ b/client/views/windows/help.tpl @@ -13,11 +13,7 @@
- {{#unless public}} -

- Checking for updates... -

- {{/unless}} +
{{#if gitCommit}}

diff --git a/src/plugins/changelog.js b/src/plugins/changelog.js index 9f604102..2103ded4 100644 --- a/src/plugins/changelog.js +++ b/src/plugins/changelog.js @@ -3,6 +3,8 @@ const pkg = require("../../package.json"); const request = require("request"); +const TIME_TO_LIVE = 15 * 60 * 1000; // 15 minutes, in milliseconds + module.exports = { fetch, }; @@ -67,12 +69,14 @@ function fetch(callback) { } } - // Emptying cached information after 15 minutes + // Add expiration date to the data to send to the client for later refresh + versions.expiresAt = Date.now() + TIME_TO_LIVE; + + // Emptying cached information after reaching said expiration date setTimeout(() => { delete versions.current.changelog; delete versions.latest; - }, 15 * 60 * 1000 - ); + }, TIME_TO_LIVE); callback(versions); }); From 3eb429dde3e34c6cb556de0ca114bf464cb9f5e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 24 Dec 2017 18:27:37 -0500 Subject: [PATCH 2/3] Make sure all links will open a new tab instead of exiting the application --- client/js/socket-events/changelog.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/js/socket-events/changelog.js b/client/js/socket-events/changelog.js index edff4615..9e08802c 100644 --- a/client/js/socket-events/changelog.js +++ b/client/js/socket-events/changelog.js @@ -21,6 +21,8 @@ function requestIfNeeded() { socket.on("changelog", function(data) { // 1. Release notes window for the current version $("#changelog").html(templates.windows.changelog(data.current)); + // Make sure all links will open a new tab instead of exiting the application + $("#changelog .changelog-text a").attr("target", "_blank"); // 2. Version checker visible in Help window let status; From f725e944dd63c9edf4ef2be7635b49f411bb6406 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 24 Dec 2017 18:58:01 -0500 Subject: [PATCH 3/3] Add (semi-working) image viewer support for images shown in changelogs Semi-working because this does not support Preview/Next. The existing image viewer is very custom to in-channel message previews and expects a certain markup, that needs rework tobe more generic. --- client/js/renderPreview.js | 16 ++++++++++------ client/js/socket-events/changelog.js | 6 +++++- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js index 626e0f83..79dd34f7 100644 --- a/client/js/renderPreview.js +++ b/client/js/renderPreview.js @@ -99,7 +99,7 @@ function handleImageInPreview(content, container) { const imageViewer = $("#image-viewer"); -$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) { +$("#windows").on("click", ".toggle-thumbnail", function(event, data = {}) { const link = $(this); // Passing `data`, specifically `data.pushState`, to not add the action to the @@ -158,7 +158,7 @@ function openImageViewer(link, {pushState = true} = {}) { imageViewer.html(templates.image_viewer({ image: link.find("img").attr("src"), link: link.attr("href"), - type: link.parent().hasClass("toggle-type-image") ? "image" : "link", + type: link.parent().hasClass("toggle-type-link") ? "link" : "image", hasPreviousImage: previousImage.length > 0, hasNextImage: nextImage.length > 0, })); @@ -171,10 +171,14 @@ function openImageViewer(link, {pushState = true} = {}) { // History management if (pushState) { - const clickTarget = - `#${link.closest(".msg").attr("id")} ` + - `a.toggle-thumbnail[href="${link.attr("href")}"] ` + - "img"; + let clickTarget = ""; + // Images can be in a message (channel URL previews) or not (window URL + // preview, e.g. changelog). This is sub-optimal and needs improvement to + // make image preview more generic and not specific for channel previews. + if (link.closest(".msg").length > 0) { + clickTarget = `#${link.closest(".msg").attr("id")} `; + } + clickTarget += `a.toggle-thumbnail[href="${link.attr("href")}"] img`; history.pushState({clickTarget}, null, null); } } diff --git a/client/js/socket-events/changelog.js b/client/js/socket-events/changelog.js index 9e08802c..34149fbf 100644 --- a/client/js/socket-events/changelog.js +++ b/client/js/socket-events/changelog.js @@ -21,8 +21,12 @@ function requestIfNeeded() { socket.on("changelog", function(data) { // 1. Release notes window for the current version $("#changelog").html(templates.windows.changelog(data.current)); + + const links = $("#changelog .changelog-text a"); // Make sure all links will open a new tab instead of exiting the application - $("#changelog .changelog-text a").attr("target", "_blank"); + links.attr("target", "_blank"); + // Add required metadata to image links, to support built-in image viewer + links.has("img").addClass("toggle-thumbnail"); // 2. Version checker visible in Help window let status;