Skip to content

Commit 3515036

Browse files
GauravdarkslayerGauravdarkslayer
authored
Merge branch 'main' into v0.2.1
2 parents da225a1 + 18b32ff commit 3515036

File tree

7 files changed

+51
-33
lines changed

7 files changed

+51
-33
lines changed

‎projects/ngx-stories/src/lib/interfaces/interfaces.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { Component, Type } from "@angular/core";
33
export type StoryType = 'image' | 'video' | 'component';
44
export type StoryStateType = 'playing' | 'paused' | 'holding' | 'buffering' ;
55
export interface Story {
6-
id: number,
6+
id?: string,
77
type: StoryType,
88
content: string | Type<Component>,
99
}
1010

1111
export interface StoryGroup {
12-
id: number, // unique id
12+
id?: string, // unique id
1313
name: string, // name of the storyGroup which is to be displayed over story
1414
stories: Story[] // array of stories
1515
}

‎projects/ngx-stories/src/lib/ngx-stories.component.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ describe('NgxStoriesComponent', () => {
2222
it('should accept storyGroups input and display stories', () => {
2323
const mockStoryGroups: StoryGroup[] = [
2424
{
25-
id: 1,
25+
id: '1',
2626
name: 'Gaurav',
2727
stories: [
28-
{ id: 1, type: 'image', content: 'https://example.com/story1.jpg' },
29-
{ id: 2, type: 'image', content: 'https://example.com/story2.jpg' },
28+
{ id: '1', type: 'image', content: 'https://example.com/story1.jpg' },
29+
{ id: '2', type: 'image', content: 'https://example.com/story2.jpg' },
3030
],
3131
},
3232
];

‎projects/ngx-stories/src/lib/ngx-stories.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class NgxStoriesComponent implements AfterViewInit {
8282
ngOnInit(): void {
8383
this.setStoryOptions();
8484
this.startStoryProgress();
85+
this.storyGroups = this.storyService.assignIdsIfMissing(this.storyGroups);
8586
}
8687

8788
ngOnDestroy(): void {

‎projects/ngx-stories/src/lib/ngx-stories.service.spec.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,20 @@ describe('NgxStoriesService', () => {
5050
describe('nextStory', () => {
5151
const storyGroups: StoryGroup[] = [
5252
{
53-
id: 1,
53+
id: '1',
5454
name: 'John Doe',
5555
stories: [
56-
{ id: 1, type: 'image', content: 'assets/story1.jpg' },
57-
{ id: 2, type: 'video', content: 'assets/story2.mp4' },
58-
{ id: 3, type: 'image', content: 'assets/story3.jpg' }
56+
{ id: '1', type: 'image', content: 'assets/story1.jpg' },
57+
{ id: '2', type: 'video', content: 'assets/story2.mp4' },
58+
{ id: '3', type: 'image', content: 'assets/story3.jpg' }
5959
]
6060
},
6161
{
62-
id: 2,
62+
id: '2',
6363
name: 'Jane Smith',
6464
stories: [
65-
{ id: 1, type: 'image', content: 'assets/story4.jpg' },
66-
{ id: 2, type: 'video', content: 'assets/story5.mp4' }
65+
{ id: '1', type: 'image', content: 'assets/story4.jpg' },
66+
{ id: '2', type: 'video', content: 'assets/story5.mp4' }
6767
]
6868
}
6969
];
@@ -86,20 +86,20 @@ describe('NgxStoriesService', () => {
8686
describe('prevStory', () => {
8787
const storyGroups: StoryGroup[] = [
8888
{
89-
id: 1,
89+
id: '1',
9090
name: 'John Doe',
9191
stories: [
92-
{ id: 1, type: 'image', content: 'assets/story1.jpg' },
93-
{ id: 2, type: 'video', content: 'assets/story2.mp4' },
94-
{ id: 3, type: 'image', content: 'assets/story3.jpg' }
92+
{ id: '1', type: 'image', content: 'assets/story1.jpg' },
93+
{ id: '2', type: 'video', content: 'assets/story2.mp4' },
94+
{ id: '3', type: 'image', content: 'assets/story3.jpg' }
9595
]
9696
},
9797
{
98-
id: 2,
98+
id: '2',
9999
name: 'Jane Smith',
100100
stories: [
101-
{ id: 1, type: 'image', content: 'assets/story4.jpg' },
102-
{ id: 2, type: 'video', content: 'assets/story5.mp4' }
101+
{ id: '1', type: 'image', content: 'assets/story4.jpg' },
102+
{ id: '2', type: 'video', content: 'assets/story5.mp4' }
103103
]
104104
}
105105
];

‎projects/ngx-stories/src/lib/ngx-stories.service.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ElementRef, Injectable, QueryList, Type, ViewContainerRef } from "@angular/core";
22
import { NgxStoriesOptions, StoryGroup } from "./interfaces/interfaces";
3+
import { generateUniqueId } from "./utils/id-generator";
34
@Injectable({
45
providedIn: 'root',
56
})
@@ -89,4 +90,17 @@ export class NgxStoriesService {
8990
const componentRef = containerRef.createComponent(component);
9091
return componentRef.instance;
9192
}
93+
94+
/**
95+
* Assigns unique ids to storyGroups and stories if they are missing.
96+
*/
97+
assignIdsIfMissing(storyGroups: StoryGroup[]): StoryGroup[] {
98+
for (const storyGroup of storyGroups) {
99+
storyGroup.id = storyGroup.id || generateUniqueId();
100+
for (const story of storyGroup.stories) {
101+
story.id = story.id || generateUniqueId();
102+
}
103+
}
104+
return storyGroups;
105+
}
92106
}

‎projects/ngx-stories/src/lib/utils/id-generator.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
let idCounter = 0;
2+
const idPrefix = 'story-';
3+
export function generateUniqueId(): string {
4+
return `${idPrefix}${++idCounter}`;
5+
}

‎src/app/app.component.ts‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,24 @@ export class AppComponent {
2121
};
2222
readonly storyGroups: StoryGroup[] = [
2323
{
24-
id: 1,
2524
name: 'Steve Smith',
2625
stories: [
27-
{ id: 1, type: 'image', content: 'https://i.ibb.co/ZMVy3KN/pexels-rpnickson-2486168.jpg' },
28-
{ id: 2, type: 'component', content: CustomComponentComponent },
29-
{ id: 3, type: 'video', content: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
30-
{ id: 4, type: 'video', content: 'https://www.w3schools.com/html/mov_bbb.mp4' },
31-
{ id: 5, type: 'video', content: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' },
32-
{ id: 6, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }
26+
{ type: 'image', content: 'https://i.ibb.co/ZMVy3KN/pexels-rpnickson-2486168.jpg' },
27+
{ type: 'component', content: CustomComponentComponent },
28+
{ type: 'video', content: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
29+
{ type: 'video', content: 'https://www.w3schools.com/html/mov_bbb.mp4' },
30+
{ type: 'video', content: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' },
31+
{ type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }
3332
]
3433
},
3534
{
36-
id: 2,
3735
name: 'John Doe',
3836
stories: [
39-
{ id: 1, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' },
40-
{ id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' },
41-
{ id: 3, type: 'video', content: 'https://videos.pexels.com/video-files/28759029/12469290_1920_1080_25fps.mp4' },
42-
{ id: 4, type: 'video', content: 'https://videos.pexels.com/video-files/28985119/12537126_1920_1080_24fps.mp4' },
43-
{ id: 5, type: 'video', content: 'https://videos.pexels.com/video-files/28496760/12399731_1440_2560_30fps.mp4' }
37+
{ type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' },
38+
{ type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' },
39+
{ type: 'video', content: 'https://videos.pexels.com/video-files/28759029/12469290_1920_1080_25fps.mp4' },
40+
{ type: 'video', content: 'https://videos.pexels.com/video-files/28985119/12537126_1920_1080_24fps.mp4' },
41+
{ type: 'video', content: 'https://videos.pexels.com/video-files/28496760/12399731_1440_2560_30fps.mp4' }
4442
]
4543
},
4644
];
@@ -54,7 +52,7 @@ export class AppComponent {
5452
}
5553

5654
triggerOnStoryGroupChange(storyGroup: number) {
57-
console.log('currentStoryGroupDetails',storyGroup);
55+
console.log('currentStoryGroupDetails', storyGroup);
5856
}
5957

6058
currentStoryDetails(eventData: object) {

0 commit comments

Comments
 (0)