Fix: spotift tips

This commit is contained in:
cutls 2019-11-09 14:19:18 +09:00
parent d08c2ecd74
commit 955c95e8a8
2 changed files with 657 additions and 561 deletions

View File

@ -81,15 +81,40 @@
border-radius: 5px;
}
#spot-box {
display: grid;
grid-template-columns: 40px 30px 2.5fr 1fr 60px;
grid-template-rows: 22px 20px;
grid-template-areas: 'cover name name artist refresh' 'cover progress progress progress time';
}
#spot-refresh {
grid-area: refresh;
}
#spot-cover {
grid-area: cover;
}
#spot-name {
grid-area: name;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 25px;
}
#spot-artist {
grid-area: artist;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 25px;
}
#spot-img {
margin-right: 2px;
width: 90%;
}
#spot-art {
margin-right: 2px;
margin-left: 2px;
#spot-time {
grid-area: time;
}
.progress {
grid-area: progress;
width: 100%;
}
.btnsgroup .grouptitle {
font-family: Open Sans;
@ -225,19 +250,19 @@ iframe,
display: grid;
grid-template-columns: 43px 2fr 1fr;
grid-template-rows: auto 1.6rem 1fr auto 2.5rem;
grid-template-areas: "notice notice notice" "icon display_name display_name" "space toot toot" "space additional additional" "vis actions side";
grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'space toot toot' 'space additional additional' 'vis actions side';
}
.hide-actions{
.hide-actions {
grid-template-rows: auto 1.6rem 1fr auto 0;
}
.hide-actions .area-actions{
display:none;
.hide-actions .area-actions {
display: none;
}
.hide-actions .area-vis{
display:none;
.hide-actions .area-vis {
display: none;
}
.hide-actions .area-side{
display:none;
.hide-actions .area-side {
display: none;
}
.cvo h1,
.cvo h2,
@ -310,7 +335,7 @@ iframe,
display: none;
}
.area-toot.acct-note p:first-child:after {
content: "...";
content: '...';
color: var(--gray);
}
@ -344,7 +369,7 @@ iframe,
.quote-renote {
display: grid;
grid-template-columns: 43px 2fr 25px;
grid-template-areas: "ricon ruser rdet" "ricon rtext rdet";
grid-template-areas: 'ricon ruser rdet' 'ricon rtext rdet';
border: 1px solid;
margin-top: 3px;
padding: 1px;
@ -466,7 +491,7 @@ p:not(:last-child) {
display: grid;
grid-template-columns: 40px 1fr 1fr 24px;
grid-template-rows: 30px 30px;
grid-template-areas: "notice notice_name notice_name a2" "notice a1 sta a3" "notf-box notf-box notf-box notf-box";
grid-template-areas: 'notice notice_name notice_name a2' 'notice a1 sta a3' 'notf-box notf-box notf-box notf-box';
}
.emp {
font-weight: bold;
@ -554,9 +579,8 @@ p:not(:last-child) {
border: thin solid gray;
border-bottom: 2px solid white;
grid-area: notf-box;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3),
0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.3), 0px -10px 10px 0px rgba(0, 0, 0, 0.3) inset;
}
.type-b {
display: none;
@ -571,7 +595,7 @@ p:not(:last-child) {
right: 0px;
}
.toot a span.ellipsis:after {
content: "...";
content: '...';
}
.toot a:not(.mention) span:last-of-type {
/*display: none;*/

View File

@ -1,218 +1,290 @@
//左下のメッセージ
var todcTrigger = null;
var todcTrigger = null
function todo(mes) {
clearInterval(todcTrigger);
$("#message").text(mes);
$("#message").fadeIn();
todcTrigger = setTimeout(todc, 4000);
clearInterval(todcTrigger)
$('#message').text(mes)
$('#message').fadeIn()
todcTrigger = setTimeout(todc, 4000)
}
function todc() {
$("#message").fadeOut();
$('#message').fadeOut()
}
//reverse
function bottomReverse() {
$("#bottom").toggleClass("reverse");
$(".leftside").toggleClass("reverse");
if ($("#bottom").hasClass("reverse")) {
localStorage.removeItem("reverse");
$('#bottom').toggleClass('reverse')
$('.leftside').toggleClass('reverse')
if ($('#bottom').hasClass('reverse')) {
localStorage.removeItem('reverse')
} else {
localStorage.setItem("reverse", "true");
localStorage.setItem('reverse', 'true')
}
}
function tips(mode) {
postMessage(["sendSinmpleIpc", "endmem"], "*");
clearInterval(clockint);
clearInterval(spotStart);
if (mode == "ver") {
tipsToggle();
$("#tips-text").html('<img src="../../img/desk.png" width="20" onclick="todo(\'TheDesk is a nice client!: TheDesk ' + localStorage.getItem("ver") + " git: " + gitHash + "')\">TheDesk " + localStorage.getItem("ver") + " {" + gitHash.slice(0, 7) + '} [<i class="material-icons" style="font-size:1.2rem;top: 3px;position: relative;">supervisor_account</i><span id="persons">1+</span>]');
localStorage.setItem("tips", "ver");
} else if (mode == "clock") {
tipsToggle();
localStorage.setItem("tips", "clock");
clock();
} else if (mode == "memory") {
tipsToggle();
localStorage.setItem("tips", "memory");
startmem();
} else if (mode == "trend") {
tipsToggle();
localStorage.setItem("tips", "trend");
trendTagonTip();
} else if (mode == "spotify") {
tipsToggle();
localStorage.setItem("tips", "spotify");
var json = nowplaying("spotifytips");
spotifytips(json);
postMessage(['sendSinmpleIpc', 'endmem'], '*')
clearInterval(clockint)
clearInterval(spotStart)
if (mode == 'ver') {
tipsToggle()
$('#tips-text').html(
'<img src="../../img/desk.png" width="20" onclick="todo(\'TheDesk is a nice client!: TheDesk ' +
localStorage.getItem('ver') +
' git: ' +
gitHash +
'\')">TheDesk ' +
localStorage.getItem('ver') +
' {' +
gitHash.slice(0, 7) +
'} [<i class="material-icons" style="font-size:1.2rem;top: 3px;position: relative;">supervisor_account</i><span id="persons">1+</span>]'
)
localStorage.setItem('tips', 'ver')
} else if (mode == 'clock') {
tipsToggle()
localStorage.setItem('tips', 'clock')
clock()
} else if (mode == 'memory') {
tipsToggle()
localStorage.setItem('tips', 'memory')
startmem()
} else if (mode == 'trend') {
tipsToggle()
localStorage.setItem('tips', 'trend')
trendTagonTip()
} else if (mode == 'spotify') {
tipsToggle()
localStorage.setItem('tips', 'spotify')
spotifytips()
}
}
//メモリ
function startmem() {
postMessage(["sendSinmpleIpc", "startmem"], "*");
postMessage(['sendSinmpleIpc', 'startmem'], '*')
}
function renderMem(use, cpu, total) {
$("#tips-text").html(escapeHTML(cpu) + "<br>Memory:" + Math.floor(use / 1024 / 1024 / 102.4) / 10 + "/" + Math.floor(total / 1024 / 1024 / 102.4) / 10 + "GB(" + Math.floor((use / total) * 100) + "%)");
$('#tips-text').html(
escapeHTML(cpu) +
'<br>Memory:' +
Math.floor(use / 1024 / 1024 / 102.4) / 10 +
'/' +
Math.floor(total / 1024 / 1024 / 102.4) / 10 +
'GB(' +
Math.floor((use / total) * 100) +
'%)'
)
}
//トレンドタグ
function trendTagonTip() {
$(".trendtag").remove();
var domain = "imastodon.net";
var at = localStorage.getItem("acct_" + acct_id + "_at");
var start = "https://" + domain + "/api/v1/trend_tags";
$('.trendtag').remove()
var domain = 'imastodon.net'
var at = localStorage.getItem('acct_' + acct_id + '_at')
var start = 'https://' + domain + '/api/v1/trend_tags'
fetch(start, {
method: "GET",
method: 'GET',
headers: {
"content-type": "application/json",
Authorization: "Bearer " + at
'content-type': 'application/json',
Authorization: 'Bearer ' + at
}
})
.then(function(response) {
if (!response.ok) {
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) {
todo(error);
setLog(start, "JSON", error);
console.error(error);
todo(error)
setLog(start, 'JSON', error)
console.error(error)
})
.then(function(json) {
if (json) {
var tags = "";
json = json.score;
var tags = ''
json = json.score
Object.keys(json).forEach(function(tag) {
tags = tags + "<a onclick=\"tagShow('" + tag + '\')" class="pointer">#' + escapeHTML(tag) + '</a><span class="hide" data-tag="' + tag + "\"> <a onclick=\"tagTL('tag','" + tag + '\',false,\'add\')" class="pointer" title="#' + tag + 'のタイムライン">TL</a> <a onclick="show();brInsert(\'#' + tag + '\')" class="pointer" title="#' + tag + 'でトゥート">Toot</a></span><br>';
});
$("#tips-text").html('<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:12px">refresh</i>:<br>' + tags + "</div>");
trendTagonTipInterval();
tags =
tags +
`<a onclick="tagShow('${tag}')" class="pointer">
#${escapeHTML(tag)}
</a>
<span class="hide" data-tag="${tag}"> 
<a onclick="tagTL('tag','${tag}',false,'add')" class="pointer" title="#${tag}のタイムライン">TL</a> 
<a onclick="show();brInsert('#${tag}')" class="pointer" title="#${tag}でトゥート">Toot</a>
</span><br>`
})
$('#tips-text').html(
'<div class="trendtag">トレンドタグ<i class="material-icons pointer" onclick="trendTagonTip()" style="font-size:12px">refresh</i>:<br>' +
tags +
'</div>'
)
trendTagonTipInterval()
} else {
$("#tips-text").html("");
$('#tips-text').html('')
}
});
})
}
//Spotify
spotint = null
function spotifytips() {
var start = "https://thedesk.top/now-playing?at=" + localStorage.getItem("spotify") + "&rt=" + localStorage.getItem("spotify-refresh");
var at = localStorage.getItem("spotify");
if (spotint) clearInterval(spotint)
var start =
'https://thedesk.top/now-playing?at=' +
localStorage.getItem('spotify') +
'&rt=' +
localStorage.getItem('spotify-refresh')
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) {
if (!response.ok) {
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) {
todo(error);
setLog(start, "JSON", error);
console.error(error);
todo(error)
setLog(start, 'JSON', error)
console.error(error)
})
.then(function(json) {
var ms = json.progress_ms;
var last = 1000 - (ms % 1000);
var item = json.item;
var img = item.album.images[0].url;
var artisttxt = "";
var ms = json.progress_ms
var last = 1000 - (ms % 1000)
var item = json.item
var img = item.album.images[0].url
var artisttxt = ''
for (i = 0; i < item.artists.length; i++) {
if (i > 0) {
artisttxt = artisttxt + "," + item.artists[i].name;
artisttxt = artisttxt + ',' + item.artists[i].name
} else {
artisttxt = item.artists[0].name;
artisttxt = item.artists[0].name
}
}
artisttxt = escapeHTML(artisttxt);
sleep(last);
var tms = item.duration_ms;
var per = (ms / item.duration_ms) * 100;
ms = ms / 1000;
tms = tms / 1000;
var s = Math.round(ms) % 60;
artisttxt = escapeHTML(artisttxt)
sleep(last)
var tms = item.duration_ms
var per = (ms / item.duration_ms) * 100
ms = ms / 1000
tms = tms / 1000
var s = Math.round(ms) % 60
if (s < 10) {
s = "0" + s;
s = '0' + s
}
var m = (Math.round(ms) - (Math.round(ms) % 60)) / 60;
var ts = Math.round(tms) % 60;
var m = (Math.round(ms) - (Math.round(ms) % 60)) / 60
var ts = Math.round(tms) % 60
if (ts < 10) {
ts = "0" + ts;
ts = '0' + ts
}
var tm = (Math.round(tms) - (Math.round(tms) % 60)) / 60;
$("#tips-text").html('<div id="spot-box"><i class="material-icons pointer" onclick="spotifytips()" style="font-size:12px">refresh</i><img src="' + img + '" width="20" id="spot-img">' + escapeHTML(item.name) + '<span class="gray sml" id="spot-art">' + artisttxt + '</span><span id="spot-m">' + m + '</span>:<span id="spot-s">' + s + "</span>/" + tm + ":" + ts + '</span></div><div class="progress grey"><div class="determinate spotify-prog grey lighten-2" style="width: ' + per + '%" data-s="' + Math.round(ms) + '" data-total="' + item.duration_ms + '"></div></div>');
spotint = setInterval(spotStart, 1000);
});
var tm = (Math.round(tms) - (Math.round(tms) % 60)) / 60
var html = `
<div id="spot-box">
<div id="spot-refresh">
<i class="material-icons pointer" onclick="spotifytips()" style="font-size:20px">refresh</i>
<i class="material-icons pointer" onclick="nowplaying('spotify');show()" style="font-size:20px">send</i>
</div>
<div id="spot-cover">
<img src="${img}" id="spot-img">
</div>
<div id="spot-name">
${escapeHTML(item.name)}
</div>
<div id="spot-artist">
<span class="gray sml" id="spot-art">${artisttxt}</span>
</div>
<div id="spot-time">
<span id="spot-m">${m}</span>:<span id="spot-s">${s}</span>/${tm}:${ts}</span>
</div>
<div class="progress grey">
<div class="determinate spotify-prog grey lighten-2"
style="width:${per}%" data-s="${Math.round(ms)}" data-total="${item.duration_ms}">
</div>
</div>
</div>`
$('#tips-text').html(html)
spotint = setInterval(spotStart, 1000)
})
} else {
Swal.fire({
type: "info",
type: 'info',
title: lang.lang_spotify_acct
});
})
}
}
function spotStart() {
var total = $(".spotify-prog").attr("data-total");
var s = $(".spotify-prog").attr("data-s");
var news = s * 1 + 1;
var per = (news * 100000) / total;
var ns = news % 60;
var nm = (news - ns) / 60;
var total = $('.spotify-prog').attr('data-total')
var s = $('.spotify-prog').attr('data-s')
var news = s * 1 + 1
var per = (news * 100000) / total
var ns = news % 60
var nm = (news - ns) / 60
if (ns < 10) {
ns = "0" + ns;
ns = '0' + ns
}
if (per >= 100) {
clearInterval(spotStart);
spotifytips();
clearInterval(spotStart)
spotifytips()
} else {
$("#spot-m").text(nm);
$("#spot-s").text(ns);
$('#spot-m').text(nm)
$('#spot-s').text(ns)
}
$(".spotify-prog").attr("data-s", news);
$(".spotify-prog").css("width", per + "%");
$('.spotify-prog').attr('data-s', news)
$('.spotify-prog').css('width', per + '%')
}
function trendTagonTipInterval() {
setTimeout(trendTagonTip, 6000000);
setTimeout(trendTagonTip, 6000000)
}
//時計
var clockint;
var clockint
function clock() {
var now = new Date();
var last = 1000 - (now.getTime() % 1000);
sleep(last);
clockint = setInterval(clockStart, 1000);
var now = new Date()
var last = 1000 - (now.getTime() % 1000)
sleep(last)
clockint = setInterval(clockStart, 1000)
}
function clockStart() {
var nowTime = new Date(); // 現在日時を得る
var nowHour = nowTime.getHours(); // 時を抜き出す
var nowTime = new Date() // 現在日時を得る
var nowHour = nowTime.getHours() // 時を抜き出す
if (nowHour < 10) {
nowHour = "0" + nowHour;
nowHour = '0' + nowHour
}
var nowMin = nowTime.getMinutes(); // 分を抜き出す
var nowMin = nowTime.getMinutes() // 分を抜き出す
if (nowMin < 10) {
nowMin = "0" + nowMin;
nowMin = '0' + nowMin
}
var nowSec = nowTime.getSeconds(); // 秒を抜き出す
var nowSec = nowTime.getSeconds() // 秒を抜き出す
if (nowSec < 10) {
nowSec = "0" + nowSec;
nowSec = '0' + nowSec
}
var msg = nowTime.getFullYear() + "/" + (nowTime.getMonth() + 1) + "/" + nowTime.getDate() + '<span style="font-size:20px; font-family:Open Sans">' + nowHour + ":" + nowMin + ":" + nowSec + "</span>";
$("#tips-text").html(msg);
var msg =
nowTime.getFullYear() +
'/' +
(nowTime.getMonth() + 1) +
'/' +
nowTime.getDate() +
'<span style="font-size:20px; font-family:Open Sans">' +
nowHour +
':' +
nowMin +
':' +
nowSec +
'</span>'
$('#tips-text').html(msg)
}
function sleep(waitMsec) {
var startMsec = new Date();
var startMsec = new Date()
while (new Date() - startMsec < waitMsec);
}
function tipsToggle() {
$("#tips").toggleClass("hide");
$("#tips-menu").toggleClass("hide");
$('#tips').toggleClass('hide')
$('#tips-menu').toggleClass('hide')
}
if (localStorage.getItem("tips")) {
tips(localStorage.getItem("tips"));
if (localStorage.getItem('tips')) {
tips(localStorage.getItem('tips'))
}