Skip to content

Commit c90dde0

Browse files
DarkGuy10favna
DarkGuy10
and
favna
authored
feat: add discord-tenor-video component (#127)
Co-authored-by: Jeroen Claassens <support@favware.tech>
1 parent 36e876c commit c90dde0

File tree

6 files changed

+170
-60
lines changed

6 files changed

+170
-60
lines changed

‎packages/core/src/components.d.ts

+37
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,20 @@ export namespace Components {
348348
*/
349349
"type": 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'alert' | 'error';
350350
}
351+
interface DiscordTenorVideo {
352+
/**
353+
* The height of the video in pixels
354+
*/
355+
"height": number;
356+
/**
357+
* The URL for the video
358+
*/
359+
"url": string;
360+
/**
361+
* The width of the video in pixels
362+
*/
363+
"width": number;
364+
}
351365
}
352366
declare global {
353367
interface HTMLDiscordActionRowElement extends Components.DiscordActionRow, HTMLStencilElement {
@@ -446,6 +460,12 @@ declare global {
446460
prototype: HTMLDiscordSystemMessageElement;
447461
new (): HTMLDiscordSystemMessageElement;
448462
};
463+
interface HTMLDiscordTenorVideoElement extends Components.DiscordTenorVideo, HTMLStencilElement {
464+
}
465+
var HTMLDiscordTenorVideoElement: {
466+
prototype: HTMLDiscordTenorVideoElement;
467+
new (): HTMLDiscordTenorVideoElement;
468+
};
449469
interface HTMLElementTagNameMap {
450470
"discord-action-row": HTMLDiscordActionRowElement;
451471
"discord-attachment": HTMLDiscordAttachmentElement;
@@ -463,6 +483,7 @@ declare global {
463483
"discord-reactions": HTMLDiscordReactionsElement;
464484
"discord-reply": HTMLDiscordReplyElement;
465485
"discord-system-message": HTMLDiscordSystemMessageElement;
486+
"discord-tenor-video": HTMLDiscordTenorVideoElement;
466487
}
467488
}
468489
declare namespace LocalJSX {
@@ -807,6 +828,20 @@ declare namespace LocalJSX {
807828
*/
808829
"type"?: 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'alert' | 'error';
809830
}
831+
interface DiscordTenorVideo {
832+
/**
833+
* The height of the video in pixels
834+
*/
835+
"height"?: number;
836+
/**
837+
* The URL for the video
838+
*/
839+
"url"?: string;
840+
/**
841+
* The width of the video in pixels
842+
*/
843+
"width"?: number;
844+
}
810845
interface IntrinsicElements {
811846
"discord-action-row": DiscordActionRow;
812847
"discord-attachment": DiscordAttachment;
@@ -824,6 +859,7 @@ declare namespace LocalJSX {
824859
"discord-reactions": DiscordReactions;
825860
"discord-reply": DiscordReply;
826861
"discord-system-message": DiscordSystemMessage;
862+
"discord-tenor-video": DiscordTenorVideo;
827863
}
828864
}
829865
export { LocalJSX as JSX };
@@ -846,6 +882,7 @@ declare module "@stencil/core" {
846882
"discord-reactions": LocalJSX.DiscordReactions & JSXBase.HTMLAttributes<HTMLDiscordReactionsElement>;
847883
"discord-reply": LocalJSX.DiscordReply & JSXBase.HTMLAttributes<HTMLDiscordReplyElement>;
848884
"discord-system-message": LocalJSX.DiscordSystemMessage & JSXBase.HTMLAttributes<HTMLDiscordSystemMessageElement>;
885+
"discord-tenor-video": LocalJSX.DiscordTenorVideo & JSXBase.HTMLAttributes<HTMLDiscordTenorVideoElement>;
849886
}
850887
}
851888
}

‎packages/core/src/components/discord-tenor-video/discord-tenor-video.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.discord-tenor-video {
2+
color: #dcddde;
3+
display: flex;
4+
font-size: 13px;
5+
line-height: 150%;
6+
margin-bottom: 8px;
7+
margin-top: 8px;
8+
}
9+
10+
.discord-tenor-video .discord-tenor-video-wrapper {
11+
display: block;
12+
position: relative;
13+
-webkit-user-select: text;
14+
-moz-user-select: text;
15+
-ms-user-select: text;
16+
user-select: text;
17+
overflow: hidden;
18+
border-radius: 4px;
19+
}
20+
21+
.discord-tenor-video .discord-tenor-video-wrapper video {
22+
-webkit-box-align: center;
23+
-webkit-box-pack: center;
24+
align-items: center;
25+
border-radius: 0;
26+
cursor: pointer;
27+
display: flex;
28+
height: 100%;
29+
justify-content: center;
30+
max-height: 100%;
31+
width: 100%;
32+
left: 0px;
33+
top: 0px;
34+
}

‎packages/core/src/components/discord-tenor-video/discord-tenor-video.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'discord-tenor-video',
5+
styleUrl: 'discord-tenor-video.css'
6+
})
7+
export class DiscordTenorVideo implements ComponentInterface {
8+
/**
9+
* The DiscordTenorVideo element.
10+
*/
11+
@Element()
12+
public el: HTMLElement;
13+
14+
/**
15+
* The URL for the video
16+
*/
17+
@Prop()
18+
public url: string;
19+
20+
/**
21+
* The height of the video in pixels
22+
*/
23+
@Prop()
24+
public height: number;
25+
26+
/**
27+
* The width of the video in pixels
28+
*/
29+
@Prop()
30+
public width: number;
31+
32+
public render() {
33+
return (
34+
<Host class="discord-tenor-video">
35+
<div class="discord-tenor-video-wrapper" style={{ height: `${this.height}px`, width: `${this.width}px` }}>
36+
<video muted preload="auto" autoplay loop src={this.url} height={this.height} width={this.width}></video>
37+
</div>
38+
</Host>
39+
);
40+
}
41+
}

