Skip to content

Commit 2ea818e

Browse files
authored
Merge pull request #97 from raycharius/v2.6.0
✨ Add Video function and VideoBuilder to support the video b…
2 parents c95ac7f + eba0aad commit 2ea818e

30 files changed

+1151
-23
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,8 @@ Below is a list of supported objects and how to access them in **Block Builder**
141141
| Header | Block | :white_check_mark: | `Blocks.Header()`
142142
| Image | Block | :white_check_mark: | `Blocks.Image()`
143143
| Input | Block | :white_check_mark: | `Blocks.Input()`
144-
| Section | Block | :white_check_mark: | `Blocks.Section()`
144+
| Section | Block | :white_check_mark: | `Blocks.Section()`
145+
| Video | Block | :white_check_mark: | `Blocks.Video()`
145146
| Button | Element | :white_check_mark:️ | `Elements.Button()`
146147
| Checkboxes | Element | :white_check_mark: | `Elements.Checkboxes()`
147148
| Date Picker | Element | :white_check_mark: | `Elements.DatePicker()`

docs/_sidebar.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
* [Image](blocks/image.md "Block Builder – Image – Maintainable JavaScript Code for Slack Block Kit")
3333
* [Input](blocks/input.md "Block Builder – Input – Maintainable JavaScript Code for Slack Block Kit")
3434
* [Section](blocks/section.md "Block Builder – Section – Maintainable JavaScript Code for Slack Block Kit")
35+
* [Video](blocks/video.md "Block Builder – Video – Maintainable JavaScript Code for Slack Block Kit")
3536

3637

3738
* **Element References**

