From e3e70cb686dfa57186f4a2f957e176167b60571a Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Sat, 5 Oct 2024 00:01:19 +0530
Subject: [PATCH 1/6] comments added

---
 src/app/app.component.html |  7 ++++--
 src/app/app.component.ts   | 49 ++++++++++++++++++++++----------------
 src/app/app.routes.ts      |  2 ++
 src/index.html             | 28 ++++++++++++----------
 src/main.ts                |  2 ++
 5 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index cf8ac86..815a784 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,9 @@
-<h1>Ngx-Stories Demo</h1>
-
+<h1>Ngx-Stories Demo</h1> 
 
+<!-- 
+  The ngx-stories component displays a series of stories 
+  based on the storyGroups array provided from the AppComponent.
+-->
 <ngx-stories
 [storyGroups]="storyGroups" 
 (triggerOnEnd)="triggerOnEnd()"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e1e5cfc..471c787 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,41 +1,50 @@
+// Import necessary modules from Angular and NgxStories library
 import { Component } from '@angular/core';
 import { NgxStoriesComponent, StoryGroup } from '../../projects/ngx-stories/src/public-api';
 
+// Define the AppComponent with metadata like selector, template, and style URL
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [NgxStoriesComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  selector: 'app-root', // The component's HTML tag
+  standalone: true,     // Indicates this component does not require being declared in a module
+  imports: [NgxStoriesComponent],  // Importing the NgxStoriesComponent
+  templateUrl: './app.component.html',  // External HTML template for the component
+  styleUrl: './app.component.css',      // External CSS for styling the component
 })
