Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix: spotift tips

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/css/tl.css
View File

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

322
app/js/ui/tips.js
View File

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