0.0.7-beta.7 released

- Updated README.md file with properties description
- Configurable options(NgxStoriesOptions) for the story display
- CSS fixed

README.md

@@ -47,6 +47,16 @@ export class AppComponent {
 <ngx-stories [storyGroups]="storyGroups"></ngx-stories>
 ```
 
+## Properties
+| Property           | Type                  | Required | Description                                                                                                  |
+|--------------------|-----------------------|----------|--------------------------------------------------------------------------------------------------------------|
+| `storyGroups`      | `StoryGroup[]`        | Yes      | An input property that accepts an array of story groups. Each group contains a list of stories to display.     |
+| `options`          | `NgxStoriesOptions`   | No       | Configuration options for the story display. Options include `width` and `height` to customize the dimensions. |
+| `triggerOnEnd`     | `EventEmitter<void>`  | No       | Output event that is triggered when the user reaches the end of all stories.                                  |
+| `triggerOnExit`    | `EventEmitter<void>`  | No       | Output event that is triggered when the user manually exits the story view.                                   |
+| `triggerOnSwipeUp` | `EventEmitter<void>`  | No       | Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions.    |
+
+
 ## Features
 * Dynamic Story Carousel: Display a collection of stories for each storyGroup.
 * Easy Integration: Simple and straightforward to integrate into your Angular project.

package.json

@@ -10,10 +10,10 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test ngx-stories",
     "test:ci": "ng test ngx-stories --watch=false --browsers=ChromeHeadless --code-coverage",
-    "publish": "npm run build-library && npm run postbuild-library && npm run pack-lib && cd dist/ngx-stories && npm publish --access public",
+    "publish": "npm run copy:readme && npm run build-library && npm run pack-lib && cd dist/ngx-stories && npm publish --access public",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
-    "postbuild-library": "cpy README.md LICENSE projects/ngx-stories"
+    "copy:readme": "cpy README.md LICENSE projects/ngx-stories"
   },
   "private": true,
   "dependencies": {

projects/ngx-stories/README.md

@@ -47,6 +47,16 @@ export class AppComponent {
 <ngx-stories [storyGroups]="storyGroups"></ngx-stories>
 ```
 
+## Properties
+| Property           | Type                  | Required | Description                                                                                                  |
+|--------------------|-----------------------|----------|--------------------------------------------------------------------------------------------------------------|
+| `storyGroups`      | `StoryGroup[]`        | Yes      | An input property that accepts an array of story groups. Each group contains a list of stories to display.     |
+| `options`          | `NgxStoriesOptions`   | No       | Configuration options for the story display. Options include `width` and `height` to customize the dimensions. |
+| `triggerOnEnd`     | `EventEmitter<void>`  | No       | Output event that is triggered when the user reaches the end of all stories.                                  |
+| `triggerOnExit`    | `EventEmitter<void>`  | No       | Output event that is triggered when the user manually exits the story view.                                   |
+| `triggerOnSwipeUp` | `EventEmitter<void>`  | No       | Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions.    |
+
+
 ## Features
 * Dynamic Story Carousel: Display a collection of stories for each storyGroup.
 * Easy Integration: Simple and straightforward to integrate into your Angular project.

projects/ngx-stories/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-stories",
-  "version": "0.0.7-beta.5",
+  "version": "0.0.7-beta.7",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0",

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

@@ -10,3 +10,8 @@ export interface StoryGroup {
     name: string, // name of the storyGroup which is to be displayed over story
     stories: Story[] // array of stories
 }
+
+export interface NgxStoriesOptions {
+    width: number,
+    height: number,
+}

projects/ngx-stories/src/lib/ngx-stories.component.scss

@@ -2,20 +2,18 @@
   position: relative;
   overflow: hidden;
   border-radius: 10px;
-
   opacity: 0;
   display: none;
-
   position: relative;
-  width: 100%;
-  height: 100%;
   transition: transform 0.6s ease-in-out;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
 }
 
 .story-container.active {
   opacity: 1;
   display: block;
-  width: 360px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -42,7 +40,7 @@
   background-color: rgba(128, 128, 128, 0.705);
   border-radius: 5px;
   overflow: hidden;
-  
+
 }
 
 .progress-bar::-webkit-progress-bar {
@@ -125,7 +123,7 @@ button:nth-child(1) {
 .next {
   opacity: 0;
   top: 50%;
-  max-height: 80vh;
+  max-height: 80%;
 }
 
 .story-content-container {
@@ -135,6 +133,7 @@ button:nth-child(1) {
   justify-content: space-between;
   align-items: center;
   z-index: 1;
+
   button {
     display: none;
   }
@@ -146,6 +145,7 @@ button:nth-child(1) {
   align-items: center;
   justify-content: center;
   position: absolute;
+
   img {
     max-width: 100%;
     max-height: 100%;
@@ -159,13 +159,15 @@ button:nth-child(1) {
       position: relative;
       display: flex;
       height: fit-content;
+
       .pause-icon {
         content: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ5SURBVHgBpVXLceJAEB3JfC4cRBXfmzIwjsByBMtGAI5gyQApgrUjgI1g2QiACIwjEK6iCopPwZnvvgctSmYlIbxdNZoezXS/7p6ebk1FkOu6RiaT+QHW0jTNPBwOpmytMAYYf7bbbadcLg/DdGhBP8fjsZlIJFpUrGIQgNu73c4JAvoHYDabNTA1MQyfgr5YPJC1CY/o1aNPdEWQUqn0EgqwWCya+/3ePm5o2gqKXuHJSzabXakAWi6XJkJUF4M8svP5vKOCLMc4cMznc5fCKibxLGU8+clk0vjkgcT8DawBy4d3d3dPsHqobiCCIERdSYQVPHvgnejc1HXdVhLzrygnUYay6pRhhiSJ0mk9AGpcIP5OkHKcsUajUSUOCKZXWVrwytCBVPUOpFKpdpAgzvxMp9Nv0+m0RYNUBDEpPH69XjcYom9cMBUjQpPlB/dThwJeZlOFe8EQ9cgjMo8EqAhAT8UnG964GPWgTeh6l9kkgCHWDdUNxNKB0UJ6/g7YHnhndPWfhMTIRu0T4EP4q1niJ3oM5d8LhYJ1uecvigRwReA+pmJeooOcfygWi52gM7xcAXonQF/+H/P2ivI2FaPW2GH1SdLYIg8PO/pl3obormM85XK552uvHG+p5vF4OycPkdddKVTLaw8piijrK5inUsEPvHhWUkMQgu5XQChDWfK8J/DOGUDcdmTTvBXEU05ZrnG555r2qeHANVtdNA+U3V9hPdfXs3l3xwRhwUR22d6ZWC0T1INg33vt4CuwmGltnRWdOqCDDAtvmR6xeWw2GxtCNRWDWCiTyWQ9KMO0KEHpuVUoqOLx3GP2vPoAP4QBvaieTfoLlW9glXISWYUAAAAASUVORK5CYII=')
       }
+
       .play-icon {
         content: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI6SURBVHgBtVbLccIwEJXN98DBzMCBmzsIHcSpIO4gdACpAFNBSAWBDkgFMRWQVACc+I85MnzzHiMzxggSiLMziyxpd5+0q91FExeo2+0amUymjE9L0zRzt9uZcmsO/gS/r9frVqFQ6J2zoakWB4OBGY/H32j4SFjTaFgAyAiuY97YbDY1FZAeXphMJhUY78hT02AN/IC1bC6X23M+n+fBHmC4CZkeuESd4XBYEZdoNptVAbAjj8fjuud5hviBIGNC3vH1wFWlIE8eMF4SVxJ1fP2Tm9Dn2PBuNa4A8WjzsDEajRrcwOiElSR4J3h1yNlcU/l8Op3WJcgH5zoN6Lr+xGAlk8lGWCEWi1kYimDHX4OszTXo2Qp5yvFxWIyhjuj7Qm42m+2JPxJs0Pgrv5fLZYXP9JGT1WrVFNGRyx/c8J4AvL5AkrgiIoJXmOVMQJMAfOtzESFJN81ZXnTxz0SAPtj4TdZeSXvPEKDL2WKxKIqICDlgcUQMvgjQ5gQRt0REtN1uS3JsMQ/qEqAchZuYuAjuPb9TqVRLlxF3wQaax0klTCQSLVyVifMcWHNwuibGk1KBasCqQJDGIXFlyd0XO9SSJ3EjUVfa8GjzaDNYrm8B8Y1LVjeecOM4KrlniH0bsi++XrgiawoQojMWBnzfw+ii3zaDpYRG0+l0EQ+EwaS8wfYK+Rraaf0iAIn+Q/FzoBR2lV9Swk2/jYCXVNVYCRAEwsuyYcDGM74L/Jvo83Y4gMtnLl+ikr4B8QGOWkmYr9YAAAAASUVORK5CYII=');
       }
-      
+
     }
   }
 }

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

@@ -5,6 +5,7 @@ import { StoryGroup } from '../lib/interfaces/interfaces';
 import "hammerjs";
 import { CommonModule } from '@angular/common';
 import { NgxStoriesService } from './ngx-stories.service';
+import { NgxStoriesOptions } from '../lib/interfaces/interfaces';
 
 @Component({
   selector: 'ngx-stories',
@@ -19,6 +20,11 @@ export class NgxStoriesComponent implements AfterViewInit {
   // Input property to accept the list of storyGroup and their stories
   @Input({ required: true }) storyGroups: StoryGroup[] = [];
 
+  // options
+  @Input() options: NgxStoriesOptions = {
+    width: 360,
+    height: 768,
+  };
   // Output events to handle end of stories, exit, and swipe-up gesture
   @Output() triggerOnEnd = new EventEmitter<void>();
   @Output() triggerOnExit = new EventEmitter<void>();
@@ -73,6 +79,7 @@ export class NgxStoriesComponent implements AfterViewInit {
       hammer.on('swipedown', () => this.handleSwipe('down'));
       hammer.on('swipeup', () => this.handleSwipe('up'));
     });
+    this.storyService.setOptions(this.options, this.storyContainers);
   }
 
   handleSwipe(direction: string) {

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

@@ -1,5 +1,5 @@
-import { Injectable } from "@angular/core";
-import { StoryGroup } from "./interfaces/interfaces";
+import { ElementRef, Injectable, QueryList } from "@angular/core";
+import { NgxStoriesOptions, StoryGroup } from "./interfaces/interfaces";
 @Injectable({
   providedIn: 'root',
 })
@@ -45,4 +45,14 @@ export class NgxStoriesService {
     }
     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
+    storyContainers?.forEach(storyContainer => {
+      storyContainer.nativeElement.style.width = options.width + 'px';
+      storyContainer.nativeElement.style.height = options.height + 'px';
+    });
+
+  }
 }