Add changelog viewing and update checking

client/css/style.css

@@ -140,12 +140,24 @@ kbd {
 	opacity: 0.6;
 }
 
+.btn-sm {
+	padding: 4px 8px;
+	border-width: 1px;
+	letter-spacing: 0;
+	word-spacing: 0;
+	text-transform: none;
+}
+
 .container {
 	margin: 80px auto;
 	max-width: 480px;
 	touch-action: pan-y;
 }
 
+#help .container {
+	max-width: 600px;
+}
+
 ::-moz-placeholder {
 	color: rgba(0, 0, 0, 0.35);
 	opacity: 1;
@@ -162,6 +174,7 @@ kbd {
 #js-copy-hack,
 #loading pre,
 #help,
+#changelog,
 #windows .header .title,
 #windows .header .topic,
 #chat .messages {
@@ -208,6 +221,7 @@ kbd {
 #chat .nick .from::before,
 #chat .action .from::before,
 #chat .toggle-button::after,
+.changelog-version::before,
 .context-menu-item::before,
 #nick button::before,
 #image-viewer .previous-image-btn::before,
@@ -1520,8 +1534,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: table-row;
 }
 
-#help .help-item,
+#help .help-item {
-#help .about {
 	font-size: 14px;
 }
 
@@ -1540,10 +1553,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-bottom: 0;
 }
 
-#help .about {
-	line-height: 1.8;
-}
-
 .is-apple #help .key-all,
 #help .key-apple {
 	display: none;
@@ -1572,6 +1581,58 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	grid-column-start: 2;
 }
 
