Skip to content

Commit e2371a9

Browse files
qlaffontqlaffont
committed
feat(client): enhance media player functionality with aspect ratio support
1 parent 6bd8d22 commit e2371a9

File tree

4 files changed

+35
-8
lines changed

4 files changed

+35
-8
lines changed

‎src/components/client/client.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@
88
<script src="https://cdn.tailwindcss.com"></script>
99
<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
1010
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
11-
<script src="https://cdn.vidstack.io/[email protected]" type="module"></script>
11+
<script src="https://cdn.vidstack.io/[email protected]" type="module"></script>
12+
<style>
13+
media-player.is-short {
14+
aspect-ratio: 9 / 16;
15+
}
16+
</style>
1217
</head>
1318

1419
<body>
@@ -41,8 +46,8 @@
4146
return '<img id="message-img" ' + (displayFull ? 'class="aspect-auto w-full h-full max-w-[100vw] max-h-[100vh]"' : '') + ' src="' + src + '" />';
4247
}
4348

44-
function generateAudioVideo(src, displayFull) {
45-
return '<media-player id="message-player" ' + (displayFull ? "class='aspect-auto w-[100vw] h-[100vh]'" : '') + ' src="' + src + '" autoplay>' +
49+
function generateAudioVideo(src, displayFull, mediaIsShort) {
50+
return '<media-player id="message-player" ' + (displayFull ? "class='h-[100vh] " + (mediaIsShort ? "is-short mx-auto" : "aspect-contain w-[100vw] ") + "'" : "class='aspect-contain " + (mediaIsShort ? "is-short" : "") + "'") + ' src="' + src + '" autoplay>' +
4651
'<media-provider></media-provider>' +
4752
'<media-audio-layout></media-audio-layout>' +
4853
'<media-video-layout></media-video-layout>' +
@@ -84,13 +89,14 @@
8489
if (data.mediaContentType.indexOf('image') === 0) {
8590
element.innerHTML = generateImg(data.media || data.url, data.displayFull);
8691
} else {
87-
element.innerHTML = generateAudioVideo(data.media || data.url, data.displayFull);
92+
element.innerHTML = generateAudioVideo(data.media || data.url, data.displayFull, data.mediaIsShort);
8893
}
8994
}
9095
}
9196

9297
var timeout;
9398
function displayMessage(message) {
99+
console.debug("New message !", message);
94100
if (timeout) {
95101
clearTimeout(timeout);
96102
}

‎src/components/messages/hidesendCommand.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,33 @@ export const hideSendCommand = () => ({
2929
const media = interaction.options.get(rosetty.t('hideSendCommandOptionMedia')!)?.attachment?.proxyURL;
3030
let mediaContentType = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.contentType;
3131
let mediaDuration = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.duration;
32+
let mediaIsShort = false;
3233

3334
let additionalContent;
3435
if ((!mediaContentType || !mediaDuration) && (media || url)) {
3536
additionalContent = await getContentInformationsFromUrl((media || url) as string);
3637
}
3738

38-
if (mediaContentType === null && additionalContent?.contentType) {
39+
if ((mediaContentType === undefined || mediaContentType === null) && additionalContent?.contentType) {
3940
mediaContentType = additionalContent.contentType;
4041
}
4142

42-
if (mediaDuration === null && additionalContent?.mediaDuration) {
43+
if (mediaContentType?.startsWith('video/')) {
44+
const height = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.height;
45+
const width = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.width;
46+
if (height && width) {
47+
mediaIsShort = height > width;
48+
}
49+
}
50+
51+
if ((mediaDuration === undefined || mediaDuration === null) && additionalContent?.mediaDuration) {
4352
mediaDuration = additionalContent.mediaDuration;
4453
}
4554

55+
if (additionalContent?.mediaIsShort) {
56+
mediaIsShort = additionalContent.mediaIsShort || false;
57+
}
58+
4659
await prisma.queue.create({
4760
data: {
4861
content: JSON.stringify({
@@ -55,6 +68,7 @@ export const hideSendCommand = () => ({
5568
interaction.guildId!,
5669
),
5770
displayFull: await getDisplayMediaFullFromGuildId(interaction.guildId!),
71+
mediaIsShort,
5872
}),
5973
type: QueueType.MESSAGE,
6074
discordGuildId: interaction.guildId!,

‎src/components/messages/sendCommand.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const sendCommand = () => ({
2727
const media = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.proxyURL;
2828
let mediaContentType = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.contentType;
2929
let mediaDuration = interaction.options.get(rosetty.t('sendCommandOptionMedia')!)?.attachment?.duration;
30+
let mediaIsShort = false;
3031

3132
let additionalContent;
3233
if ((!mediaContentType || !mediaDuration) && (media || url)) {
@@ -41,6 +42,10 @@ export const sendCommand = () => ({
4142
mediaDuration = additionalContent.mediaDuration;
4243
}
4344

45+
if (additionalContent?.mediaIsShort) {
46+
mediaIsShort = additionalContent.mediaIsShort || false;
47+
}
48+
4449
await prisma.queue.create({
4550
data: {
4651
content: JSON.stringify({
@@ -53,6 +58,7 @@ export const sendCommand = () => ({
5358
interaction.guildId!,
5459
),
5560
displayFull: await getDisplayMediaFullFromGuildId(interaction.guildId!),
61+
mediaIsShort,
5662
}),
5763
type: QueueType.MESSAGE,
5864
author: interaction.user.username,

‎src/services/content-utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function getFileTypeWithRegex(url) {
1414
export const getContentInformationsFromUrl = async (url: string) => {
1515
let contentType;
1616
let mediaDuration;
17-
17+
let mediaIsShort;
1818
// First try to get it with URL
1919
try {
2020
const fileExt = getFileTypeWithRegex(url);
@@ -51,8 +51,9 @@ export const getContentInformationsFromUrl = async (url: string) => {
5151
if (url.includes('youtube.com') || url.includes('youtu.be')) {
5252
const info = await ytdl.getInfo(url);
5353
mediaDuration = info.videoDetails.lengthSeconds;
54+
mediaIsShort = info.videoDetails.isCrawlable;
5455
contentType = 'video/mp4';
5556
}
5657

57-
return { contentType, mediaDuration };
58+
return { contentType, mediaDuration, mediaIsShort };
5859
};

0 commit comments

Comments
 (0)