Skip to content

Instantly share code, notes, and snippets.

@chimcen
Forked from heptal/DiscordWidget.js
Created November 13, 2020 07:38
Show Gist options
  • Save chimcen/940e2fabfd5e826e1bd634e89781b9e5 to your computer and use it in GitHub Desktop.
Save chimcen/940e2fabfd5e826e1bd634e89781b9e5 to your computer and use it in GitHub Desktop.
Recent Discord channel/DM messages shown in iOS14 widget - built with Scriptable.app
// set up keychain and token
const namespace = "dscrd.wdgt"
const token = `${namespace}.usertoken`
if (!Keychain.contains(token) || !Keychain.get(token)) {
let alert = new Alert()
alert.title = "Enter Discord User Token"
alert.addTextField("<discord_token>")
await alert.presentAlert()
Keychain.set(token, alert.textFieldValue(0) || "")
}
// discord API fetch
const CDN = "https://cdn.discordapp.com"
const BASE = "https://canary.discordapp.com/api/v6/"
const api = async (path, verb = "GET", opts = {}) => {
let req = new Request(BASE + path);
req.method = verb;
req.headers = {
'authorization': Keychain.get(token)
}
return await req.loadJSON()
}
const me = await api(`users/@me`)
const $G = `${namespace}.${me.id}.guild`
const $C = `${namespace}.${me.id}.channel`
// data resources
const getGuilds = () => api(`users/@me/guilds`)
const getDMs = () => api(`users/@me/channels`)
const getChannel = id => api(`channels/${id}`)
const getGuild = id => api(`guilds/${id}`)
const getChannels = id => api(`guilds/${id}/channels`)
const getMessages = id => api(`channels/${id}/messages`)
// guild and user images
const banner = g => `${CDN}/banners/${g.id}/${g.banner}.png`
const icon = g => `${CDN}/icons/${g.id}/${g.icon}.png`
const avatar = u => u.avatar ?
`${CDN}/avatars/${u.id}/${u.avatar}?size=64` :
`${CDN}/embed/avatars/${u.discriminator % 5}.png`
// pick a DM convo or guild channel
async function picker() {
let table = new UITable()
let makerow = (title, url) => {
let row = new UITableRow()
row.backgroundColor = new Color("#36393f")
row.height = 48
row.cellSpacing = 8
row.addImageAtURL(url).widthWeight = 15
let txt = row.addText(title)
txt.widthWeight = 85
txt.titleColor = Color.white()
txt.titleFont = Font.boldRoundedSystemFont(18)
return row
}
let dms = makerow("DM Convos")
dms.onSelect = () => Keychain.set($G, "")
table.addRow(dms)
for (let guild of (await getGuilds())) {
let row = makerow(guild.name, icon(guild))
row.onSelect = () => Keychain.set($G, guild.id)
table.addRow(row)
}
return table.present(true).then(async function () {
table.removeAllRows()
let channels = (Keychain.get($G) ?
(await getChannels(Keychain.get($G)))
.filter(c => c.type === 0) :
(await getDMs()).filter(dm => dm.type === 1)
.map(dm => ({
...dm,
name: dm.recipients[0].username,
av: avatar(dm.recipients[0])
}))
)
.filter(c => !!c.last_message_id)
.sort((a, b) => b.last_message_id.localeCompare(a.last_message_id))
for (let c of channels) {
let row = makerow(c.name, c.av)
row.onSelect = () => Keychain.set($C, c.id)
table.addRow(row)
}
return table.present(true).then(function () {
console.log("guild id:\t" + Keychain.get($G))
console.log("channel id:\t" + Keychain.get($C))
})
})
}
// build widget for chosen channel
async function createWidget() {
let wdgt = new ListWidget()
let df = new DateFormatter()
df.dateFormat = "hh:mm"
let truncate = false
let shadow = el => {
el.shadowColor = Color.black()
el.shadowRadius = 4
el.shadowOffset = new Point(1, 2)
}
let gradient = new LinearGradient()
gradient.locations = [0, 1]
gradient.colors = [new Color("66666699"), new Color("99336699")]
wdgt.backgroundGradient = gradient
if (!!Keychain.get($G)) {
let gld = await getGuild(Keychain.get($G))
let bgUrl = gld.banner ? banner(gld) : icon(gld)
let bgImage = new Request(bgUrl)
wdgt.backgroundImage = await bgImage.loadImage()
}
let items = await getMessages(Keychain.get($C))
if (!Array.isArray(items)) {
let txt = wdgt.addText(JSON.stringify(items))
txt.textColor = Color.white()
txt.centerAlignText()
wdgt.backgroundColor = Color.red()
return wdgt
}
items = items.reverse().slice(-7)
console.log(JSON.stringify(items, null, 2))
for (let item of items) {
let {
author,
content,
timestamp
} = item
let ts = df.string(new Date(Date.parse(timestamp)))
let stack = wdgt.addStack()
// profile pic
let avRequest = new Request(avatar(author))
let avImage = await avRequest.loadImage()
let pfp = stack.addImage(avImage)
pfp.imageSize = new Size(18, 18)
pfp.cornerRadius = 10
pfp.leftAlignImage()
shadow(pfp)
stack.addSpacer(5)
let ms = stack.addStack()
ms.layoutVertically()
if (truncate) {
let lines = Math.ceil(content.length / 60)
ms.size = new Size(0, 20 * lines)
}
// username
let user = ms.addText(author.username)
user.font = Font.mediumMonospacedSystemFont(8)
user.textColor = Color.cyan()
user.leftAlignText()
shadow(user)
// message
let msg = ms.addText(content)
msg.font = Font.heavyRoundedSystemFont(10)
msg.textColor = Color.white()
msg.lineLimit = truncate ? 3 : 0
msg.leftAlignText()
shadow(msg)
stack.addSpacer()
// timestamp
let d = stack.addText(ts)
d.font = Font.mediumMonospacedSystemFont(9)
d.textColor = Color.white()
d.rightAlignText()
stack.topAlignContent()
}
return wdgt
}
async function refresh() {
await createWidget().then(wdgt => {
config.runsInApp && wdgt.presentMedium()
Script.setWidget(wdgt)
Script.complete()
})
}
if (config.runsInWidget) {
await refresh()
} else {
let alert = new Alert()
alert.addAction("Select Displayed Chat")
alert.addAction("Open Discord.app")
alert.addCancelAction("Cancel")
switch (await alert.presentAlert()) {
case 0:
await picker()
await refresh()
break;
case 1:
Safari.open("https://discord.gg")
break;
}
Script.complete()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment