sound

README.md

@@ -27,6 +27,8 @@ The icon is provided under [Creative Commons BY-NC-SA](https://creativecommons.o
 * [ico](https://dl.thedesk.top/press/TheDesk.ico)
 * [icns](https://dl.thedesk.top/press/TheDesk.icns)
 
+The default sound of notifications is provided [Creative Commons BY](https://creativecommons.org/licenses/by/4.0/)
+
 ## Terms of Use/利用規約
 
 * [利用規約(Terms of Use(ja))](https://thedesk.top/tos.html)

app/css/master.css

@@ -30,6 +30,8 @@ option {
 }
 #mainView {
   padding: 10px;
+  overflow:scroll;
+  height: auto;
 }
 #message {
   display: none;

app/css/tl.css

@@ -249,6 +249,29 @@ grid-area: toot;
   margin:2px;
   grid-area: side;
 }
+
+.quote-renote{
+  display: grid;
+  grid-template-columns: 43px 2fr 1fr;
+  grid-template-areas: 'ricon ruser' 'ricon rtext';
+  border: 1px solid;
+  margin-top: 3px;
+  padding: 1px;
+  border-radius: 3px;
+}
+.renote-icon{
+  grid-area: ricon;
+}
+.renote-icon img{
+  width:43px;
+}
+.renote-user{
+  grid-area: ruser;
+}
+.renote-text{
+  grid-area: rtext;
+}
+
 .btn-flat{
   color:var(--color);
 }

app/js/platform/end.js

@@ -181,4 +181,21 @@ const {
 } = require('electron');
 webviewDom.addEventListener('new-window', function(e) {
     shell.openExternal(e.url);
-});
+});
+function playSound() {
+	window.AudioContext = window.AudioContext || window.webkitAudioContext;
+	context = new AudioContext();
+	context.createBufferSource().start(0);
+	context.decodeAudioData(request.response, function (buf) {
+		console.log(source)
+		source.buffer = buf;
+		source.loop = false;
+	});
+	source = context.createBufferSource();
+	volumeControl = context.createGain();
+	source.connect(volumeControl);
+	volumeControl.connect(context.destination);
+	volumeControl.gain.value=0.8
+	console.log(volumeControl)
+	source.start(0);
+}

app/js/tl/misskeyparse.js

@@ -296,7 +296,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					")<br>";
 					var boostback = "shared";
 				var uniqueid=toot.id;
-				var toot = toot.renote;
+				if(!toot.text){
+					var toot = toot.renote;
+				}
 				var dis_name=escapeHTMLtemp(toot.user.name);
 			    var uniqueid=toot.id;
 				var actemojick=false
@@ -636,9 +638,11 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			});
 			poll='<div class="vote_'+toot.id+'">'+poll+'</div>';
 		}
-		/*
+		//引用Renote
-		
+		if(toot.renote){
-			*/
+			poll=poll+'<div class="quote-renote"><div class="renote-icon"><a onclick="udg(\'' + toot.renote.user.id +
+			'\',' + acct_id + ');" user="' + toot.renote.user.username + '" class="udg"><img src="'+toot.renote.user.avatarUrl+'"></a></div><div class="renote-user">'+escapeHTML(toot.renote.user.name)+'</div><div class="renote-text">'+escapeHTML(toot.renote.text)+'</div></div>'
+		}
 			if(localStorage.getItem("emojiReaction_" + acct_id)=="disabled"){
 				var freeReact="hide";
 			}else{
@@ -667,7 +671,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 						var emoji = obj[i];
 						if (":"+emoji.shortcode+":"==keye) {
 							if (emoji) {
-								addReact=addReact+	'<span class="reaction "><a onclick="reaction(\''+keye+'\',\'' + toot.id + '\',' + acct_id +
+								addReact=addReact+	'<span class="reaction"><a onclick="reaction(\''+keye+'\',\'' + toot.id + '\',' + acct_id +
 								',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0;margin-left:3px;"><img src="'+emoji.url+'" style="width:13px;"></a><span class="re-'+emoji.shortcode+'ct">'+thisReact+
 								'</span></span>';
 							}

app/js/tl/parse.js

@@ -251,16 +251,19 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						$(".notf-reply_" + acct_id).text(replyct*1-(-1));
 						localStorage.setItem("notf-reply_" + acct_id,replyct*1-(-1))
 						$(".notf-reply_" + acct_id).removeClass("hide")
+						var sound=localStorage.getItem("replySound");
 					}else if (toot.type == "reblog") {
 						var btct=localStorage.getItem("notf-bt_" + acct_id)
 						$(".notf-bt_" + acct_id).text(btct*1-(-1));
 						localStorage.setItem("notf-bt_" + acct_id,btct*1-(-1))
 						$(".notf-bt_" + acct_id).removeClass("hide")
+						var sound=localStorage.getItem("btSound");
 					}else if (toot.type == "favourite") {
 						var favct=localStorage.getItem("notf-fav_" + acct_id)
 						$(".notf-fav_" + acct_id).text(favct*1-(-1));
 						localStorage.setItem("notf-fav_" + acct_id,favct*1-(-1))
 						$(".notf-fav_" + acct_id).removeClass("hide")
+						var sound=localStorage.getItem("favSound");
 					}
 				}
 				