‎packages/core/src/components/discord-tenor-video/readme.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# discord-attachment
2+
3+
<!-- Auto Generated Below -->
4+
5+
## Properties
6+
7+
| Property | Attribute | Description | Type | Default |
8+
| -------- | --------- | --------------------------------- | -------- | ----------- |
9+
| `height` | `height` | The height of the video in pixels | `number` | `undefined` |
10+
| `url` | `url` | The URL for the video | `string` | `undefined` |
11+
| `width` | `width` | The width of the video in pixels | `number` | `undefined` |
12+
13+
---
14+
15+
_Built with [StencilJS](https://stenciljs.com/)_

‎packages/core/src/index.html

+42-60
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,39 @@ <h3 class="title">Mentions</h3>
129129
<discord-mention highlight>Maximillian Osborn</discord-mention>, thanks! I will!
130130
</discord-message>
131131
</discord-messages>
132+
<h3 class="title">Server Invites</h3>
133+
<discord-messages>
134+
<discord-message profile="favna">
135+
discord.gg/djs <br />
136+
discord.gg/code <br />
137+
discord.gg/6gakFR2
138+
<discord-attachments slot="attachments">
139+
<discord-invite
140+
name="discord.js - Imagine a bot"
141+
icon="/static/discordjs.png"
142+
url="https://discord.gg/djs"
143+
online="16417"
144+
members="87147"
145+
verified="true"
146+
></discord-invite>
147+
<discord-invite
148+
name="The Coding Den"
149+
icon="/static/tcd.png"
150+
url="https://discord.gg/code"
151+
online="18456"
152+
members="73548"
153+
partnered="true"
154+
></discord-invite>
155+
<discord-invite
156+
name="Skyra Lounge"
157+
url="https://join.skyra.pw"
158+
icon="/static/skyralounge.gif"
159+
online="176"
160+
members="738"
161+
></discord-invite>
162+
</discord-attachments>
163+
</discord-message>
164+
</discord-messages>
132165
<h3 class="title">Image Attachments with small images</h3>
133166
<discord-messages>
134167
<discord-message profile="Alyx Vargas">
@@ -170,33 +203,6 @@ <h3 class="title">System Messages</h3>
170203
<discord-system-message type="missed-call"> You missed a call from <i>Favna</i> that lasted a minute. </discord-system-message>
171204
<discord-system-message type="leave"> <i>Favna</i> left the group. </discord-system-message>
172205
</discord-messages>
173-
<h3 class="title">Server Invites</h3>
174-
<discord-messages>
175-
<discord-message profile="favna">
176-
discord.gg/djs <br />
177-
discord.gg/code <br />
178-
discord.gg/6gakFR2
179-
<discord-attachments slot="attachments">
180-
<discord-invite
181-
name="discord.js - Imagine a bot"
182-
icon="/static/discordjs.png"
183-
url="https://discord.gg/djs"
184-
online="16417"
185-
members="87147"
186-
verified="true"
187-
></discord-invite>
188-
<discord-invite
189-
name="The Coding Den"
190-
icon="/static/tcd.png"
191-
url="https://discord.gg/code"
192-
online="18456"
193-
members="73548"
194-
partnered="true"
195-
></discord-invite>
196-
<discord-invite name="Skyra Lounge" url="https://join.skyra.pw" online="176" members="738"></discord-invite>
197-
</discord-attachments>
198-
</discord-message>
199-
</discord-messages>
200206
<h3 class="title">Reactions</h3>
201207
<discord-messages>
202208
<discord-message profile="favna">
@@ -396,6 +402,15 @@ <h3 class="title">Embed fields</h3>
396402
</discord-embed>
397403
</discord-message>
398404
</discord-messages>
405+
<h3 class="title">A tenor-gif in video format</h3>
406+
<discord-messages>
407+
<discord-message profile="maximillian">
408+
<discord-tenor-video
409+
slot="attachments"
410+
url="https://c.tenor.com/oTeBa4EVepMAAAPo/business-cat-working.mp4"
411+
/>
412+
</discord-message>
413+
</discord-messages>
399414
<h3 class="title">Inline fields</h3>
400415
<discord-messages>
401416
<discord-message profile="skyra">
@@ -420,39 +435,6 @@ <h3 class="title">Inline fields with a thumbnail</h3>
420435
</discord-embed>
421436
</discord-message>
422437
</discord-messages>
423-
<h3 class="title">Attachments and invites</h3>
424-
<discord-messages>
425-
<discord-message profile="favna">
426-
discord.gg/djs <br />
427-
discord.gg/code <br />
428-
discord.gg/6gakFR2
429-
<discord-attachments slot="attachments">
430-
<discord-invite
431-
name="discord.js - Imagine a bot"
432-
icon="/static/discordjs.png"
433-
url="https://discord.gg/djs"
434-
online="16417"
435-
members="87147"
436-
verified="true"
437-
></discord-invite>
438-
<discord-invite
439-
name="The Coding Den"
440-
icon="/static/tcd.png"
441-
url="https://discord.gg/code"
442-
online="18456"
443-
members="73548"
444-
partnered="true"
445-
></discord-invite>
446-
<discord-invite
447-
name="Skyra Lounge"
448-
url="https://join.skyra.pw"
449-
icon="/static/skyralounge.gif"
450-
online="176"
451-
members="738"
452-
></discord-invite>
453-
</discord-attachments>
454-
</discord-message>
455-
</discord-messages>
456438
</main>
457439
</div>
458440
</body>

‎packages/react/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ export const DiscordReply = /*@__PURE__*/ createReactComponent<JSX.DiscordReply,
2626
export const DiscordSystemMessage = /*@__PURE__*/ createReactComponent<JSX.DiscordSystemMessage, HTMLDiscordSystemMessageElement>(
2727
'discord-system-message'
2828
);
29+
export const DiscordTenorVideo = /*@__PURE__*/ createReactComponent<JSX.DiscordTenorVideo, HTMLDiscordTenorVideoElement>('discord-tenor-video');

0 commit comments

Comments
 (0)