From 24c120a89022a80c34408dcffe39bc00a350e6c3 Mon Sep 17 00:00:00 2001 From: mightypanders Date: Fri, 9 Jun 2023 16:16:23 +0200 Subject: [PATCH 1/3] add /guides interaction with buttons --- server/commands/guides.ts | 41 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 server/commands/guides.ts diff --git a/server/commands/guides.ts b/server/commands/guides.ts new file mode 100644 index 0000000..fcb5a25 --- /dev/null +++ b/server/commands/guides.ts @@ -0,0 +1,41 @@ + +import { Command } from '../structures/command' +import { RunOptions } from '../types/commandTypes' +import { APIEmbed, ActionRowBuilder, ButtonBuilder, ButtonStyle } from 'discord.js' +import { v4 as uuid } from 'uuid' +import { logger } from '../logger' + +export default new Command({ + name: 'guides', + description: 'Bekomme eine Auswahl von Guides per DM', + options: [], + run: async (interaction: RunOptions) => { + const requestId = uuid() + const guildId = interaction.interaction.guild?.id + logger.info(`Starting guides interaction for user ${interaction.interaction.user.id}`, { requestId, guildId }) + + const mediaPlayerGuideButton = new ButtonBuilder() + .setCustomId('jfmpGuide') + .setLabel('Media Player Einrichtung') + .setStyle(ButtonStyle.Primary) + + const accountSetup = new ButtonBuilder() + .setCustomId('accountGuid') + .setLabel('Account Anlage') + .setStyle(ButtonStyle.Primary) + + + const row = new ActionRowBuilder() + .addComponents(mediaPlayerGuideButton, accountSetup) + + //const userDMchannel = await interaction.interaction.user.createDM() + interaction.interaction.followUp({ + content: `Hier ist eine Auswahl von Guides.`, + components: [row] + }) + //userDMchannel.send({ + // content: `Hier ist eine Auswahl von Guides.`, + // components: [row] + //}) + } +}) From 3e152864fd686d375561bbf1037bb0bd7c6387e0 Mon Sep 17 00:00:00 2001 From: Sammy Date: Fri, 9 Jun 2023 21:30:24 +0200 Subject: [PATCH 2/3] complete guides --- server/assets/attachments.ts | 18 +-- server/commands/guides.ts | 70 ++++++++++-- server/commands/mitgucken.ts | 214 ++++++++++++++++++++--------------- 3 files changed, 187 insertions(+), 115 deletions(-) diff --git a/server/assets/attachments.ts b/server/assets/attachments.ts index c7da60e..c2b6326 100644 --- a/server/assets/attachments.ts +++ b/server/assets/attachments.ts @@ -1,12 +1,12 @@ import { AttachmentBuilder } from "discord.js" -const splashScreen = new AttachmentBuilder('./server/assets/images/set_splashscreen.png') -const startScreen = new AttachmentBuilder('./server/assets/images/start_screen.png') -const serverConnection = new AttachmentBuilder('./server/assets/images/server_verbindung.png') -const accountChoice = new AttachmentBuilder('./server/assets/images/auswahl_anmeldung.png') -const loginScreen = new AttachmentBuilder('./server/assets/images/login_screen.png') -const overview = new AttachmentBuilder('./server/assets/images/jellyfin_ubersicht.png') -const joingroup = new AttachmentBuilder('./server/assets/images/gruppe_beitreten.png') -const resume = new AttachmentBuilder('./server/assets/images/wiedergabe_fortsetzen.png') -const leavegroup = new AttachmentBuilder('./server/assets/images/gruppe_verlassen.png') +export const splashScreen = new AttachmentBuilder('./server/assets/images/set_splashscreen.png') +export const startScreen = new AttachmentBuilder('./server/assets/images/start_screen.png') +export const serverConnection = new AttachmentBuilder('./server/assets/images/server_verbindung.png') +export const accountChoice = new AttachmentBuilder('./server/assets/images/auswahl_anmeldung.png') +export const loginScreen = new AttachmentBuilder('./server/assets/images/login_screen.png') +export const overview = new AttachmentBuilder('./server/assets/images/jellyfin_ubersicht.png') +export const joingroup = new AttachmentBuilder('./server/assets/images/gruppe_beitreten.png') +export const resume = new AttachmentBuilder('./server/assets/images/wiedergabe_fortsetzen.png') +export const leavegroup = new AttachmentBuilder('./server/assets/images/gruppe_verlassen.png') export const attachedImages = [splashScreen, startScreen, serverConnection, accountChoice, loginScreen, overview, resume, leavegroup, joingroup] diff --git a/server/commands/guides.ts b/server/commands/guides.ts index fcb5a25..19b0d45 100644 --- a/server/commands/guides.ts +++ b/server/commands/guides.ts @@ -1,9 +1,13 @@ import { Command } from '../structures/command' import { RunOptions } from '../types/commandTypes' -import { APIEmbed, ActionRowBuilder, ButtonBuilder, ButtonStyle } from 'discord.js' +import { APIEmbed, ActionRowBuilder, ButtonBuilder, ButtonComponent, ButtonInteraction, ButtonStyle, CollectorFilter, ComponentType, InteractionCollectorOptions } from 'discord.js' import { v4 as uuid } from 'uuid' import { logger } from '../logger' +import { CacheType } from 'discord.js' +import { configureServer, installation, loginInfo, useSyncgroup } from './mitgucken' +import { attachmentImages } from '../..' +import { accountChoice, joingroup, leavegroup, loginScreen, overview, resume, serverConnection, splashScreen, startScreen } from '../assets/attachments' export default new Command({ name: 'guides', @@ -15,27 +19,69 @@ export default new Command({ logger.info(`Starting guides interaction for user ${interaction.interaction.user.id}`, { requestId, guildId }) const mediaPlayerGuideButton = new ButtonBuilder() - .setCustomId('jfmpGuide') - .setLabel('Media Player Einrichtung') + .setCustomId('jfInstallation') + .setLabel('Media Player Installation') .setStyle(ButtonStyle.Primary) - const accountSetup = new ButtonBuilder() - .setCustomId('accountGuid') - .setLabel('Account Anlage') + const accountSetupGuideButton = new ButtonBuilder() + .setCustomId('configureServer') + .setLabel('Server einstellen') + .setStyle(ButtonStyle.Primary) + + const loginGuideButton = new ButtonBuilder() + .setCustomId('login') + .setLabel('Einloggen') + .setStyle(ButtonStyle.Primary) + + const useSyncGroupGuideButton = new ButtonBuilder() + .setCustomId('useSyncGroup') + .setLabel('Watch Parties nutzen') + .setStyle(ButtonStyle.Primary) + + const roleExplanationButton = new ButtonBuilder() + .setCustomId('explainRoles') + .setLabel('Wie bekomme ich Zugang') .setStyle(ButtonStyle.Primary) const row = new ActionRowBuilder() - .addComponents(mediaPlayerGuideButton, accountSetup) + .addComponents(mediaPlayerGuideButton, accountSetupGuideButton, loginGuideButton, useSyncGroupGuideButton, roleExplanationButton) + //const userDMchannel = await interaction.interaction.user.createDM() - interaction.interaction.followUp({ + const response = await interaction.interaction.followUp({ content: `Hier ist eine Auswahl von Guides.`, components: [row] }) - //userDMchannel.send({ - // content: `Hier ist eine Auswahl von Guides.`, - // components: [row] - //}) + + try { + + const guideSelection = await response.awaitMessageComponent({ time: 60_000 }) + + if (guideSelection.customId === 'jfInstallation') { + const userDMChannel = await guideSelection.user.createDM() + userDMChannel.send({ embeds: installation(), files: [splashScreen] }) + } else if (guideSelection.customId === 'configureServer') { + const userDMChannel = await guideSelection.user.createDM() + userDMChannel.send({ embeds: configureServer(), files: [startScreen, serverConnection] }) + } else if (guideSelection.customId === 'login') { + const userDMChannel = await guideSelection.user.createDM() + userDMChannel.send({ embeds: loginInfo(), files: [accountChoice, loginScreen] }) + } else if (guideSelection.customId === 'useSyncGroup') { + const userDMChannel = await guideSelection.user.createDM() + userDMChannel.send({ embeds: useSyncgroup(), files: [overview, joingroup, resume, leavegroup] }) + } else if (guideSelection.customId === 'explainRoles') { + const userDMChannel = await guideSelection.user.createDM() + userDMChannel.send(`Mit einer Rolle kann dafür gesorgt werden, dass du einen dauerhaften Account auf dem Mediaserver hast. Wende dich bei Bedarf an Samantha oder Markus.\n +Für eine watchparty bekommst du allerdings automatisch einen Account. Hierfür melde einfach Interesse an dem Event an. Wenn du für das Event Interesse angemeldet hast bekommst du automatisch beim Start des Events einen Benutzernamen und das dazugehörige Passwort zugesendet.\n +Hast du kein Interesse angemeldet bekommst du automatisch einen Nutzernamen und Passwort zugeschickt wenn du den Channel betrittst in dem das Event stattfindet.`) + } + + guideSelection.update({ content: "Hab ich dir per DM geschickt :)", components: [] }) + + } catch (error) { + await interaction.interaction.editReply({ content: 'Das dauert mir zu lange, frag mich nochmal wenn du nen guide brauchst', components: [] }); + } + } }) diff --git a/server/commands/mitgucken.ts b/server/commands/mitgucken.ts index 3ee3753..9f4b160 100644 --- a/server/commands/mitgucken.ts +++ b/server/commands/mitgucken.ts @@ -14,102 +14,128 @@ export default new Command({ const requestId = uuid() interaction.interaction.followUp('Ich schicke dir einen Guide per DM!') const embedList: APIEmbed[] = [] - // DownloadLink - embedList.push({ - color, - title: 'Jellyfin Media Player', - description: 'Du kannst den Jellyfin Media Player von github herunterladen.\n Der Mediaplayer muss genutzt werden, da ein Schauen direkt über das Webinterface den Server zum Schmelzen bringt.', - fields: [ - { name: "Windows", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-windows-x64.exe" }, - { name: "Mac", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-macos-notarized.dmg" } - ] - }) - // Installation - embedList.push({ - color, - title: "Installation", - description: "Führe die Datei aus und installiere den Jellyfin Media Player an den Ort deiner Wahl", - image: { - url: 'attachment://set_splashscreen.png' - } - }) - // Login - embedList.push({ - color, - title: "Server Auswahl", - description: "Die Jellyfin App kann sich mit mehreren Servern verbinden.\n Hattest du noch nie eine Server Verbindung wähle hier 'Server hinzufügen'.", - image: { - url: 'attachment://start_screen.png' - } - }) - // Server Address - embedList.push({ - color, - title: "Server Verbindung", - description: "Stelle eine Verbindung zum Hartzarett Jellyfin Server her", - fields: [ - { name: "Server Adresse", value: "https://media.hartzarett.ruhr" } - ], - image: { - url: 'attachment://server_verbindung.png' - } - }) - // Account choice - embedList.push({ - color, - title: "Account Auswahl", - description: "In der Regel sind die Accounts aus Datenschutzgründen versteckt.\nWähle 'Manuelle Anmeldung' aus", - image: { - url: 'attachment://auswahl_anmeldung.png' - } - }), - // password screen - embedList.push({ - color, - title: "Login", - description: "Melde dich mit dem Usernamen und Passwort an, welches dir von mir zugeschickt wird.", - image: { - url: 'attachment://login_screen.png' - } - }) - embedList.push({ - color, - title: "SyncPlay Menü", - image: { - url: 'attachment://jellyfin_ubersicht.png' - }, - description: "Im Hauptbildschirm findest du die 'SyncPlay' Einstellungen oben rechts.", - }) - // join group - embedList.push({ - color, - title: "Gruppe beitreten", - image: { - url: 'attachment://gruppe_beitreten.png' - }, - description: "Suche dir aus dem Dropdown die SyncPlay Gruppe aus, die zu deinem Event gehört.", - }) - // leave group - embedList.push({ - color, - title: "Gruppe verlassen", - image: { - url: 'attachment://gruppe_verlassen.png' - }, - description: "Wenn du die Watchparty verlassen möchtest, kannst du das ebenfalls über das Menü oben rechts tun.", - }) - // resume playback - embedList.push({ - color, - title: "Wiedergabe fortsetzen", - image: { - url: 'attachment://wiedergabe_fortsetzen.png' - }, - description: "Wenn du aus der Watchparty rausgeflogen bist, oder die Wiedergabe verlassen hast, kannst du über das Menü oben rechts auch wieder zurückkehren.", - }) + embedList.push.apply(installation()) + embedList.push.apply(configureServer()) + embedList.push.apply(loginInfo()) + embedList.push.apply(useSyncgroup()) + //logger.info(`Trying to use ${splashScreen.name}`, { requestId, guildId: interaction.interaction.guild?.id }) logger.info(`Sending guide to ${interaction.interaction.user.id}`, { requestId, guildId: interaction.interaction.guild?.id }) const userDMchannel = await interaction.interaction.user.createDM() - userDMchannel.send({ embeds: embedList, files: attachmentImages}) + userDMchannel.send({ embeds: embedList, files: attachmentImages }) } }) + + +export function installation(): APIEmbed[] { + const embedList: APIEmbed[] = [] + // DownloadLink + embedList.push({ + color, + title: 'Jellyfin Media Player', + description: 'Du kannst den Jellyfin Media Player von github herunterladen.\n Der Mediaplayer muss genutzt werden, da ein Schauen direkt über das Webinterface den Server zum Schmelzen bringt.', + fields: [ + { name: "Windows", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-windows-x64.exe" }, + { name: "Mac", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-macos-notarized.dmg" } + ] + }) + // Installation + embedList.push({ + color, + title: "Installation", + description: "Führe die Datei aus und installiere den Jellyfin Media Player an den Ort deiner Wahl", + image: { + url: 'attachment://set_splashscreen.png' + } + }) + return embedList +} + +export function configureServer(): APIEmbed[] { + const embedList: APIEmbed[] = [] + // Login + embedList.push({ + color, + title: "Server Auswahl", + description: "Die Jellyfin App kann sich mit mehreren Servern verbinden.\n Hattest du noch nie eine Server Verbindung wähle hier 'Server hinzufügen'.", + image: { + url: 'attachment://start_screen.png' + } + }) + // Server Address + embedList.push({ + color, + title: "Server Verbindung", + description: "Stelle eine Verbindung zum Hartzarett Jellyfin Server her", + fields: [ + { name: "Server Adresse", value: "https://media.hartzarett.ruhr" } + ], + image: { + url: 'attachment://server_verbindung.png' + } + }) + return embedList +} + +export function loginInfo(): APIEmbed[] { + const embedList: APIEmbed[] = [] + // Account choice + embedList.push({ + color, + title: "Account Auswahl", + description: "In der Regel sind die Accounts aus Datenschutzgründen versteckt.\nWähle 'Manuelle Anmeldung' aus", + image: { + url: 'attachment://auswahl_anmeldung.png' + } + }) + // password screen + embedList.push({ + color, + title: "Login", + description: "Melde dich mit dem Usernamen und Passwort an, welches dir von mir zugeschickt wird. Falls du ein neues brauchst führe einmal /reset_passwort aus :)", + image: { + url: 'attachment://login_screen.png' + } + }) + return embedList +} + +export function useSyncgroup(): APIEmbed[] { + const embedList: APIEmbed[] = [] + embedList.push({ + color, + title: "SyncPlay Menü", + image: { + url: 'attachment://jellyfin_ubersicht.png' + }, + description: "Im Hauptbildschirm findest du die 'SyncPlay' Einstellungen oben rechts.", + }) + // join group + embedList.push({ + color, + title: "Gruppe beitreten", + image: { + url: 'attachment://gruppe_beitreten.png' + }, + description: "Suche dir aus dem Dropdown die SyncPlay Gruppe aus, die zu deinem Event gehört.", + }) + // leave group + embedList.push({ + color, + title: "Gruppe verlassen", + image: { + url: 'attachment://gruppe_verlassen.png' + }, + description: "Wenn du die Watchparty verlassen möchtest, kannst du das ebenfalls über das Menü oben rechts tun.", + }) + //resume playback + embedList.push({ + color, + title: "Wiedergabe fortsetzen", + image: { + url: 'attachment://wiedergabe_fortsetzen.png' + }, + description: "Wenn du aus der Watchparty rausgeflogen bist, oder die Wiedergabe verlassen hast, kannst du über das Menü oben rechts auch wieder zurückkehren.", + }) + return embedList +} \ No newline at end of file From c0b24ee3ad9cfb33e85c41cd970e4ee741fac20a Mon Sep 17 00:00:00 2001 From: Sammy Date: Fri, 9 Jun 2023 22:01:38 +0200 Subject: [PATCH 3/3] restructuring --- server/commands/guides.ts | 18 +++++++----------- server/commands/mitgucken.ts | 33 +++++++++++++++++++-------------- 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/server/commands/guides.ts b/server/commands/guides.ts index 19b0d45..43c1302 100644 --- a/server/commands/guides.ts +++ b/server/commands/guides.ts @@ -1,13 +1,11 @@ +import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from 'discord.js' +import { v4 as uuid } from 'uuid' +import { accountChoice, joingroup, leavegroup, loginScreen, overview, resume, serverConnection, splashScreen, startScreen } from '../assets/attachments' +import { logger } from '../logger' import { Command } from '../structures/command' import { RunOptions } from '../types/commandTypes' -import { APIEmbed, ActionRowBuilder, ButtonBuilder, ButtonComponent, ButtonInteraction, ButtonStyle, CollectorFilter, ComponentType, InteractionCollectorOptions } from 'discord.js' -import { v4 as uuid } from 'uuid' -import { logger } from '../logger' -import { CacheType } from 'discord.js' -import { configureServer, installation, loginInfo, useSyncgroup } from './mitgucken' -import { attachmentImages } from '../..' -import { accountChoice, joingroup, leavegroup, loginScreen, overview, resume, serverConnection, splashScreen, startScreen } from '../assets/attachments' +import { configureServer, explainRoles, installation, loginInfo, useSyncgroup } from './mitgucken' export default new Command({ name: 'guides', @@ -72,15 +70,13 @@ export default new Command({ userDMChannel.send({ embeds: useSyncgroup(), files: [overview, joingroup, resume, leavegroup] }) } else if (guideSelection.customId === 'explainRoles') { const userDMChannel = await guideSelection.user.createDM() - userDMChannel.send(`Mit einer Rolle kann dafür gesorgt werden, dass du einen dauerhaften Account auf dem Mediaserver hast. Wende dich bei Bedarf an Samantha oder Markus.\n -Für eine watchparty bekommst du allerdings automatisch einen Account. Hierfür melde einfach Interesse an dem Event an. Wenn du für das Event Interesse angemeldet hast bekommst du automatisch beim Start des Events einen Benutzernamen und das dazugehörige Passwort zugesendet.\n -Hast du kein Interesse angemeldet bekommst du automatisch einen Nutzernamen und Passwort zugeschickt wenn du den Channel betrittst in dem das Event stattfindet.`) + userDMChannel.send(explainRoles()) } guideSelection.update({ content: "Hab ich dir per DM geschickt :)", components: [] }) } catch (error) { - await interaction.interaction.editReply({ content: 'Das dauert mir zu lange, frag mich nochmal wenn du nen guide brauchst', components: [] }); + await interaction.interaction.editReply({ content: 'Das dauert mir zu lange, frag mich nochmal wenn du nen Guide brauchst', components: [] }); } } diff --git a/server/commands/mitgucken.ts b/server/commands/mitgucken.ts index 9f4b160..68af7c9 100644 --- a/server/commands/mitgucken.ts +++ b/server/commands/mitgucken.ts @@ -14,10 +14,15 @@ export default new Command({ const requestId = uuid() interaction.interaction.followUp('Ich schicke dir einen Guide per DM!') const embedList: APIEmbed[] = [] - embedList.push.apply(installation()) - embedList.push.apply(configureServer()) - embedList.push.apply(loginInfo()) - embedList.push.apply(useSyncgroup()) + embedList.push(...installation()) + embedList.push(...configureServer()) + embedList.push(...loginInfo()) + embedList.push(...useSyncgroup()) + embedList.push({ + color, + title: "Wie du an einen Account kommst", + description: explainRoles() + }) //logger.info(`Trying to use ${splashScreen.name}`, { requestId, guildId: interaction.interaction.guild?.id }) logger.info(`Sending guide to ${interaction.interaction.user.id}`, { requestId, guildId: interaction.interaction.guild?.id }) @@ -29,21 +34,15 @@ export default new Command({ export function installation(): APIEmbed[] { const embedList: APIEmbed[] = [] - // DownloadLink + // DownloadLink and installation embedList.push({ color, - title: 'Jellyfin Media Player', - description: 'Du kannst den Jellyfin Media Player von github herunterladen.\n Der Mediaplayer muss genutzt werden, da ein Schauen direkt über das Webinterface den Server zum Schmelzen bringt.', + title: 'Jellyfin Media Player Installation', + description: 'Du kannst den Jellyfin Media Player von github herunterladen.\n Der Mediaplayer muss genutzt werden, da ein Schauen direkt über das Webinterface den Server zum Schmelzen bringt.\nFühre die Datei aus und installiere den Jellyfin Media Player an den Ort deiner Wahl.', fields: [ { name: "Windows", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-windows-x64.exe" }, { name: "Mac", value: "https://github.com/jellyfin/jellyfin-media-player/releases/download/v1.9.1/JellyfinMediaPlayer-1.9.1-macos-notarized.dmg" } - ] - }) - // Installation - embedList.push({ - color, - title: "Installation", - description: "Führe die Datei aus und installiere den Jellyfin Media Player an den Ort deiner Wahl", + ], image: { url: 'attachment://set_splashscreen.png' } @@ -138,4 +137,10 @@ export function useSyncgroup(): APIEmbed[] { description: "Wenn du aus der Watchparty rausgeflogen bist, oder die Wiedergabe verlassen hast, kannst du über das Menü oben rechts auch wieder zurückkehren.", }) return embedList +} + +export function explainRoles(): string { + return `Mit einer Rolle kann dafür gesorgt werden, dass du einen dauerhaften Account auf dem Mediaserver hast. Wende dich bei Bedarf an Samantha oder Markus.\n + Für eine watchparty bekommst du allerdings automatisch einen Account. Hierfür melde einfach Interesse an dem Event an. Wenn du für das Event Interesse angemeldet hast bekommst du automatisch beim Start des Events einen Benutzernamen und das dazugehörige Passwort zugesendet.\n + Hast du kein Interesse angemeldet bekommst du automatisch einen Nutzernamen und Passwort zugeschickt wenn du den Channel betrittst in dem das Event stattfindet.` } \ No newline at end of file