docs/bits/option.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ All setter methods return `this`, the instance of `OptionBuilder` on which it is
4242
OptionBuilder.description(string);
4343
```
4444
45-
Sets the descriptive text displayed below the text field of the option.
45+
Sets the descriptive text displayed below the text field of the option or for a video, if creating a Video block.
4646
```javascript
4747
OptionBuilder.text(string);
4848
```

docs/blocks/video.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# Video
2+
3+
?> **Note:** This document is a reference to the `VideoBuilder` object in **Block Builder**. For more information on how this carries over to the Slack API, view the [the Video docs](https://api.slack.com/reference/block-kit/blocks#video) on Slack's doc site.
4+
5+
### Creating an Instance
6+
7+
The function that creates a new instance of `VideoBuilder` is available as both a top-level import and as a member of its 'category', `Blocks`:
8+
9+
```javascript
10+
import { Video } from 'slack-block-builder';
11+
12+
const myObj = Video(params?);
13+
14+
```
15+
16+
```javascript
17+
import { Blocks } from 'slack-block-builder';
18+
19+
const myObj = Blocks.Video(params?);
20+
```
21+
22+
### Params
23+
24+
Each instance of the `VideoBuilder` object has chainable setter methods for the object's properties. However, properties with primitive values can optionally be passed to the instantiating function, should you prefer:
25+
26+
`blockId` – *String*
27+
28+
`description` – *String*
29+
30+
`providerIconUrl` – *String*
31+
32+
`providerName` – *String*
33+
34+
`thumbnailUrl` – *String*
35+
36+
`title` – *String*
37+
38+
`titleUrl` – *String*
39+
40+
`videoUrl` – *String*
41+
42+
43+
?> **Note:** For an explanation of any one of the parameters, see its corresponding setter method below.
44+
45+
### Setter Methods
46+
47+
All setter methods return `this`, the instance of `VideoBuilder` on which it is called.
48+
49+
```javascript
50+
VideoBuilder.altText(string);
51+
```
52+
53+
This a plain-text summary of the image element or block.
54+
```javascript
55+
VideoBuilder.authorName(string);
56+
```
57+
58+
This a plain-text representation of the author of a video.
59+
```javascript
60+
VideoBuilder.blockId(string);
61+
```
62+
63+
Sets a string to be an identifier for any given block in a view or message. This is sent back to your app in interaction payloads and view submissions for your app to process.
64+
```javascript
65+
VideoBuilder.description(string);
66+
```
67+
68+
Sets the descriptive text displayed below the text field of the option or for a video, if creating a Video block.
69+
```javascript
70+
VideoBuilder.providerIconUrl(string);
71+
```
72+
73+
Icon for the video provider - ex. YouTube or Vimeo icon.
74+
```javascript
75+
VideoBuilder.providerName(string);
76+
```
77+
78+
The originating application or domain of the video ex. YouTube or Vimeo.
79+
```javascript
80+
VideoBuilder.thumbnailUrl(string);
81+
```
82+
83+
A URL that loads the thumbnail image of the video.
84+
```javascript
85+
VideoBuilder.title(string);
86+
```
87+
88+
Sets the title displayed for the block, element, or confirmation dialog.
89+
```javascript
90+
VideoBuilder.titleUrl(string);
91+
```
92+
93+
A hyperlink for the video's title text.
94+
```javascript
95+
VideoBuilder.videoUrl(string);
96+
```
97+
98+
The URL of the video to embed in the Video block.
99+
100+
### Other Methods
101+
102+
The `VideoBuilder` object also has other methods available:
103+
104+
```javascript
105+
VideoBuilder.end();
106+
```
107+
108+
Performs no alterations to the object on which it is called. It is meant to simulate a closing HTML tag for those who prefer to have an explicit end declared for an object.

docs/support.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Below is a list of supported components and how to access them in **Block Builde
1919
| Image | Block | **Yes** | `Blocks.Image()` | [View Docs](/blocks/image.md)
2020
| Input | Block | **Yes** | `Blocks.Input()` | [View Docs](/blocks/input.md)
2121
| Section | Block | **Yes** | `Blocks.Section()` | [View Docs](/blocks/section.md)
22+
| Video | Video | **Yes** | `Blocks.Video()` | [View Docs](/blocks/video.md)
2223
| Button | Element | **Yes**️ | `Elements.Button()` | [View Docs](/elements/button.md)
2324
| Checkboxes | Element | **Yes** | `Elements.Checkboxes()` | [View Docs](/elements/checkboxes.md)
2425
| Date Picker | Element | **Yes** | `Elements.DatePicker()` | [View Docs](/elements/datepicker.md)
@@ -29,8 +30,8 @@ Below is a list of supported components and how to access them in **Block Builde
2930
| Time Picker | Element | **Yes** | `Elements.TimePicker()` | [View Docs](/elements/timepicker.md)
3031
| Select Menus | Element | **Yes** | `Elements.[Type]Select()` |
3132
| Multi-Select Menus | Element | **Yes** | `Elements.[Type]MultiSelect()` |
32-
| Attachment | Legacy Feature | **Yes** | `Bits.Attachment()` | [View Docs](/bits/attachment.md)
33-
| Confirmation Dialog | Composition Object | **Yes** | `Bits.ConfirmationDialog()` | [View Docs](/bits/confirmation-dialog.md)
33+
| Attachment | Legacy Feature | **Yes** | `Bits.Attachment()` | [View Docs](/bits/attachment.md)
34+
| Confirmation Dialog | Composition Object | **Yes** | `Bits.ConfirmationDialog()` | [View Docs](/bits/confirmation-dialog.md)
3435
| Option | Composition Object | **Yes** | `Bits.Option()` | [View Docs](/bits/option.md)
3536
| Option Group | Composition Object | **Yes** | `Bits.OptionGroup()` | [View Docs](/bits/option-group.md)
3637

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "slack-block-builder",
3-
"version": "2.5.0",
3+
"version": "2.6.0",
44
"description": "Maintainable code for interactive Slack messages, modals, home tabs, and workflow steps. A must-have for the Slack Block Kit framework.",
55
"author": {
66
"name": "Ray East",

src/blocks/divider.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface DividerBuilder extends BlockId,
2020
export class DividerBuilder extends BlockBuilderBase {
2121
/** @internal */
2222

23-
build(): Readonly<SlackBlockDto> {
23+
public build(): Readonly<SlackBlockDto> {
2424
return this.getResult(SlackBlockDto, {
2525
type: BlockType.Divider,
2626
});

src/blocks/index.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { HeaderBuilder, HeaderParams } from './header';
88
import { ImageBuilder, ImageParams } from './image';
99
import { InputBuilder, InputParams } from './input';
1010
import { SectionBuilder, SectionParams } from './section';
11+
import { VideoBuilder, VideoParams } from './video';
1112

1213
export type {
1314
ActionsBuilder,
@@ -26,6 +27,8 @@ export type {
2627
InputParams,
2728
SectionBuilder,
2829
SectionParams,
30+
VideoBuilder,
31+
VideoParams,
2932
};
3033

3134
/**
@@ -128,6 +131,24 @@ export function Section(params?: SectionParams): SectionBuilder {
128131
return new SectionBuilder(params);
129132
}
130133

134+
/**
135+
* @param {Object} [params] Parameters passed to the constructor.
136+
* @param {string} [params.blockId] Sets a string to be an identifier for the block, that will be available in interaction payloadsSets a string to be an identifier for any given block in a view or message. This is sent back to your app in interaction payloads and view submissions for your app to process.
137+
* @param {string} [params.description] Sets a description for the video.
138+
* @param {string} [params.providerIconUrl] Icon for the video provider - ex. YouTube or Vimeo icon.
139+
* @param {string} [params.providerName] The originating application or domain of the video ex. YouTube or Vimeo.
140+
* @param {string} [params.thumbnailUrl] A URL that loads the thumbnail image of the video.
141+
* @param {string} [params.title] Sets the title displayed for the block, element, or confirmation dialog.
142+
* @param {string} [params.titleUrl] A hyperlink for the video's title text.
143+
* @param {string} [params.videoUrl] The URL of the video to embed in the Video block.
144+
*
145+
* {@link https://api.slack.com/reference/block-kit/blocks#section|View in Slack API Documentation}
146+
*/
147+
148+
export function Video(params?: VideoParams): VideoBuilder {
149+
return new VideoBuilder(params);
150+
}
151+
131152
const blocks = {
132153
Actions,
133154
Context,
@@ -137,6 +158,7 @@ const blocks = {
137158
Image,
138159
Input,
139160
Section,
161+
Video,
140162
};
141163

142164
// Strange export. I know. For IDE highlighting purposes.

src/blocks/video.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { BlockBuilderBase } from '../internal/base';
2+
import { BlockType } from '../internal/constants';
3+
import { SlackBlockDto } from '../internal/dto';
4+
import { applyMixins, getPlainTextObject } from '../internal/helpers';
5+
import {
6+
AltText,
7+
AuthorName,
8+
BlockId,
9+
Description,
10+
End,
11+
ProviderIconUrl,
12+
ProviderName,
13+
ThumbnailUrl,
14+
Title,
15+
TitleUrl,
16+
VideoUrl,
17+
} from '../internal/methods';
18+
19+
export interface VideoParams {
20+
blockId?: string;
21+
description?: string;
22+
providerIconUrl?: string;
23+
providerName?: string;
24+
thumbnailUrl?: string;
25+
title?: string;
26+
titleUrl?: string;
27+
videoUrl?: string;
28+
}
29+
30+
export interface VideoBuilder extends AltText,
31+
AuthorName,
32+
BlockId,
33+
Description,
34+
End,
35+
ProviderIconUrl,
36+
ProviderName,
37+
ThumbnailUrl,
38+
Title,
39+
TitleUrl,
40+
VideoUrl {
41+
}
42+
43+
/**
44+
* @@link https://api.slack.com/reference/block-kit/blocks#video
45+
* @@displayName Video
46+
*/
47+
48+
export class VideoBuilder extends BlockBuilderBase {
49+
/** @internal */
50+
51+
build(): Readonly<SlackBlockDto> {
52+
return this.getResult(SlackBlockDto, {
53+
type: BlockType.Video,
54+
description: getPlainTextObject(this.props.description),
55+
title: getPlainTextObject(this.props.title),
56+
});
57+
}
58+
}
59+
60+
applyMixins(VideoBuilder, [
61+
AltText,
62+
AuthorName,
63+
BlockId,
64+
Description,
65+
End,
66+
ProviderIconUrl,
67+
ProviderName,
68+
ThumbnailUrl,
69+
Title,
70+
TitleUrl,
71+
VideoUrl,
72+
]);

src/components/accordion-ui-component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Blocks } from '../blocks';
22
import { Elements } from '../elements';
33
import { ComponentUIText } from '../internal/constants';
4+
import { Builder, AccordionStateManager, AccordionState } from '../internal/lib';
45

5-
import type { AccordionStateManager, AccordionState } from '../internal/lib';
66
import type {
77
BlockBuilderReturnableFn,
88
BlockBuilder,
@@ -54,7 +54,7 @@ export class AccordionUIComponent<T> {
5454
}
5555

5656
public getBlocks(): BlockBuilder[] {
57-
return this.items.map((item, index) => {
57+
const unpruned = this.items.map((item, index) => {
5858
const isExpanded = this.paginator.checkItemIsExpandedByIndex(index);
5959

6060
const blocks = [
@@ -65,10 +65,12 @@ export class AccordionUIComponent<T> {
6565
expandedItems: this.paginator.getNextStateByItemIndex(index),
6666
}),
6767
})),
68-
...isExpanded ? this.builderFunction({ item }) : [],
68+
...isExpanded ? this.builderFunction({ item }).flat() : [],
6969
];
7070

7171
return index === 0 ? blocks : [Blocks.Divider(), ...blocks];
7272
}).flat();
73+
74+
return Builder.pruneUndefinedFromArray(unpruned);
7375
}
7476
}

0 commit comments

Comments
 (0)