+#help .help-links {
+	margin-right: 20px;
+}
+
+#changelog .container {
+	max-width: 740px;
+}
+
+.changelog-text {
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+.changelog-text p {
+	margin-bottom: 16px;
+}
+
+.window#changelog h3 {
+	font-size: 20px;
+	border-bottom: 1px solid #7f8c8d;
+	color: #7f8c8d;
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
+
+.changelog-version {
+	display: block;
+	padding: 16px;
+	margin-bottom: 16px;
+	border-radius: 2px;
+	background-color: #d9edf7;
+	color: #31708f;
+}
+
+.changelog-version::before {
+	margin-right: 6px;
+	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
+}
+
+.changelog-version-new {
+	background-color: #dff0d8;
+	color: #3c763d;
+}
+
+.changelog-version-new:hover {
+	color: #2b542c;
+}
+
+.changelog-version-new::before {
+	content: "\f0ed"; /* http://fontawesome.io/icon/cloud-download/ */
+}
+
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;
@@ -2055,7 +2116,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	#windows .header .topic,
 	#settings .error,
 	#help .help-item,
-	#help .about,
 	#loading,
 	#context-menu,
 	#form #input,

client/index.html

@@ -85,6 +85,7 @@
 				<div id="connect" class="window"></div>
 				<div id="settings" class="window" data-type="settings"></div>
 				<div id="help" class="window"></div>
+				<div id="changelog" class="window"></div>
 			</div>
 		</div>
 	</div>

client/js/socket-events/changelog.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const $ = require("jquery");
+const socket = require("../socket");
+const templates = require("../../views");
+
+socket.on("changelog", function(data) {
+	$("#changelog").html(templates.windows.changelog(data));
+});

client/js/socket-events/configuration.js

@@ -14,6 +14,7 @@ socket.on("configuration", function(data) {
 	$("#settings").html(templates.windows.settings(data));
 	$("#connect").html(templates.windows.connect(data));
 	$("#help").html(templates.windows.help(data));
+	$("#changelog").html(templates.windows.changelog());
 
 	$("#play").on("click", () => {
 		const pop = new Audio();
@@ -65,4 +66,22 @@ socket.on("configuration", function(data) {
 			// Store the "previous" value, for next time
 			$(this).data("lastvalue", nick);
 		});
+
+	$("#view-changelog").on("click", function() {
+		$("#windows > .active")
+			.removeClass("active")
+			.find(".chat")
+			.unsticky();
+
+		$("#changelog")
+			.addClass("active");
+
+		history.pushState({
+			clickTarget: "#view-changelog",
+		}, null, "#changelog");
+
+		return false;
+	}).one("click", function() {
+		socket.emit("changelog");
+	});
 });

client/js/socket-events/index.js

@@ -19,3 +19,4 @@ require("./users");
 require("./sign_out");
 require("./sessions_list");
 require("./configuration");
+require("./changelog");

client/views/index.js

@@ -26,6 +26,7 @@ module.exports = {
 		settings: require("./windows/settings.tpl"),
 		connect: require("./windows/connect.tpl"),
 		help: require("./windows/help.tpl"),
+		changelog: require("./windows/changelog.tpl"),
 	},
 
 	chan: require("./chan.tpl"),

client/views/windows/changelog.tpl

@@ -0,0 +1,29 @@
+<div class="header">
+	<button class="lt" aria-label="Toggle channel list"></button>
+</div>
+<div class="container">
+	{{#if current}}
+		{{#if latest}}
+		<a href="{{latest.url}}" target="_blank" rel="noopener" class="changelog-version changelog-version-new">
+			The Lounge <b>{{latest.version}}</b>{{#if latest.prerelease}} (pre-release){{/if}} is now available.
+			Click to view details on GitHub.
+		</a>
+		{{else if current.changelog}}
+		<div class="changelog-version">
+			The Lounge is up to date!
+		</div>
+		{{/if}}
+
+		<h1 class="title">Release notes for {{current.version}}</h1>
+
+		{{#if current.changelog}}
+			<h3>Introduction</h3>
+			<div class="changelog-text">{{{current.changelog}}}</div>
+		{{else}}
+			<p>Unable to retrieve releases from GitHub.</p>
+			<p><a href="https://github.com/thelounge/lounge/releases/tag/{{current.version}}" target="_blank" rel="noopener">View release notes for this version on GitHub</a></p>
+		{{/if}}
+	{{else}}
+		<p>Loading changelog…</p>
+	{{/if}}
+</div>

client/views/windows/help.tpl

@@ -4,6 +4,28 @@
 <div class="container">
 	<h1 class="title">Help</h1>
 
+	<h2>About The Lounge</h2>
+
+	<div class="about">
+		{{#if gitCommit}}
+			<p>The Lounge is running from source (commit <a href="https://github.com/thelounge/lounge/tree/{{gitCommit}}" target="_blank" rel="noopener"><code>{{gitCommit}}</code></a>) based on <strong>{{version}}</strong></p>
+			<p><a href="https://github.com/thelounge/lounge/compare/{{gitCommit}}...master" target="_blank" rel="noopener">Compare changes between <code>{{gitCommit}}</code> and <code>master</code> to see what you are missing</a></p>
+			<p><a href="https://github.com/thelounge/lounge/compare/{{version}}...{{gitCommit}}" target="_blank" rel="noopener">Compare changes between <code>{{version}}</code> and <code>{{gitCommit}}</code> to see the changes made</a></p>
+		{{else}}
+			<p>The Lounge is running <a href="https://github.com/thelounge/lounge/releases/tag/{{version}}" target="_blank" rel="noopener"><strong>{{version}}</strong></a>.</p>
+		{{/if}}
+
+	{{#unless public}}
+		<button class="btn btn-sm" id="view-changelog">View release notes &amp; check for updates</button>
+	{{/unless}}
+
+		<p>
+			<a href="https://thelounge.github.io/" target="_blank" rel="noopener">View website</a><br>
+			<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">View documentation</a><br>
+			<a href="https://github.com/thelounge/lounge/issues/new" target="_blank" rel="noopener">Report a bug on GitHub</a>
+		</p>
+	</div>
+
 	<h2>Keyboard Shortcuts</h2>
 
 	<div class="help-item">
@@ -11,7 +33,7 @@
 			<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd>
 		</div>
 		<div class="description">
-			<p>Switch to the previous/next window in the channel list</p>
+			<p>Switch to the previous/next window in the channel list.</p>
 		</div>
 	</div>
 
@@ -481,20 +503,4 @@
 			</p>
 		</div>
 	</div>
-
-	<h2>About The Lounge</h2>
-
-	<p class="about">
-		{{#if gitCommit}}
-			The Lounge is running from source
-			(<a href="https://github.com/thelounge/lounge/tree/{{ gitCommit }}" target="_blank" rel="noopener"><code>{{ gitCommit }}</code></a>).<br>
-		{{else}}
-			The Lounge is in version <strong>{{version}}</strong>
-			(<a href="https://github.com/thelounge/lounge/releases/tag/v{{ version }}" target="_blank" rel="noopener">See release notes</a>).<br>
-		{{/if}}
-
-		<a href="https://thelounge.github.io/" target="_blank" rel="noopener">Website</a><br>
-		<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">Documentation</a><br>
-		<a href="https://github.com/thelounge/lounge/issues/new" target="_blank" rel="noopener">Report a bug</a>
-	</p>
 </div>

src/plugins/changelog.js

@@ -0,0 +1,65 @@
+"use strict";
+
+const pkg = require("../../package.json");
+const request = require("request");
+
+module.exports = {
+	sendChangelog: handleChangelog,
+};
+
+function handleChangelog(callback) {
+	const changelog = {
+		current: {
+			version: `v${pkg.version}`,
+		},
+	};
+
+	request.get({
+		uri: "https://api.github.com/repos/thelounge/lounge/releases",
+		headers: {
+			Accept: "application/vnd.github.v3.html", // Request rendered markdown
+			"User-Agent": pkg.name + "; +" + pkg.repository.git, // Identify the client
+		},
+	}, (error, response, body) => {
+		if (error || response.statusCode !== 200) {
+			callback(changelog);
+
+			return;
+		}
+
+		let i = 0;
+		let release;
+		let prerelease = false;
+
+		body = JSON.parse(body);
+
+		for (i = 0; i < body.length; i++) {
+			release = body[i];
+			if (release.tag_name === changelog.current.version) {
+				changelog.current.changelog = release.body_html;
+				prerelease = release.prerelease;
+
+				break;
+			}
+		}
+
+		if (i > 0 && changelog.current) {
+			for (i = 0; i < body.length; i++) {
+				release = body[i];
+
+				// Find latest release or pre-release if current version is also a pre-release
+				if (!release.prerelease || release.prerelease === prerelease) {
+					changelog.latest = {
+						prerelease: release.prerelease,
+						version: release.tag_name,
+						url: release.html_url,
+					};
+
+					break;
+				}
+			}
+		}
+
+		callback(changelog);
+	});
+}

src/server.js

@@ -14,6 +14,7 @@ var colors = require("colors/safe");
 const net = require("net");
 const Identification = require("./identification");
 const themes = require("./plugins/themes");
+const changelog = require("./plugins/changelog");
 
 // The order defined the priority: the first available plugin is used
 // ALways keep local auth in the end, which should always be enabled.
@@ -340,6 +341,14 @@ function initializeClient(socket, client, token, lastMessage) {
 		}
 	);
 
+	if (!Helper.config.public) {
+		socket.on("changelog", function() {
+			changelog.sendChangelog((data) => {
+				socket.emit("changelog", data);
+			});
+		});
+	}
+
 	socket.on("msg:preview:toggle", function(data) {
 		const networkAndChan = client.find(data.target);
 		if (!networkAndChan) {