Accessibility (Screen Reader Optimized mode)

app/css/master.css

@@ -24,8 +24,17 @@ body {
 .markdown {
 	display: none;
 }
-help {
+.accessMark {
-	display: none;
+    font-size: 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+	background-color: var(--emphasized);
+	padding-left: 5px;
+	padding-right: 5px;
+}
+.accessibility .scr {
+	display: none !important;
 }
 .show-help {
 	display: inline;

app/js/common/version.js

@@ -323,6 +323,7 @@ function closeSupport() {
 	)
 }
 function storeDialog(platform, ver) {
+	if($('body').hasClass('accessibility')) return false
 	if (platform == 'win32') {
 		var mes = lang.lang_version_platform
 	} else if (platform == 'linux') {

app/js/platform/end.js

@@ -140,6 +140,7 @@ function nano() {
 	postMessage(['nano', null], '*')
 }
 onmessage = function(e) {
+	console.log(e)
 	if (e.data[0] == 'details') {
 		details(e.data[1][0], e.data[1][1])
 	} else if (e.data[0] == 'udg') {
@@ -186,6 +187,10 @@ onmessage = function(e) {
 		asRead()
 	} else if (e.data[0] == 'asReadEnd') {
 		asReadEnd()
+	} else if (e.data[0] == 'accessibility') {
+		console.log('atrue')
+		$('body').addClass('accessibility')
+		$('.window-title').before('<div class="accessMark">Screen Reader Optimized</div>')
 	} else if (e.data[0] == 'logData') {
 		$('#logs').val(e.data[1])
 		var obj = document.getElementById('logs')

app/js/platform/preload.js

@@ -4,6 +4,7 @@ var ipc = electron.ipcRenderer
 //title bar
 const customTitlebar = require('custom-electron-titlebar')
 window.addEventListener('DOMContentLoaded', () => {
+	ipc.send('acsCheck', '')
 	ipc.send('frameCheck', '')
 	ipc.on('frame', function(event, args) {
 		const file = location.href.substr(-10)
@@ -230,12 +231,16 @@ ipc.on('prog', function(event, arg) {
 ipc.on('mess', function(event, arg) {
 	postMessage(['updateMess', arg], '*')
 })
+//misc
 ipc.on('asRead', function(event, arg) {
 	postMessage(['asRead', ''], '*')
 })
 ipc.on('asReadEnd', function(event, arg) {
 	postMessage(['asReadEnd', ''], '*')
 })
+ipc.on('accessibility', function(event, arg) {
+	postMessage(['accessibility', 'true'], '*')
+})
 var webviewDom = document.getElementById('webview')
 if (webviewDom) {
 	webviewDom.addEventListener('new-window', function(e) {

app/js/ui/spotify.js

@@ -1,216 +1,223 @@
 function spotifyConnect() {
-	var auth = "https://accounts.spotify.com/authorize?client_id=0f18e54abe0b4aedb4591e353d3aff69&redirect_uri=https://thedesk.top/spotify-connect&response_type=code&scope=user-read-currently-playing";
+	var auth = 'https://accounts.spotify.com/authorize?client_id=0f18e54abe0b4aedb4591e353d3aff69&redirect_uri=https://thedesk.top/spotify-connect&response_type=code&scope=user-read-currently-playing'
-	var platform = localStorage.getItem("platform");
+	var platform = localStorage.getItem('platform')
-	if (platform == "win32") {
+	if (platform == 'win32') {
-		postMessage(["openUrl", auth], "*");
+		postMessage(['openUrl', auth], '*')
-		postMessage(["sendSinmpleIpc", "quit"], "*");
+		postMessage(['sendSinmpleIpc', 'quit'], '*')
 	} else {
-		auth = auth + "&state=code";
+		auth = auth + '&state=code'
-		$("#spotify-code-show").removeClass("hide");
+		$('#spotify-code-show').removeClass('hide')
-		postMessage(["openUrl", auth], "*");
+		postMessage(['openUrl', auth], '*')
 	}
 }
 function spotifyAuth() {
-	var code = $("#spotify-code").val();
+	var code = $('#spotify-code').val()
-	localStorage.setItem("spotify", "code");
+	localStorage.setItem('spotify', 'code')
-	localStorage.setItem("spotify-refresh", code);
+	localStorage.setItem('spotify-refresh', code)
-	$("#spotify-code-show").addClass("hide");
+	$('#spotify-code-show').addClass('hide')
-	$("#spotify-enable").addClass("disabled");
+	$('#spotify-enable').addClass('disabled')
-	$("#spotify-disable").removeClass("disabled");
+	$('#spotify-disable').removeClass('disabled')
 }
 function spotifyDisconnect() {
-	localStorage.removeItem("spotify");
+	localStorage.removeItem('spotify')
-	localStorage.removeItem("spotify-refresh");
+	localStorage.removeItem('spotify-refresh')
-	checkSpotify();
+	checkSpotify()
 }
 function checkSpotify() {
-	if (localStorage.getItem("spotify")) {
+	if (localStorage.getItem('spotify')) {
-		$("#spotify-enable").addClass("disabled");
+		$('#spotify-enable').addClass('disabled')
-		$("#spotify-disable").removeClass("disabled");
+		$('#spotify-disable').removeClass('disabled')
 	} else {
-		$("#spotify-enable").removeClass("disabled");
+		$('#spotify-enable').removeClass('disabled')
-		$("#spotify-disable").addClass("disabled");
+		$('#spotify-disable').addClass('disabled')
 	}
-	var content = localStorage.getItem("np-temp");
+	var content = localStorage.getItem('np-temp')
-	if (!content || content == "" || content == "null") {
+	if (!content || content == '' || content == 'null') {
-		var content = "#NowPlaying {song} / {album} / {artist}\n{url} #SpotifyWithTheDesk";
+		var content = '#NowPlaying {song} / {album} / {artist}\n{url} #SpotifyWithTheDesk'
 	}
-	$("#np-temp").val(content);
+	$('#np-temp').val(content)
-	var flag = localStorage.getItem("artwork");
+	var flag = localStorage.getItem('artwork')
 	if (flag) {
-		$("#awk_yes").prop("checked", true);
+		$('#awk_yes').prop('checked', true)
 	} else {
-		$("#awk_no").prop("checked", true);
+		$('#awk_no').prop('checked', true)
 	}
-	var flag2 = localStorage.getItem("complete-artwork");
+	var flag2 = localStorage.getItem('complete-artwork')
 	if (flag2) {
-		$("#amw_yes").prop("checked", true);
+		$('#amw_yes').prop('checked', true)
 	} else {
-		$("#amw_no").prop("checked", true);
+		$('#amw_no').prop('checked', true)
 	}
 }
 function spotifyFlagSave() {
-	var awk = $("[name=awk]:checked").val();
+	var awk = $('[name=awk]:checked').val()
-	if (awk == "yes") {
+	if (awk == 'yes') {
-		localStorage.setItem("artwork", "yes");
+		localStorage.setItem('artwork', 'yes')
-		M.toast({ html: lang.lang_spotify_img, displayLength: 3000 });
+		M.toast({ html: lang.lang_spotify_img, displayLength: 3000 })
 	} else {
-		localStorage.removeItem("artwork");
+		localStorage.removeItem('artwork')
-		M.toast({ html: lang.lang_spotify_imgno, displayLength: 3000 });
+		M.toast({ html: lang.lang_spotify_imgno, displayLength: 3000 })
 	}
 }
 function aMusicFlagSave() {
-	var awk = $("[name=amw]:checked").val();
+	var awk = $('[name=amw]:checked').val()
-	if (awk == "yes") {
+	if (awk == 'yes') {
-		localStorage.setItem("complete-artwork", "yes");
+		localStorage.setItem('complete-artwork', 'yes')
-		M.toast({ html: lang.lang_spotify_img, displayLength: 3000 });
+		M.toast({ html: lang.lang_spotify_img, displayLength: 3000 })
 	} else {
-		localStorage.removeItem("complete-artwork");
+		localStorage.removeItem('complete-artwork')
-		M.toast({ html: lang.lang_spotify_imgno, displayLength: 3000 });
+		M.toast({ html: lang.lang_spotify_imgno, displayLength: 3000 })
 	}
 }
 function nowplaying(mode) {
-	if (mode == "spotify") {
+	if (mode == 'spotify') {
-		var start = "https://thedesk.top/now-playing?at=" + localStorage.getItem("spotify") + "&rt=" + localStorage.getItem("spotify-refresh");
+		var start = 'https://thedesk.top/now-playing?at=' + localStorage.getItem('spotify') + '&rt=' + localStorage.getItem('spotify-refresh')
-		var at = localStorage.getItem("spotify");
+		var at = localStorage.getItem('spotify')
 		if (at) {
 			fetch(start, {
-				method: "GET",
+				method: 'GET',
 				headers: {
-					"content-type": "application/json"
+					'content-type': 'application/json',
-				}
+				},
 			})
-				.then(function(response) {
+				.then(function (response) {
 					if (!response.ok) {
-						response.text().then(function(text) {
+						response.text().then(function (text) {
-							setLog(response.url, response.status, text);
+							setLog(response.url, response.status, text)
-						});
+						})
 					}
-					return response.json();
+					return response.json()
 				})
-				.catch(function(error) {
+				.catch(function (error) {
-					todo(error);
+					todo(error)
-					setLog(start, "JSON", error);
+					setLog(start, 'JSON', error)
-					console.error(error);
+					console.error(error)
 				})
-				.then(function(json) {
+				.then(function (json) {
-					console.table(json);
+					console.table(json)
 					if (json.length < 1) {
-						return false;
+						return false
 					}
-					var item = json.item;
+					var item = json.item
-					var img = item.album.images[0].url;
+					var img = item.album.images[0].url
-					var flag = localStorage.getItem("artwork");
+					var flag = localStorage.getItem('artwork')
 					if (flag) {
-						postMessage(["bmpImage", [img, 0]], "*");
+						postMessage(['bmpImage', [img, 0]], '*')
 					}
-					var content = localStorage.getItem("np-temp");
+					var content = localStorage.getItem('np-temp')
-					if (!content || content == "" || content == "null") {
+					if (!content || content == '' || content == 'null') {
-						var content = "#NowPlaying {song} / {album} / {artist}\n{url}";
+						var content = '#NowPlaying {song} / {album} / {artist}\n{url}'
 					}
-					var regExp = new RegExp("{song}", "g");
+					var regExp = new RegExp('{song}', 'g')
-					content = content.replace(regExp, item.name);
+					content = content.replace(regExp, item.name)
-					var regExp = new RegExp("{album}", "g");
+					var regExp = new RegExp('{album}', 'g')
-					content = content.replace(regExp, item.album.name);
+					content = content.replace(regExp, item.album.name)
-					var regExp = new RegExp("{artist}", "g");
+					var regExp = new RegExp('{artist}', 'g')
-					content = content.replace(regExp, item.artists[0].name);
+					content = content.replace(regExp, item.artists[0].name)
-					var regExp = new RegExp("{url}", "g");
+					var regExp = new RegExp('{url}', 'g')
-					content = content.replace(regExp, item.external_urls.spotify);
+					content = content.replace(regExp, item.external_urls.spotify)
-					var regExp = new RegExp("{composer}", "g");
+					var regExp = new RegExp('{composer}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					var regExp = new RegExp("{hz}", "g");
+					var regExp = new RegExp('{hz}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					var regExp = new RegExp("{bitRate}", "g");
+					var regExp = new RegExp('{bitRate}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					var regExp = new RegExp("{lyricist}", "g");
+					var regExp = new RegExp('{lyricist}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					var regExp = new RegExp("{bpm}", "g");
+					var regExp = new RegExp('{bpm}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					var regExp = new RegExp("{genre}", "g");
+					var regExp = new RegExp('{genre}', 'g')
-					content = content.replace(regExp, "");
+					content = content.replace(regExp, '')
-					$("#textarea").val(content);
+					$('#textarea').val(content)
-				});
+				})
 		} else {
 			Swal.fire({
-				type: "info",
+				type: 'info',
-				title: lang.lang_spotify_acct
+				title: lang.lang_spotify_acct,
-			});
+			})
 		}
-	} else if (mode == "itunes") {
+	} else if (mode == 'itunes') {
-		postMessage(["itunes", ""], "*");
+		postMessage(['itunes', ''], '*')
 	}
 }
 async function npCore(arg) {
-	console.table(arg);
+	console.table(arg)
-	var content = localStorage.getItem("np-temp");
+	var content = localStorage.getItem('np-temp')
-	if (!content || content == "" || content == "null") {
+	if (!content || content == '' || content == 'null') {
-		var content = "#NowPlaying {song} / {album} / {artist}\n{url}";
+		var content = '#NowPlaying {song} / {album} / {artist}\n{url}'
 	}
-	var flag = localStorage.getItem("artwork");
+	var flag = localStorage.getItem('artwork')
-	var platform = localStorage.getItem("platform");
+	var platform = localStorage.getItem('platform')
-	if (platform == "win32") {
+	if (platform == 'win32') {
 		if (flag && arg.path) {
-			media(arg.path, "image/png", "new");
+			media(arg.path, 'image/png', 'new')
 		}
-	} else if (platform == "darwin") {
+	} else if (platform == 'darwin') {
 		if (flag && arg.artwork) {
-			media(arg.artwork, "image/png", "new");
+			media(arg.artwork, 'image/png', 'new')
 		} else if (flag && localStorage.getItem('complete-artwork')) {
-			var q = arg.artist + ' ' + arg.album.name + ' ' + arg.name;
+			var q = arg.artist + ' ' + arg.album.name + ' ' + arg.name
-			postMessage(["bmpImage", [await getUnknownAA(q), 0]], "*");
+			var aaw = await getUnknownAA(q)
+			postMessage(['bmpImage', [aaw.aaw, 0]], '*')
 		}
 	}
-	var regExp = new RegExp("{song}", "g");
+	var regExp = new RegExp('{song}', 'g')
-	content = content.replace(regExp, arg.name);
+	content = content.replace(regExp, arg.name)
-	var regExp = new RegExp("{album}", "g");
+	var regExp = new RegExp('{album}', 'g')
 	if (arg.album) {
 		if (arg.album.name) {
-			content = content.replace(regExp, arg.album.name);
+			content = content.replace(regExp, arg.album.name)
+		} else {
+			if(aaw.album) content.replace(regExp, aaw.album)
+			content = content.replace(regExp, '-')
 		}
+	} else {
+		if(aaw.album) content.replace(regExp, aaw.album)
+		content = content.replace(regExp, '-')
 	}
-	var regExp = new RegExp("{artist}", "g");
+	var regExp = new RegExp('{artist}', 'g')
-	content = content.replace(regExp, arg.artist);
+	content = content.replace(regExp, arg.artist)
-	var regExp = new RegExp("{url}", "g");
+	var regExp = new RegExp('{url}', 'g')
-	content = content.replace(regExp, "");
+	content = content.replace(regExp, '')
-	var regExp = new RegExp("{composer}", "g");
+	var regExp = new RegExp('{composer}', 'g')
-	content = content.replace(regExp, arg.composer);
+	content = content.replace(regExp, arg.composer)
-	var regExp = new RegExp("{hz}", "g");
+	var regExp = new RegExp('{hz}', 'g')
-	content = content.replace(regExp, arg.sampleRate / 1000 + "kHz");
+	content = content.replace(regExp, arg.sampleRate / 1000 + 'kHz')
-	var regExp = new RegExp("{lyricist}", "g");
+	var regExp = new RegExp('{lyricist}', 'g')
-	content = content.replace(regExp, "");
+	content = content.replace(regExp, '')
-	var regExp = new RegExp("{bpm}", "g");
+	var regExp = new RegExp('{bpm}', 'g')
-	content = content.replace(regExp, "");
+	content = content.replace(regExp, '')
-	var regExp = new RegExp("{bitRate}", "g");
+	var regExp = new RegExp('{bitRate}', 'g')
-	content = content.replace(regExp, arg.bitRate + "kbps");
+	content = content.replace(regExp, arg.bitRate + 'kbps')
-	var regExp = new RegExp("{genre}", "g");
+	var regExp = new RegExp('{genre}', 'g')
-	content = content.replace(regExp, arg.genre);
+	content = content.replace(regExp, arg.genre)
-	$("#textarea").val(content);
+	$('#textarea').val(content)
 }
 function spotifySave() {
-	var temp = $("#np-temp").val();
+	var temp = $('#np-temp').val()
-	localStorage.setItem("np-temp", temp);
+	localStorage.setItem('np-temp', temp)
-	M.toast({ html: lang.lang_spotify_np, displayLength: 3000 });
+	M.toast({ html: lang.lang_spotify_np, displayLength: 3000 })
 }
 if (location.search) {
-	var m = location.search.match(/\?mode=([a-zA-Z-0-9]+)\&code=(.+)/);
+	var m = location.search.match(/\?mode=([a-zA-Z-0-9]+)\&code=(.+)/)
-	var mode = m[1];
+	var mode = m[1]
-	var codex = m[2];
+	var codex = m[2]
-	if (mode == "spotify") {
+	if (mode == 'spotify') {
-		var coder = codex.split(":");
+		var coder = codex.split(':')
-		localStorage.setItem("spotify", coder[0]);
+		localStorage.setItem('spotify', coder[0])
-		localStorage.setItem("spotify-refresh", coder[1]);
+		localStorage.setItem('spotify-refresh', coder[1])
 	} else {
 	}
 }
 async function getUnknownAA(q) {
 	const start = 'https://itunes.apple.com/search?term=' + q + '&country=JP&entity=song'
 	let promise = await fetch(start, {
-		method: 'GET'
+		method: 'GET',
 	})
 	const json = await promise.json()
-	if(!json.resultCount) {
+	if (!json.resultCount) {
 		return []
 	}
 	const data = json.results[0].artworkUrl100
-	return data.replace(/100x100/, '512x512')
+	return { aaw: data.replace(/100x100/, '512x512'), album: json.results[0].collectionName }
-}
+}

app/main.js

@@ -195,6 +195,7 @@ function createWindow() {
 	mainWindow = new BrowserWindow(arg)
 	mainWindow.once('page-title-updated', () => {
 		mainWindow.show()
+		console.log('Accessibility: ' + app.accessibilitySupportEnabled)
 		if (window_size.max) {
 			mainWindow.maximize()
 		}

app/main/system.js

@@ -132,7 +132,12 @@ function system(mainWindow, dir, lang, dirname) {
 		app.relaunch();
 		app.exit();
 	});
-
+	//スクリーンリーダー
+	ipc.on("acsCheck", function(e, arg) {
+		if(app.accessibilitySupportEnabled) {
+			mainWindow.webContents.send('accessibility', 'true')
+		}
+	});
 	ipc.on("quit", (e, args) => {
 		app.quit();
 	});

app/view/make/acct.sample.html

@@ -74,7 +74,7 @@
 							<span>@@thisismisskey@@</span> </label
 						><br />
 					</div>
-					<div class="col s4" aria-hidden="true">
+					<div class="col s4 scr" aria-hidden="true">
 						<span style="font-family:Open Sans;">Supports</span>
 						<div id="support" class="collection transparent"></div>
 					</div>
@@ -86,7 +86,7 @@
 				<button class="btn waves-effect" onclick="code()">Auth</button><br />
 				<br />
 				<a onclick="atSetup()" class="pointer">@@accessTokenSetup@@</a>
-				<div id="compt" style="display:none">
+				<div id="compt" style="display:none" class="scr">
 					<h5>ログイン前に必ずご確認ください</h5>
 					<span id="compt-instance"></span>はバージョンが<span id="compt-ver"></span
 					>のため以下の機能がご利用いただけません。

app/view/make/index.sample.html

@@ -62,7 +62,7 @@
 		<div id="tl">
 			<!--TL-->
 			<!--スターター-->
-			<div id="start">
+			<div id="start" class="scr">
 				<div id="start-content">
 					<h3 class="center">@@demoBottomBtns@@</h3>
 					@@lookAtBottom@@
@@ -1183,7 +1183,7 @@
 			<button onclick="$('#askjp_jp_ua').addClass('hide')" class="btn waves-effect">閉じる</button>
 		</div>
 		<!-- Modal Structure Release Note-->
-		<div id="releasenote" class="modal modal-fixed-footer">
+		<div id="releasenote" class="modal modal-fixed-footer scr">
 			<div class="modal-content">
 				<h3>TheDesk</h3>
 				<a href="https://thedesk.top" target="_blank">HP</a><br />
@@ -1707,7 +1707,7 @@
 			</div>
 		</div>
 		<!--Support me-->
-		<div id="support-btm" class="z-depth-4 hide">
+		<div id="support-btm" class="z-depth-4 hide scr">
 			<div id="support-btm-ja">
 				<h5>ご支援いただけませんか？</h5>
 				(これは支援の有無に関わらず定期的に出ます。過去のバージョン等で何度も表示される等のバグを確認しております。)<br />