+
+// Export the AppComponent class, the main component of the application
 export class AppComponent {
+
+  // Defining an array of story groups, each containing a group of stories for users
+  // StoryGroup[] is a list where each story group contains an id, name, and an array of stories
   readonly storyGroups: StoryGroup[] = [
     {
-      id: 1,
-      name: 'Steve Smith',
-      stories: [
-        { id: 1, type: 'image', content: 'https://i.ibb.co/ZMVy3KN/pexels-rpnickson-2486168.jpg' },
-        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/2.jpg' },
-        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }
+      id: 1,         // Unique identifier for the first story group
+      name: 'Steve Smith',  // Name of the person or group
+      stories: [     // Array of stories belonging to this group
+        { id: 1, type: 'image', content: 'https://i.ibb.co/ZMVy3KN/pexels-rpnickson-2486168.jpg' }, // Story 1
+        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/2.jpg' }, //Story 2
+        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }  //Story 3
       ]
     },
     {
-      id: 2,
-      name: 'John Doe',
-      stories: [
-        { id: 1, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' },
-        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' },
-        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/6.jpg' },
-        { id: 4, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/7.jpg' }
+      id: 2,         // Unique identifier for the second story group
+      name: 'John Doe',  // Name of the second group
+      stories: [     // Array of stories belonging to this group
+        { id: 1, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' }, //Story 1
+        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' }, //Story 2
+        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/6.jpg' }, //Story 3
+        { id: 4, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/7.jpg' }  //Story 4
       ]
     },
   ];
 
+  // Function to trigger an alert when the user reaches the end of the stories
   triggerOnEnd() {
-    alert('End');
+    alert('End');  // Displays an alert with the message "End"
   }
 
+  // Function to trigger an alert when the user exits the stories
   triggerOnExit() {
-    alert('Exit');
+    alert('Exit');  // Displays an alert with the message "Exit"
   }
 }
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..62d29bb 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,5 @@
 import { Routes } from '@angular/router';
 
+// Exporting an empty array of routes
+// This array is meant to hold route configurations for the application.
 export const routes: Routes = [];
diff --git a/src/index.html b/src/index.html
index 4cbfa1d..5307c51 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,25 +12,27 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <!-- Google Tag Manager -->
+   <!-- Here we are initialising the Google tag manager -->
+<!-- It enable to trcking and analytics on the website  -->
   <script>(function (w, d, s, l, i) {
-      w[l] = w[l] || []; w[l].push({
-        'gtm.start':
-          new Date().getTime(), event: 'gtm.js'
+      w[l] = w[l] || []; w[l].push({    //pushing the data to the dataLayer
+        'gtm.start':          
+          new Date().getTime(), event: 'gtm.js' //for the  first script element in the document
       }); var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-KDD8ZZFP');
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =  //creating the script element
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); //If the ddatalayer is not equal to dataLayer then it will append the dataLayer to the script element i.e URL
+    })(window, document, 'script', 'dataLayer', 'GTM-KDD8ZZFP'); //passing the window,document,script,dataLayer and the id of the GTM
   </script>
   <!-- End Google Tag Manager -->
 
   <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-N2X4LE7WXQ"></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-N2X4LE7WXQ"></script> //for loading the gtag.js script
   <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+    window.dataLayer = window.dataLayer || [];   //creating the dataLayer
+    function gtag() { dataLayer.push(arguments); }  //pushing the data to the dataLayer
+    gtag('js', new Date());    //for the  first script element in the document
 
-    gtag('config', 'G-N2X4LE7WXQ');
+    gtag('config', 'G-N2X4LE7WXQ');   //passing the id of the GTM
   </script>
 </head>
 
@@ -38,8 +40,8 @@
   <app-root></app-root>
 
   <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDD8ZZFP" height="0" width="0"
-      style="display:none;visibility:hidden"></iframe></noscript>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDD8ZZFP" height="0" width="0"  
+      style="display:none;visibility:hidden"></iframe></noscript>  //If the script is not supported by the browser then it will display the message
   <!-- End Google Tag Manager (noscript) -->
 
 </body>
diff --git a/src/main.ts b/src/main.ts
index 35b00f3..30b2a4d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
+// Bootstrapping (initializing) the Angular application with the root component (AppComponent) 
+// and the configuration settings (appConfig).
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

From 47967048ae7f346f61ec2e003badcc3354d49eda Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Sat, 5 Oct 2024 00:26:47 +0530
Subject: [PATCH 2/6] conflicts solved

---
 src/app/app.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 479a6fb..1754a83 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,8 +22,9 @@ export class AppComponent {
       name: 'Steve Smith',
       stories: [
         { id: 1, type: 'image', content: 'https://i.ibb.co/ZMVy3KN/pexels-rpnickson-2486168.jpg' },
-        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/2.jpg' },
-        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }
+        { id: 2, type: 'video', content: 'https://videos.pexels.com/video-files/3468587/3468587-uhd_1440_2560_30fps.mp4' },
+        { id: 3, type: 'video', content: 'https://www.w3schools.com/html/mov_bbb.mp4' },
+        { id: 4, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/3.jpg' }
       ]
     },
     {

From 60bba7c585475653b4f132850ee649b676b02c6a Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Sat, 5 Oct 2024 14:56:07 +0530
Subject: [PATCH 3/6] done changes as instucted

---
 .../src/lib/interfaces/interfaces.ts          | 10 ++--
 .../src/lib/ngx-stories.component.html        |  2 +
 .../src/lib/ngx-stories.component.spec.ts     |  5 +-
 .../src/lib/ngx-stories.component.ts          | 49 ++++++++++---------
 .../src/lib/ngx-stories.service.spec.ts       | 37 ++++++++------
 .../src/lib/ngx-stories.service.ts            | 16 ++----
 src/app/app.component.html                    |  5 +-
 src/app/app.component.ts                      | 32 ++++++------
 src/index.html                                | 26 +++++-----
 src/main.ts                                   |  2 -
 10 files changed, 89 insertions(+), 95 deletions(-)

diff --git a/projects/ngx-stories/src/lib/interfaces/interfaces.ts b/projects/ngx-stories/src/lib/interfaces/interfaces.ts
index 37e3cc3..e68047f 100644
--- a/projects/ngx-stories/src/lib/interfaces/interfaces.ts
+++ b/projects/ngx-stories/src/lib/interfaces/interfaces.ts
@@ -4,13 +4,13 @@ export interface Story {
     type: StoryType,
     content: string,
 }
-
+// StoryGroup interface
 export interface StoryGroup {
-    id: number, // unique id
-    name: string, // name of the storyGroup which is to be displayed over story
-    stories: Story[] // array of stories
+    id: number,
+    name: string, 
+    stories: Story[] 
 }
-
+// NgxStoriesOptions interface
 export interface NgxStoriesOptions {
     width: number,
     height: number,
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.html b/projects/ngx-stories/src/lib/ngx-stories.component.html
index 9a3934d..73f772d 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.html
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.html
@@ -9,6 +9,7 @@
       <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
         {{storyGroup.name}}
       </h5>
+      // <!-- Story content -->
       <button (click)="togglePause()">
         <img [ngClass]="{ 'pause-icon': storyState==='paused', 'play-icon': storyState==='playing' }"
           [alt]="storyState==='paused' ? 'play-icon' : 'pause-icon'" width="20" height="20">
@@ -24,6 +25,7 @@ <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
   </div>
   }
 
+  
   <div class="progress-bar-container" [style.visibility]="isHolding ? 'hidden' : 'visible'">
     @for(story of storyGroup.stories; track story.id; let x = $index ) {
     <progress class="progress-bar" [value]="getProgressValue(x)" max="100" [class.active]="x===currentStoryIndex">
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts b/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
index bd1c65b..95ecad3 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { NgxStoriesComponent } from './ngx-stories.component';
 import { StoryGroup } from './interfaces/interfaces';
 
+// Test suite for the NgxStoriesComponent
 describe('NgxStoriesComponent', () => {
   let component: NgxStoriesComponent;
   let fixture: ComponentFixture<NgxStoriesComponent>;
@@ -16,7 +17,7 @@ describe('NgxStoriesComponent', () => {
   });
 
   it('should create the component', () => {
-    expect(component).toBeTruthy(); // This checks if the component is created successfully
+    expect(component).toBeTruthy(); 
   });
 
   it('should start progress interval for an image story', () => {
@@ -34,7 +35,7 @@ describe('NgxStoriesComponent', () => {
     spyOn(component, 'startProgressInterval');
     component.startStoryProgress();
 
-    expect(component.startProgressInterval).toHaveBeenCalledWith(5000);  // default duration
+    expect(component.startProgressInterval).toHaveBeenCalledWith(5000);  
   });
   
   it('should accept storyGroups input and display stories', () => {
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.ts b/projects/ngx-stories/src/lib/ngx-stories.component.ts
index 8270a29..cb1df53 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.ts
@@ -20,8 +20,7 @@ export class NgxStoriesComponent implements AfterViewInit {
 
   // Input property to accept the list of storyGroup and their stories
   @Input({ required: true }) storyGroups: StoryGroup[] = [];
-
-  // options
+  // Input property to accept the options for the stories component
   @Input() options: NgxStoriesOptions = {
     width: 360,
     height: 768,
@@ -35,20 +34,19 @@ export class NgxStoriesComponent implements AfterViewInit {
   currentStoryIndex: number = 0;
   currentStoryGroupIndex: number = 0;
   progressWidth: number = 0;
-  intervalId: any; // Interval for story progress
-  isTransitioning = false; // Prevents multiple transitions at once
+  intervalId: any;
+  isTransitioning = false; 
   isSwipingLeft = false;
   isSwipingRight = false;
   isHolding = false;
-  holdTimeout: any; // Timeout for holding the story (pause functionality)
+  holdTimeout: any; 
   storyState: 'playing' | 'paused' | 'holding' = 'playing';
 
-  // constants
+  
   readonly HOLD_DELAY_MS = 500;
   readonly PROGRESS_INTERVAL_MS = 50;
   readonly FULL_PROGRESS_WIDTH = 100;
 
-  // Queries the story containers in the view for gesture handling
   @ViewChildren('storyContainer') storyContainers!: QueryList<ElementRef>;
 
   constructor(
@@ -66,20 +64,18 @@ export class NgxStoriesComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     this.initHammer();
   }
-
-  private startStoryProgress() {
+// Function to start the progress bar for the current story
+  private startStoryProgress() { 
     const currentStory = this.storyGroups[this.currentStoryGroupIndex].stories[this.currentStoryIndex];
-    let storyDuration = 5000; // Default duration (in milliseconds) for images
+    let storyDuration = 5000;
     if (currentStory.type === 'video') {
       const videoElement = document.createElement('video');
       videoElement.src = currentStory.content;
-      // Use the video duration or a default if not available
       videoElement.onloadedmetadata = () => {
-        storyDuration = videoElement.duration * 1000; // Convert to milliseconds
+        storyDuration = videoElement.duration * 1000;
         this.startProgressInterval(storyDuration);
       };
     } else {
-      // For images, start with default duration
       this.startProgressInterval(storyDuration);
     }
   }
@@ -121,13 +117,13 @@ export class NgxStoriesComponent implements AfterViewInit {
         }
         this.goToNextStoryGroup();
         this.resetSwipe();
-      }, 600); // Match the animation duration
+      }, 600); 
     } else if (direction === 'right') {
       this.isSwipingRight = true;
       setTimeout(() => {
         this.goToPreviousStoryGroup();
         this.resetSwipe();
-      }, 600); // Match the animation duration
+      }, 600); 
     } else if (direction === 'down') {
       clearInterval(this.intervalId);
       this.onExit();
@@ -140,13 +136,14 @@ export class NgxStoriesComponent implements AfterViewInit {
     this.isSwipingLeft = false;
     this.isSwipingRight = false;
   }
-
+// Function to navigate to the next or previous story
   navigateStory(direction: 'next' | 'previous') {
     if (this.isTransitioning) return;
-    this.pauseCurrentVideo(true);  // Pause the video before navigating
+    this.pauseCurrentVideo(true); 
     this.setTransitionState(true);
     clearInterval(this.intervalId);
 
+    // Get the next story index and story group index
     const { storyGroupIndex, storyIndex } =
       direction === 'next'
         ? this.storyService.nextStory(this.storyGroups, this.currentStoryGroupIndex, this.currentStoryIndex, this.storyGroupChange.bind(this))
@@ -199,7 +196,8 @@ export class NgxStoriesComponent implements AfterViewInit {
     }
   }
 
-  private goToNextStoryGroup() {
+  // Function to navigate to the next story group
+  private goToNextStoryGroup() { 
     if (this.isTransitioning) return;
     this.isTransitioning = true;
     this.currentStoryGroupIndex = (this.currentStoryGroupIndex + 1) % this.storyGroups.length;
@@ -211,9 +209,10 @@ export class NgxStoriesComponent implements AfterViewInit {
     setTimeout(() => {
       this.startStoryProgress();
       this.isTransitioning = false;
-    }, this.HOLD_DELAY_MS); // Match this timeout with the CSS transition duration
+    }, this.HOLD_DELAY_MS);
   }
 
+  // Function to navigate to the previous story group
   private goToPreviousStoryGroup() {
     if (this.isTransitioning) return;
     this.isTransitioning = true;
@@ -227,16 +226,18 @@ export class NgxStoriesComponent implements AfterViewInit {
     setTimeout(() => {
       this.startStoryProgress();
       this.isTransitioning = false;
-    }, this.HOLD_DELAY_MS); // Match this timeout with the CSS transition duration
+    }, this.HOLD_DELAY_MS);
   }
 
+  // Function to set the transition state
   private setTransitionState(isTransitioning: boolean, duration = this.HOLD_DELAY_MS): void {
     this.isTransitioning = isTransitioning;
     setTimeout(() => {
       this.isTransitioning = false;
-    }, duration); // Ensure consistent transition timing
+    }, duration); 
   }
 
+  // Function to check if the user has reached the end of the stories
   private hasReachedEndOfStories(): boolean {
     let stories = this.storyGroups.find((storyGroup, index) => index === this.currentStoryGroupIndex)?.stories;
     if (this.currentStoryIndex === Number(stories?.length) - 1 && this.currentStoryGroupIndex === this.storyGroups.length - 1) {
@@ -246,6 +247,7 @@ export class NgxStoriesComponent implements AfterViewInit {
     return false;
   }
 
+  // Function to get the progress value for the current story
   getProgressValue(storyIndex: number): number {
     if (this.isHolding) return this.progressWidth;
     if (storyIndex < this.currentStoryIndex) {
@@ -276,7 +278,7 @@ export class NgxStoriesComponent implements AfterViewInit {
       this.isHolding = false;
       this.storyState = 'playing';
       this.startStoryProgress();
-      this.playCurrentStoryVideo();  // Resume the video when released
+      this.playCurrentStoryVideo(); 
     }
   }
 
@@ -291,7 +293,7 @@ export class NgxStoriesComponent implements AfterViewInit {
       this.pauseCurrentVideo();
     } else {
       this.startStoryProgress();
-      this.playCurrentStoryVideo();  // Resume the video when released
+      this.playCurrentStoryVideo();  
     }
   }
 
@@ -300,7 +302,6 @@ export class NgxStoriesComponent implements AfterViewInit {
   }
 
   private onExit() {
-    // Swipe down event or cross button implementation in future
     this.triggerOnExit.emit();
   }
 
diff --git a/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts b/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
index a85936d..fe8e950 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-
 import { NgxStoriesService } from './ngx-stories.service';
 import { StoryGroup } from './interfaces/interfaces';
 
@@ -17,6 +16,7 @@ describe('NgxStoriesService', () => {
     expect(service).toBeTruthy();
   });
 
+  // Testing the startProgress function
   describe('startProgress', () => {
     it('should call callback at the given interval', (done) => {
       const callback = jasmine.createSpy('callback');
@@ -24,14 +24,16 @@ describe('NgxStoriesService', () => {
 
       const intervalId = service.startProgress(interval, callback);
 
+      // Wait for the interval time + some buffer and check if the callback was called
       setTimeout(() => {
         expect(callback).toHaveBeenCalledTimes(1);
-        service.clearProgress(intervalId); // Clean up
+        service.clearProgress(intervalId);
         done();
       }, interval + 50);
     });
   });
 
+  // Testing the clearProgress function
   describe('clearProgress', () => {
     it('should clear the interval', (done) => {
       const callback = jasmine.createSpy('callback');
@@ -40,6 +42,7 @@ describe('NgxStoriesService', () => {
       const intervalId = service.startProgress(interval, callback);
       service.clearProgress(intervalId);
 
+      // Ensure that the callback is not called after clearing the interval
       setTimeout(() => {
         expect(callback).not.toHaveBeenCalled();
         done();
@@ -47,6 +50,7 @@ describe('NgxStoriesService', () => {
     });
   });
 
+  // Testing the nextStory function
   describe('nextStory', () => {
     const storyGroups: StoryGroup[] = [
       {
@@ -68,21 +72,22 @@ describe('NgxStoriesService', () => {
       }
     ];
 
+    // Test to ensure the service moves to the next story within the same storyGroup
     it('should move to the next story within the same storyGroup', () => {
-      const result = service.nextStory(storyGroups, 0, 0, onStoryGroupChangeMock); // Start at storyGroup 0, story 0
+      const result = service.nextStory(storyGroups, 0, 0, onStoryGroupChangeMock);
       expect(result.storyGroupIndex).toBe(0);
       expect(result.storyIndex).toBe(1);
     });
 
+    // Test to ensure the service moves to the next storyGroup when the last story is reached
     it('should move to the next storyGroup if current story is the last one', () => {
-      const result = service.nextStory(storyGroups, 0, 2, onStoryGroupChangeMock); // Start at storyGroup 0, story 2 (last story)
-      expect(result.storyGroupIndex).toBe(1); // Moved to next storyGroup
-      expect(result.storyIndex).toBe(0); // First story of the next storyGroup
+      const result = service.nextStory(storyGroups, 0, 2, onStoryGroupChangeMock); 
+      expect(result.storyGroupIndex).toBe(1); 
+      expect(result.storyIndex).toBe(0); 
     });
-
   });
 
-
+  // Testing the prevStory function
   describe('prevStory', () => {
     const storyGroups: StoryGroup[] = [
       {
@@ -104,23 +109,27 @@ describe('NgxStoriesService', () => {
       }
     ];
 
+    // Test to ensure the service moves to the previous story within the same storyGroup
     it('should move to the previous story within the same storyGroup', () => {
-      const result = service.prevStory(storyGroups, 0, 2, onStoryGroupChangeMock); // Start at storyGroup 0, story 2
+      const result = service.prevStory(storyGroups, 0, 2, onStoryGroupChangeMock);
       expect(result.storyGroupIndex).toBe(0);
       expect(result.storyIndex).toBe(1);
     });
 
+    // Test to ensure the service moves to the previous storyGroup when the first story is reached
     it('should move to the previous storyGroup if current story is the first one', () => {
-      const result = service.prevStory(storyGroups, 1, 0, onStoryGroupChangeMock); // Start at storyGroup 1, story 0
-      expect(result.storyGroupIndex).toBe(0); // Moved to previous storyGroup
-      expect(result.storyIndex).toBe(2); // Last story of the previous storyGroup
+      const result = service.prevStory(storyGroups, 1, 0, onStoryGroupChangeMock);
+      expect(result.storyGroupIndex).toBe(0); 
+      expect(result.storyIndex).toBe(2); 
     });
 
+    // Test to ensure that no change occurs if already on the first story of the first storyGroup
     it('should do nothing if on the first story of the first storyGroup', () => {
-      const result = service.prevStory(storyGroups, 0, 0, onStoryGroupChangeMock); // First story of the first storyGroup
+      const result = service.prevStory(storyGroups, 0, 0, onStoryGroupChangeMock); 
       expect(result.storyGroupIndex).toBe(0);
-      expect(result.storyIndex).toBe(0); // Remains at the first story
+      expect(result.storyIndex).toBe(0); 
     });
   });
 
 });
+
diff --git a/projects/ngx-stories/src/lib/ngx-stories.service.ts b/projects/ngx-stories/src/lib/ngx-stories.service.ts
index a44933b..592b35a 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.service.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.service.ts
@@ -11,8 +11,6 @@ export class NgxStoriesService {
   startProgress(interval: number, callback: () => void): any {
     return setInterval(() => callback(), interval);
   }
-
-  // Clears the progress interval
   clearProgress(intervalId: any): void {
     clearInterval(intervalId);
   }
@@ -23,24 +21,21 @@ export class NgxStoriesService {
     onStoryGroupChange: (storyGroupIndex: number) => void): { storyGroupIndex: number, storyIndex: number } {
     let stories = storyGroups[currentStoryGroupIndex]?.stories;
     if (currentStoryIndex === stories.length - 1) {
-      // Move to the next storyGroup if the current story index is the last
       currentStoryGroupIndex = (currentStoryGroupIndex + 1) % storyGroups.length;
       currentStoryIndex = 0;
       onStoryGroupChange(currentStoryGroupIndex);
     } else {
-      // Otherwise, just move to the next story within the same storyGroup
       currentStoryIndex++;
     }
     return { storyGroupIndex: currentStoryGroupIndex, storyIndex: currentStoryIndex };
   }
-
-  prevStory(storyGroups: StoryGroup[],
+// Array of story groups
+  prevStory(storyGroups: StoryGroup[], 
     currentStoryGroupIndex: number,
     currentStoryIndex: number,
     onStoryGroupChange: (storyGroupIndex: number) => void): { storyGroupIndex: number, storyIndex: number } {
     let stories = storyGroups[currentStoryGroupIndex]?.stories;
     if (currentStoryIndex === 0) {
-      // Move to the previous storyGroup if the current story index is 0
       if (currentStoryGroupIndex > 0) {
         currentStoryGroupIndex--;
         stories = storyGroups[currentStoryGroupIndex]?.stories;
@@ -48,15 +43,12 @@ export class NgxStoriesService {
         onStoryGroupChange(currentStoryGroupIndex);
       }
     } else {
-      // Otherwise, just move to the previous story within the same storyGroup
       currentStoryIndex--;
     }
     return { storyGroupIndex: currentStoryGroupIndex, storyIndex: currentStoryIndex };
   }
-
-  setOptions(options: NgxStoriesOptions, storyContainers: QueryList<ElementRef>): void {
-    // Set the options for the service
-    // Set the width and height of the story container
+ // Set the options for the service
+  setOptions(options: NgxStoriesOptions, storyContainers: QueryList<ElementRef>): void {  
     storyContainers?.forEach(storyContainer => {
       storyContainer.nativeElement.style.width = options.width + 'px';
       storyContainer.nativeElement.style.height = options.height + 'px';
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 79fb1cc..72348e8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,6 @@
 <h1>Ngx-Stories Demo</h1> 
 
-<!-- 
-  The ngx-stories component displays a series of stories 
-  based on the storyGroups array provided from the AppComponent.
--->
+
 <ngx-stories
 [storyGroups]="storyGroups" 
 (triggerOnEnd)="triggerOnEnd()"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1754a83..0f294ef 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,20 +1,15 @@
-// Import necessary modules from Angular and NgxStories library
 import { Component } from '@angular/core';
 import { NgxStoriesComponent, StoryGroup } from '../../projects/ngx-stories/src/public-api';
 
-// Define the AppComponent with metadata like selector, template, and style URL
 @Component({
-  selector: 'app-root', // The component's HTML tag
-  standalone: true,     // Indicates this component does not require being declared in a module
-  imports: [NgxStoriesComponent],  // Importing the NgxStoriesComponent
-  templateUrl: './app.component.html',  // External HTML template for the component
-  styleUrl: './app.component.css',      // External CSS for styling the component
+  selector: 'app-root', 
+  standalone: true,    
+  imports: [NgxStoriesComponent], 
+  templateUrl: './app.component.html',  
+  styleUrl: './app.component.css',
 })
-
-// Export the AppComponent class, the main component of the application
 export class AppComponent {
 
-  // Defining an array of story groups, each containing a group of stories for users
   // StoryGroup[] is a list where each story group contains an id, name, and an array of stories
   readonly storyGroups: StoryGroup[] = [
     {
@@ -28,27 +23,28 @@ export class AppComponent {
       ]
     },
     {
-      id: 2,         // Unique identifier for the second story group
-      name: 'John Doe',  // Name of the second group
+      id: 2,        
+      name: 'John Doe',
       stories: [     // Array of stories belonging to this group
-        { id: 1, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' }, //Story 1
-        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' }, //Story 2
-        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/6.jpg' }, //Story 3
-        { id: 4, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/7.jpg' }  //Story 4
+        { id: 1, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/4.jpg' }, 
+        { id: 2, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/5.jpg' }, 
+        { id: 3, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/6.jpg' }, 
+        { id: 4, type: 'image', content: 'https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/7.jpg' }  
       ]
     },
   ];
 
   // Function to trigger an alert when the user reaches the end of the stories
   triggerOnEnd() {
-    alert('End');  // Displays an alert with the message "End"
+    alert('End'); 
   }
 
   // Function to trigger an alert when the user exits the stories
   triggerOnExit() {
-    alert('Exit');  // Displays an alert with the message "Exit"
+    alert('Exit');  
   }
 
+  // Function to console log when the user changes the story group
   triggerOnStoryGroupChange(storyGroup: number) {
     console.log(storyGroup);
   }
diff --git a/src/index.html b/src/index.html
index 5307c51..75ff412 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,27 +12,25 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <!-- Google Tag Manager -->
-   <!-- Here we are initialising the Google tag manager -->
-<!-- It enable to trcking and analytics on the website  -->
+//for loading the gtm.js script
   <script>(function (w, d, s, l, i) {
-      w[l] = w[l] || []; w[l].push({    //pushing the data to the dataLayer
+      w[l] = w[l] || []; w[l].push({   
         'gtm.start':          
-          new Date().getTime(), event: 'gtm.js' //for the  first script element in the document
+          new Date().getTime(), event: 'gtm.js' 
       }); var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =  //creating the script element
-          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); //If the ddatalayer is not equal to dataLayer then it will append the dataLayer to the script element i.e URL
-    })(window, document, 'script', 'dataLayer', 'GTM-KDD8ZZFP'); //passing the window,document,script,dataLayer and the id of the GTM
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =  
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); 
+    })(window, document, 'script', 'dataLayer', 'GTM-KDD8ZZFP'); 
   </script>
   <!-- End Google Tag Manager -->
 
   <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-N2X4LE7WXQ"></script> //for loading the gtag.js script
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-N2X4LE7WXQ"></script> 
   <script>
-    window.dataLayer = window.dataLayer || [];   //creating the dataLayer
-    function gtag() { dataLayer.push(arguments); }  //pushing the data to the dataLayer
-    gtag('js', new Date());    //for the  first script element in the document
-
-    gtag('config', 'G-N2X4LE7WXQ');   //passing the id of the GTM
+    window.dataLayer = window.dataLayer || [];   
+    function gtag() { dataLayer.push(arguments); }  
+    gtag('js', new Date());   
+    gtag('config', 'G-N2X4LE7WXQ');  
   </script>
 </head>
 
@@ -41,7 +39,7 @@
 
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDD8ZZFP" height="0" width="0"  
-      style="display:none;visibility:hidden"></iframe></noscript>  //If the script is not supported by the browser then it will display the message
+      style="display:none;visibility:hidden"></iframe></noscript>  
   <!-- End Google Tag Manager (noscript) -->
 
 </body>
diff --git a/src/main.ts b/src/main.ts
index 30b2a4d..35b00f3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,5 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-// Bootstrapping (initializing) the Angular application with the root component (AppComponent) 
-// and the configuration settings (appConfig).
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

From 52a431198a903959e0dfb92f248f7c88cdf43950 Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Sat, 5 Oct 2024 15:03:56 +0530
Subject: [PATCH 4/6] done changes as instucted

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 75ff412..4bc343c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <!-- Google Tag Manager -->
-//for loading the gtm.js script
+   <!-- for loading gtm.js script -->
   <script>(function (w, d, s, l, i) {
       w[l] = w[l] || []; w[l].push({   
         'gtm.start':          

From 333c6ff184cf2113ff596d54fef122c28b0788f1 Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Sat, 5 Oct 2024 23:35:33 +0530
Subject: [PATCH 5/6] made the changes

---
 .../src/lib/ngx-stories.component.spec.ts     |  2 +-
 .../src/lib/ngx-stories.component.ts          | 35 ++++++++++---------
 .../src/lib/ngx-stories.service.spec.ts       | 19 +++++-----
 .../src/lib/ngx-stories.service.ts            |  5 +++
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts b/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
index 95ecad3..5fcf3f2 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.spec.ts
@@ -17,7 +17,7 @@ describe('NgxStoriesComponent', () => {
   });
 
   it('should create the component', () => {
-    expect(component).toBeTruthy(); 
+    expect(component).toBeTruthy(); //This checks if the component is created succesfully
   });
 
   it('should start progress interval for an image story', () => {
diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.ts b/projects/ngx-stories/src/lib/ngx-stories.component.ts
index cb1df53..1faba9d 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.ts
@@ -20,7 +20,7 @@ export class NgxStoriesComponent implements AfterViewInit {
 
   // Input property to accept the list of storyGroup and their stories
   @Input({ required: true }) storyGroups: StoryGroup[] = [];
-  // Input property to accept the options for the stories component
+  // options for the story container
   @Input() options: NgxStoriesOptions = {
     width: 360,
     height: 768,
@@ -34,19 +34,20 @@ export class NgxStoriesComponent implements AfterViewInit {
   currentStoryIndex: number = 0;
   currentStoryGroupIndex: number = 0;
   progressWidth: number = 0;
-  intervalId: any;
-  isTransitioning = false; 
+  intervalId: any;//interval id for the progress bar
+  isTransitioning = false; //prevent multiple transitions at once
   isSwipingLeft = false;
   isSwipingRight = false;
   isHolding = false;
-  holdTimeout: any; 
+  holdTimeout: any; //timeout for holding the story(pause functionality)
   storyState: 'playing' | 'paused' | 'holding' = 'playing';
 
-  
+  //constants for the story component
   readonly HOLD_DELAY_MS = 500;
   readonly PROGRESS_INTERVAL_MS = 50;
   readonly FULL_PROGRESS_WIDTH = 100;
 
+  //Queries the story container in the view for gesture for handling swipe events
   @ViewChildren('storyContainer') storyContainers!: QueryList<ElementRef>;
 
   constructor(
@@ -67,15 +68,17 @@ export class NgxStoriesComponent implements AfterViewInit {
 // Function to start the progress bar for the current story
   private startStoryProgress() { 
     const currentStory = this.storyGroups[this.currentStoryGroupIndex].stories[this.currentStoryIndex];
-    let storyDuration = 5000;
+    let storyDuration = 5000;//default duration for the story for the images
     if (currentStory.type === 'video') {
       const videoElement = document.createElement('video');
       videoElement.src = currentStory.content;
+      //use the video duration or a default if not available
       videoElement.onloadedmetadata = () => {
         storyDuration = videoElement.duration * 1000;
         this.startProgressInterval(storyDuration);
       };
     } else {
+      //for the ,start with default duration
       this.startProgressInterval(storyDuration);
     }
   }
@@ -117,13 +120,13 @@ export class NgxStoriesComponent implements AfterViewInit {
         }
         this.goToNextStoryGroup();
         this.resetSwipe();
-      }, 600); 
+      }, 600); //Match the animation duration
     } else if (direction === 'right') {
       this.isSwipingRight = true;
       setTimeout(() => {
         this.goToPreviousStoryGroup();
         this.resetSwipe();
-      }, 600); 
+      }, 600); //Match the animation duration
     } else if (direction === 'down') {
       clearInterval(this.intervalId);
       this.onExit();
@@ -139,7 +142,7 @@ export class NgxStoriesComponent implements AfterViewInit {
 // Function to navigate to the next or previous story
   navigateStory(direction: 'next' | 'previous') {
     if (this.isTransitioning) return;
-    this.pauseCurrentVideo(true); 
+    this.pauseCurrentVideo(true); // Pause the video and seek to the beginning
     this.setTransitionState(true);
     clearInterval(this.intervalId);
 
@@ -209,7 +212,7 @@ export class NgxStoriesComponent implements AfterViewInit {
     setTimeout(() => {
       this.startStoryProgress();
       this.isTransitioning = false;
-    }, this.HOLD_DELAY_MS);
+    }, this.HOLD_DELAY_MS);//Match this timeout with the animation duration
   }
 
   // Function to navigate to the previous story group
@@ -226,7 +229,7 @@ export class NgxStoriesComponent implements AfterViewInit {
     setTimeout(() => {
       this.startStoryProgress();
       this.isTransitioning = false;
-    }, this.HOLD_DELAY_MS);
+    }, this.HOLD_DELAY_MS);//Match this timeout with the CSS transition duration
   }
 
   // Function to set the transition state
@@ -234,8 +237,7 @@ export class NgxStoriesComponent implements AfterViewInit {
     this.isTransitioning = isTransitioning;
     setTimeout(() => {
       this.isTransitioning = false;
-    }, duration); 
-  }
+    }, duration); // Ensure consistent transition timing
 
   // Function to check if the user has reached the end of the stories
   private hasReachedEndOfStories(): boolean {
@@ -278,7 +280,7 @@ export class NgxStoriesComponent implements AfterViewInit {
       this.isHolding = false;
       this.storyState = 'playing';
       this.startStoryProgress();
-      this.playCurrentStoryVideo(); 
+      this.playCurrentStoryVideo(); //Resume the video when released
     }
   }
 
@@ -290,10 +292,10 @@ export class NgxStoriesComponent implements AfterViewInit {
     this.storyState = this.storyState === 'paused' ? 'playing' : 'paused';
     if (this.storyState === 'paused') {
       clearInterval(this.intervalId);
-      this.pauseCurrentVideo();
+      this.pauseCurrentVideo();  // Pause the video when holding
     } else {
       this.startStoryProgress();
-      this.playCurrentStoryVideo();  
+      this.playCurrentStoryVideo();  //resume the video when released
     }
   }
 
@@ -302,6 +304,7 @@ export class NgxStoriesComponent implements AfterViewInit {
   }
 
   private onExit() {
+    //swipedown event or cross button clicked in the story 
     this.triggerOnExit.emit();
   }
 
diff --git a/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts b/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
index fe8e950..8e900b2 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.service.spec.ts
@@ -1,4 +1,5 @@
 import { TestBed } from '@angular/core/testing';
+
 import { NgxStoriesService } from './ngx-stories.service';
 import { StoryGroup } from './interfaces/interfaces';
 
@@ -74,16 +75,16 @@ describe('NgxStoriesService', () => {
 
     // Test to ensure the service moves to the next story within the same storyGroup
     it('should move to the next story within the same storyGroup', () => {
-      const result = service.nextStory(storyGroups, 0, 0, onStoryGroupChangeMock);
+      const result = service.nextStory(storyGroups, 0, 0, onStoryGroupChangeMock);// // Start at storyGroup 0, story 0
       expect(result.storyGroupIndex).toBe(0);
       expect(result.storyIndex).toBe(1);
     });
 
     // Test to ensure the service moves to the next storyGroup when the last story is reached
     it('should move to the next storyGroup if current story is the last one', () => {
-      const result = service.nextStory(storyGroups, 0, 2, onStoryGroupChangeMock); 
-      expect(result.storyGroupIndex).toBe(1); 
-      expect(result.storyIndex).toBe(0); 
+      const result = service.nextStory(storyGroups, 0, 2, onStoryGroupChangeMock); // Start at storyGroup 0, story 2(last story)
+      expect(result.storyGroupIndex).toBe(1); //Move to the next storyGroup
+      expect(result.storyIndex).toBe(0); //first story of the next storyGroup
     });
   });
 
@@ -111,23 +112,23 @@ describe('NgxStoriesService', () => {
 
     // Test to ensure the service moves to the previous story within the same storyGroup
     it('should move to the previous story within the same storyGroup', () => {
-      const result = service.prevStory(storyGroups, 0, 2, onStoryGroupChangeMock);
+      const result = service.prevStory(storyGroups, 0, 2, onStoryGroupChangeMock);// Start at storyGroup 0, story 2
       expect(result.storyGroupIndex).toBe(0);
       expect(result.storyIndex).toBe(1);
     });
 
     // Test to ensure the service moves to the previous storyGroup when the first story is reached
     it('should move to the previous storyGroup if current story is the first one', () => {
-      const result = service.prevStory(storyGroups, 1, 0, onStoryGroupChangeMock);
-      expect(result.storyGroupIndex).toBe(0); 
-      expect(result.storyIndex).toBe(2); 
+      const result = service.prevStory(storyGroups, 1, 0, onStoryGroupChangeMock);// Start at storyGroup 1, story 0
+      expect(result.storyGroupIndex).toBe(0); //Move to the previous storyGroup
+      expect(result.storyIndex).toBe(2); //last story of the previous storyGroup
     });
 
     // Test to ensure that no change occurs if already on the first story of the first storyGroup
     it('should do nothing if on the first story of the first storyGroup', () => {
       const result = service.prevStory(storyGroups, 0, 0, onStoryGroupChangeMock); 
       expect(result.storyGroupIndex).toBe(0);
-      expect(result.storyIndex).toBe(0); 
+      expect(result.storyIndex).toBe(0); //No change rermain on the first story of the first storyGroup
     });
   });
 
diff --git a/projects/ngx-stories/src/lib/ngx-stories.service.ts b/projects/ngx-stories/src/lib/ngx-stories.service.ts
index 592b35a..8920319 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.service.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.service.ts
@@ -11,6 +11,7 @@ export class NgxStoriesService {
   startProgress(interval: number, callback: () => void): any {
     return setInterval(() => callback(), interval);
   }
+  //Clears the progress interval
   clearProgress(intervalId: any): void {
     clearInterval(intervalId);
   }
@@ -21,10 +22,12 @@ export class NgxStoriesService {
     onStoryGroupChange: (storyGroupIndex: number) => void): { storyGroupIndex: number, storyIndex: number } {
     let stories = storyGroups[currentStoryGroupIndex]?.stories;
     if (currentStoryIndex === stories.length - 1) {
+     // If the current story is the last story in the group, move to the next group
       currentStoryGroupIndex = (currentStoryGroupIndex + 1) % storyGroups.length;
       currentStoryIndex = 0;
       onStoryGroupChange(currentStoryGroupIndex);
     } else {
+      // Otherwise move to the next story in the same group
       currentStoryIndex++;
     }
     return { storyGroupIndex: currentStoryGroupIndex, storyIndex: currentStoryIndex };
@@ -36,6 +39,7 @@ export class NgxStoriesService {
     onStoryGroupChange: (storyGroupIndex: number) => void): { storyGroupIndex: number, storyIndex: number } {
     let stories = storyGroups[currentStoryGroupIndex]?.stories;
     if (currentStoryIndex === 0) {
+      //Move to the previous story group if the current story index is 0
       if (currentStoryGroupIndex > 0) {
         currentStoryGroupIndex--;
         stories = storyGroups[currentStoryGroupIndex]?.stories;
@@ -48,6 +52,7 @@ export class NgxStoriesService {
     return { storyGroupIndex: currentStoryGroupIndex, storyIndex: currentStoryIndex };
   }
  // Set the options for the service
+ // Set the width and height of the story container
   setOptions(options: NgxStoriesOptions, storyContainers: QueryList<ElementRef>): void {  
     storyContainers?.forEach(storyContainer => {
       storyContainer.nativeElement.style.width = options.width + 'px';

From 7d7023fd78d2836124876f2bcc37942933e5bf82 Mon Sep 17 00:00:00 2001
From: Saurabh Kashyap <153047425+saurabhk9919@users.noreply.github.com>
Date: Mon, 7 Oct 2024 18:01:09 +0530
Subject: [PATCH 6/6] modified

---
 projects/ngx-stories/src/lib/ngx-stories.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/ngx-stories/src/lib/ngx-stories.component.ts b/projects/ngx-stories/src/lib/ngx-stories.component.ts
index 967aa16..24d7d54 100644
--- a/projects/ngx-stories/src/lib/ngx-stories.component.ts
+++ b/projects/ngx-stories/src/lib/ngx-stories.component.ts
@@ -254,7 +254,7 @@ export class NgxStoriesComponent implements AfterViewInit {
     setTimeout(() => {
       this.isTransitioning = false;
     }, duration); // Ensure consistent transition timing
-
+  }
   // Function to check if the user has reached the end of the stories
   private hasReachedEndOfStories(): boolean {
     let stories = this.storyGroups.find((storyGroup, index) => index === this.currentStoryGroupIndex)?.stories;