@@ -268,6 +271,25 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				if(popup>0){
 					Materialize.toast("["+domain+"]"+escapeHTML(toot.account.display_name)+what, popup * 1000);
 				}
+				//通知音
+				if(sound=="default" || !sound){
+					var file="../../source/notif.wav"
+				}else if(sound=="c1"){
+					var file=localStorage.getItem("custom1");
+				}else if(sound=="c2"){
+					var file=localStorage.getItem("custom2");
+				}else if(sound=="c3"){
+					var file=localStorage.getItem("custom3");
+				}else if(sound=="c4"){
+					var file=localStorage.getItem("custom4");
+				}
+				if(file){
+					request = new XMLHttpRequest();
+      				request.open("GET", file, true);
+      				request.responseType = "arraybuffer";
+      				request.onload = playSound;
+      				request.send();
+				}
 				if(native=="yes"){
 					var electron = require("electron");
 					var ipc = electron.ipcRenderer;
@@ -738,6 +760,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'"><i class="far fa-calendar-times"></i>' +
 			 ended+ '</span></div>';
 		}
+		//Quote
+		if(toot.quote){
+			poll=poll+'<div class="quote-renote"><div class="renote-icon"><img src="'+toot.quote.account.avatar+'"></div><div class="renote-user">'+escapeHTML(toot.quote.account.display_name)+'</div><div class="renote-text">'+toot.quote.content+'</div></div>'
+		}
 		templete = templete + '<div id="pub_' + toot.id + '" class="cvo ' +
 			boostback + ' ' + fav_app + ' ' + rt_app + ' ' + pin_app +
 			' ' + hasmedia + ' '+animecss+'" toot-id="' + id + '" unique-id="' + uniqueid + '" data-medias="'+media_ids+' " unixtime="' + date(obj[

app/js/ui/settings.js

@@ -123,6 +123,10 @@ function load() {
 		var font = "";
 	}
 	$("#font").val(font);
+	$("#c1-file").text(localStorage.getItem("custom1"))
+	$("#c2-file").text(localStorage.getItem("custom2"));
+	$("#c3-file").text(localStorage.getItem("custom3"));
+	$("#c4-file").text(localStorage.getItem("custom4"));
 }
 
 function climute(){
@@ -636,6 +640,22 @@ ipc.on('theme-json-create-complete', function (event, args) {
 	$("#custom_import").val("");
 	ctLoad()
 });
+function customSound(key){
+	var electron = require("electron");
+	var remote=electron.remote;
+	var dialog=remote.dialog;
+	dialog.showOpenDialog(null, {
+		title: 'Custom sound',
+		properties: ['openFile'],
+		filters: [
+			{name: 'Audio', extensions: ['mp3','aac','wav','flac','m4a']},
+			{name: 'All', extensions: ['*']},
+		]
+	}, (fileNames) => {
+		localStorage.setItem("custom"+key,fileNames[0]);
+		$("#c1-file").text(fileNames[0])
+	});
+}
 window.onload = function() {
 	//最初に読む
 load();

app/view/en/setting.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="overflow:scroll">
 
 <head>
 	<title>Settings - TheDesk</title>
@@ -56,8 +56,8 @@
 				<div id="envView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.id=='notf'"><a onclick="notftest()"
 								class="pointer">Notification test</a><br></template>
@@ -85,7 +85,7 @@
 					</template>
 				</div>
 				<h5>Font</h5>
-				Select your favorite font to 'Select'<br>
+				Select your favorite font to 'Select'(Windows/ macOS only)<br>
 				<button class="btn waves-effect" style="width:100px;" onclick="font()">Select</button><br>
 				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
 				<br>
@@ -158,11 +158,11 @@
 						<input type="hidden" id="color-picker2_value">
 					</div>
 					<div>
-						<h5>Accent</h5>Background of boosts
+					<h5>Accent</h5>Background of boosts
-						<div id="color-picker3-wrap">
+					<div id="color-picker3-wrap">
-							<div class="color-picker" id="color-picker3"></div>
+						<div class="color-picker" id="color-picker3"></div>
-						</div>
+					</div>
-						<input type="hidden" id="color-picker3_value">
+					<input type="hidden" id="color-picker3_value">
 					</div>
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">Change</button>&nbsp;<button
@@ -184,8 +184,8 @@
 				<div id="tlView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
@@ -210,6 +210,11 @@
 						</template><br>
 					</template>
 				</div>
+				<h5>Custom sound</h5>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(1)">Custom 1</button><span id="c1-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(2)">Custom 2</button><span id="c2-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(3)">Custom 3</button><span id="c3-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(4)">Custom 4</button><span id="c4-file"></span><br>
 			</div>
 		</li>
 		<li>
@@ -220,8 +225,8 @@
 				<div id="postView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">

app/view/en/setting.vue.js

@@ -7,6 +7,27 @@ var yesno=[
         value:"no"
     }
 ];
+var sound=[
+    {
+        text:"None",
+        value:"none"
+    },{
+        text:"Default",
+        value:"default"
+    },{
+        text:"Custom 1",
+        value:"c1"
+    },{
+        text:"Custom 2",
+        value:"c2"
+    },{
+        text:"Custom 3",
+        value:"c3"
+    },{
+        text:"Custom 4",
+        value:"c4"
+    }
+];
 var envConstruction=[
     {
         id:"popup",
@@ -286,6 +307,46 @@ var tlConstruction=[
             desc:"",
             checkbox:yesno
         }
+    },{
+        id:"replySound",
+        storage:"replySound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"Sound(Reply)",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"favSound",
+        storage:"favSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"Sound(Fav)",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"btSound",
+        storage:"btSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"Sound(Boost)",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"followSound",
+        storage:"followSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"Sound(Follow)",
+            desc:"",
+            checkbox:sound
+        }
     }
 ];
 var postConstruction=[

app/view/ja/setting.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ja">
+<html lang="ja" style="overflow:scroll">
 
 <head>
 	<title>Settings - TheDesk</title>
@@ -56,8 +56,8 @@
 				<div id="envView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.id=='notf'"><a onclick="notftest()"
 								class="pointer">通知テスト</a><br></template>
@@ -85,7 +85,7 @@
 					</template>
 				</div>
 				<h5>フォント</h5>
-				「選択」を押してフォントを選んでください。<br>
+				「選択」を押してフォントを選んでください。(Linuxでは動きません)<br>
 				<button class="btn waves-effect" style="width:100px;" onclick="font()">選択</button><br>
 				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
 				<br>
@@ -158,11 +158,11 @@
 						<input type="hidden" id="color-picker2_value">
 					</div>
 					<div>
-						<h5>Accent</h5>ブーストの背景色など
+					<h5>Accent</h5>ブーストの背景色など
-						<div id="color-picker3-wrap">
+					<div id="color-picker3-wrap">
-							<div class="color-picker" id="color-picker3"></div>
+						<div class="color-picker" id="color-picker3"></div>
-						</div>
+					</div>
-						<input type="hidden" id="color-picker3_value">
+					<input type="hidden" id="color-picker3_value">
 					</div>
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">変更</button>&nbsp;<button
@@ -184,8 +184,8 @@
 				<div id="tlView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
@@ -210,6 +210,11 @@
 						</template><br>
 					</template>
 				</div>
+				<h5>カスタム通知音</h5>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(1)">Custom 1</button><span id="c1-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(2)">Custom 2</button><span id="c2-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(3)">Custom 3</button><span id="c3-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(4)">Custom 4</button><span id="c4-file"></span><br>
 			</div>
 		</li>
 		<li>
@@ -220,8 +225,8 @@
 				<div id="postView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">

app/view/ja/setting.vue.js

@@ -7,6 +7,27 @@ var yesno=[
         value:"no"
     }
 ];
+var sound=[
+    {
+        text:"なし",
+        value:"none"
+    },{
+        text:"既定",
+        value:"default"
+    },{
+        text:"Custom 1",
+        value:"c1"
+    },{
+        text:"Custom 2",
+        value:"c2"
+    },{
+        text:"Custom 3",
+        value:"c3"
+    },{
+        text:"Custom 4",
+        value:"c4"
+    }
+];
 var envConstruction=[
     {
         id:"popup",
@@ -286,6 +307,46 @@ var tlConstruction=[
             desc:"",
             checkbox:yesno
         }
+    },{
+        id:"replySound",
+        storage:"replySound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"リプライの通知音",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"favSound",
+        storage:"favSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"お気に入り登録の通知音",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"btSound",
+        storage:"btSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"ブーストの通知音",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"followSound",
+        storage:"followSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"フォローの通知音",
+            desc:"",
+            checkbox:sound
+        }
     }
 ];
 var postConstruction=[

app/view/make/index.sample.html

@@ -580,24 +580,18 @@ var tlid=0;
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br>
 		<br>
-			<div id="release-Usamin_18-2-3" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-3-0" class="release-do" style="display:none; ">
 					<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 					Entyでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。<br>
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note Usamin (18.2.3)</h5>
+					<h5>Release Note Usamin (18.3.0)</h5>
-					・バグの修正
+・(既定はオフ)ふぁぼ、フォロー、BTごとの通知音追加(なし/既定/カスタム(4種))<br>
-					<h5>Release Note Usamin (18.2.0)</h5>
+・(Misskey)引用Renoteの簡易表示<br>
-・tootsearchをひとつのカラムにしてエゴサが捗る<br>
+・(dtp-mstdn.jp他)引用(quote)の簡易表示<br>
-・イントロダクション(初回起動時)の挙動修正<br>
+<br>
-・リンクプレビューを最大1行ずつに省略(タイトルと本文)<br>
+通知音「Arctic Bleeze in East 7」はクリエイティブコモンズ(CC BY)で利用できます。<br>
-・ブロックされたときのプロフィールの動作(Mastodon 2.8~)<br>
+(C) Cutls P 2019<s>GarageBand適当に叩いたらできた音ですのでご自由に変更どうぞ</s>
-・(Misskey)MFM追加flipやjumpなど<br>
-・(Misskey)リストに対応<br>
-・(Misskey)カスタム絵文字に対応。カスタム絵文字によるリアクションに対応(対応インスタンスに限る)。<br>
-・<b>カスタム絵文字をゼロ幅スペースによる挿入に変更する機能</b><br>
-・一部機能の統廃合とバグの修正<br>
-・best-friends.chatやキュアスタ！、misskey.devをサポートインスタンスに追加
 			</div>
 			<div id="release-en">
 				<h5>Let's make it native!</h5>

app/view/make/language/setting.en.json

@@ -3,6 +3,8 @@
     "set":"Save",
     "yes":"Yes",
     "no":"No",
+    "none":"None",
+    "default":"Default",
     "change":"Change",
     "select":"Select",
     "env":"System Preferences",
@@ -25,7 +27,7 @@
     "fixwidthwarn":"",
     "above":"above",
     "font":"Font",
-    "fontwarn":"Select your favorite font to 'Select'",
+    "fontwarn":"Select your favorite font to 'Select'(Windows/ macOS only)",
     "fontsize":"Font size",
     "savefolder":"Folder to save",
     "savefolderwarn":"TheDesk uses this value when it try to save pictures or take screenshots.",
@@ -85,6 +87,11 @@
     "ticker":"Enable #InstanceTicker",
     "tickerwarn":"Show colorful stickers about the server. <a href=\"https://cdn.weep.me/mastodon/\">About #InstanceTicker</a> Copyright 2018 weepjp, kyori19.",
     "animation":"Animation of timelines",
+    "replySound":"Sound(Reply)",
+    "favSound":"Sound(Fav)",
+    "btSound":"Sound(Boost)",
+    "followSound":"Sound(Follow)",
+    "customSound":"Custom sound",
     "post":"Posting Preferences",
     "autocw":"Alert before posting a long toot.",
     "autocwwarn":"Show dialog whether you make too-long text hidden.",

app/view/make/language/setting.ja.json

@@ -3,6 +3,8 @@
     "set":"設定",
     "yes":"はい",
     "no":"いいえ",
+    "none":"なし",
+    "default":"既定",
     "change":"変更",
     "select":"選択",
     "env":"環境設定",
@@ -25,7 +27,7 @@
     "fixwidthwarn":"",
     "above":"以上",
     "font":"フォント",
-    "fontwarn":"「選択」を押してフォントを選んでください。",
+    "fontwarn":"「選択」を押してフォントを選んでください。(Linuxでは動きません)",
     "fontsize":"フォントサイズ",
     "savefolder":"デフォルトの保存先",
     "savefolderwarn":"画像ダウンロードやスクリーンショットに影響します。",
@@ -85,6 +87,11 @@
     "ticker":"#InstanceTickerを使う",
     "tickerwarn":"トゥートした人の所属サーバーをわかりやすく彩ります(自サーバー以外のトゥート向け)。<a href=\"https://cdn.weep.me/mastodon/\">#InstanceTickerについて</a> Copyright 2018 weepjp, kyori19.",
     "animation":"タイムラインのアニメーション",
+    "replySound":"リプライの通知音",
+    "favSound":"お気に入り登録の通知音",
+    "btSound":"ブーストの通知音",
+    "followSound":"フォローの通知音",
+    "customSound":"カスタム通知音",
     "post":"投稿設定",
     "autocw":"長文投稿時に警告",
     "autocwwarn":"下で指定した以上のトゥートを投稿するときにCWするかのダイアログを表示します。",

app/view/make/setting.sample.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="@@lang@@">
+<html lang="@@lang@@" style="overflow:scroll">
 
 <head>
 	<title>Settings - TheDesk</title>
@@ -56,8 +56,8 @@
 				<div id="envView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.id=='notf'"><a onclick="notftest()"
 								class="pointer">@@nntest@@</a><br></template>
@@ -158,11 +158,11 @@
 						<input type="hidden" id="color-picker2_value">
 					</div>
 					<div>
-						<h5>Accent</h5>@@accent@@
+					<h5>Accent</h5>@@accent@@
-						<div id="color-picker3-wrap">
+					<div id="color-picker3-wrap">
-							<div class="color-picker" id="color-picker3"></div>
+						<div class="color-picker" id="color-picker3"></div>
-						</div>
+					</div>
-						<input type="hidden" id="color-picker3_value">
+					<input type="hidden" id="color-picker3_value">
 					</div>
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
@@ -184,8 +184,8 @@
 				<div id="tlView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
@@ -210,6 +210,11 @@
 						</template><br>
 					</template>
 				</div>
+				<h5>@@customSound@@</h5>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(1)">Custom 1</button><span id="c1-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(2)">Custom 2</button><span id="c2-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(3)">Custom 3</button><span id="c3-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(4)">Custom 4</button><span id="c4-file"></span><br>
 			</div>
 		</li>
 		<li>
@@ -220,8 +225,8 @@
 				<div id="postView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">

app/view/make/setting.sample.js

@@ -7,6 +7,27 @@ var yesno=[
         value:"no"
     }
 ];
+var sound=[
+    {
+        text:"@@none@@",
+        value:"none"
+    },{
+        text:"@@default@@",
+        value:"default"
+    },{
+        text:"Custom 1",
+        value:"c1"
+    },{
+        text:"Custom 2",
+        value:"c2"
+    },{
+        text:"Custom 3",
+        value:"c3"
+    },{
+        text:"Custom 4",
+        value:"c4"
+    }
+];
 var envConstruction=[
     {
         id:"popup",
@@ -286,6 +307,46 @@ var tlConstruction=[
             desc:"",
             checkbox:yesno
         }
+    },{
+        id:"replySound",
+        storage:"replySound",
+        checkbox:true,
+        setValue:"none",
+        text:{
+            head:"@@replySound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"favSound",
+        storage:"favSound",
+        checkbox:true,
+        setValue:"none",
+        text:{
+            head:"@@favSound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"btSound",
+        storage:"btSound",
+        checkbox:true,
+        setValue:"none",
+        text:{
+            head:"@@btSound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"followSound",
+        storage:"followSound",
+        checkbox:true,
+        setValue:"none",
+        text:{
+            head:"@@followSound@@",
+            desc:"",
+            checkbox:sound
+        }
     }
 ];
 var postConstruction=[

app/view/ps/setting.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="ps">
+<html lang="ps" style="overflow:scroll">
 
 <head>
 	<title>Settings - TheDesk</title>
@@ -56,8 +56,8 @@
 				<div id="envView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.id=='notf'"><a onclick="notftest()"
 								class="pointer">crwdns540:0crwdne540:0</a><br></template>
@@ -158,11 +158,11 @@
 						<input type="hidden" id="color-picker2_value">
 					</div>
 					<div>
-						<h5>Accent</h5>crwdns2434:0crwdne2434:0
+					<h5>Accent</h5>crwdns2434:0crwdne2434:0
-						<div id="color-picker3-wrap">
+					<div id="color-picker3-wrap">
-							<div class="color-picker" id="color-picker3"></div>
+						<div class="color-picker" id="color-picker3"></div>
-						</div>
+					</div>
-						<input type="hidden" id="color-picker3_value">
+					<input type="hidden" id="color-picker3_value">
 					</div>
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">crwdns528:0crwdne528:0</button>&nbsp;<button
@@ -184,8 +184,8 @@
 				<div id="tlView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
@@ -210,6 +210,11 @@
 						</template><br>
 					</template>
 				</div>
+				<h5>@@customSound@@</h5>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(1)">Custom 1</button><span id="c1-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(2)">Custom 2</button><span id="c2-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(3)">Custom 3</button><span id="c3-file"></span><br>
+				<button class="btn waves-effect" style="width:120px;" onclick="customSound(4)">Custom 4</button><span id="c4-file"></span><br>
 			</div>
 		</li>
 		<li>
@@ -220,8 +225,8 @@
 				<div id="postView">
 					<template v-for="(item, i) in config">
 						<h5>{{item.text.head}}</h5>
-						<template v-if=item.text.desc>
+						<template v-if="item.text.desc">
-							<templete v-html=item.text.desc></templete><br>
+							<templete v-html="item.text.desc"></templete><br>
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">

app/view/ps/setting.vue.js

@@ -7,6 +7,27 @@ var yesno=[
         value:"no"
     }
 ];
+var sound=[
+    {
+        text:"@@none@@",
+        value:"none"
+    },{
+        text:"@@default@@",
+        value:"default"
+    },{
+        text:"Custom 1",
+        value:"c1"
+    },{
+        text:"Custom 2",
+        value:"c2"
+    },{
+        text:"Custom 3",
+        value:"c3"
+    },{
+        text:"Custom 4",
+        value:"c4"
+    }
+];
 var envConstruction=[
     {
         id:"popup",
@@ -286,6 +307,46 @@ var tlConstruction=[
             desc:"",
             checkbox:yesno
         }
+    },{
+        id:"replySound",
+        storage:"replySound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"@@replySound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"favSound",
+        storage:"favSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"@@favSound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"btSound",
+        storage:"btSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"@@btSound@@",
+            desc:"",
+            checkbox:sound
+        }
+    },{
+        id:"followSound",
+        storage:"followSound",
+        checkbox:true,
+        setValue:"default",
+        text:{
+            head:"@@followSound@@",
+            desc:"",
+            checkbox:sound
+        }
     }
 ];
 var postConstruction=[