Fixed minor css issues and copy to clipboard

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

@@ -1,4 +1,5 @@
 export type StoryType = 'image' | 'video';
+export type StoryStateType = 'playing' | 'paused' | 'holding' | 'buffering' ;
 export interface Story {
     id: number,
     type: StoryType,

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

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ElementRef, Input, Output, QueryList, ViewChildren, HostListener } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HammerModule } from '@angular/platform-browser';
-import { StoryGroup } from '../lib/interfaces/interfaces';
+import { StoryGroup, StoryStateType } from '../lib/interfaces/interfaces';
 import { CommonModule } from '@angular/common';
 import { NgxStoriesService } from './ngx-stories.service';
 import { NgxStoriesOptions } from '../lib/interfaces/interfaces';
@@ -45,7 +45,7 @@ export class NgxStoriesComponent implements AfterViewInit {
   isSwipingRight = false;
   isHolding = false;
   holdTimeout: any; // Timeout for holding the story (pause functionality)
-  storyState: 'playing' | 'paused' | 'holding' | 'buffering' = 'playing';
+  storyState: StoryStateType = 'playing';
   isLoading: boolean = false;
   currentProgressWidth: number = 0;
   // constants

src/app/app.component.css

@@ -2,14 +2,9 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    overflow: hidden;
+    /* overflow: hidden; */
 }
 
-/* body{
-    background-repeat: repeat;
-    background-size: auto;
-    background-image: url("/assets/images/background.png");
-} */
 
 /* logo CSS */
 .angularlogo {
@@ -222,12 +217,6 @@ body {
         width: 70vw;
         height: 100px;
     }
-
-    /* td { 
-        overflow: hidden; 
-        text-overflow: ellipsis; 
-        word-wrap: break-word;
-    } */
 }
 
 

src/app/app.component.html

@@ -1,23 +1,23 @@
 <div class="main-container">
   <div class="data-container">
     <h1 class="heading">Ngx-Stories</h1>
-    <p class="intro-text">An angular component for rendering Instagram-like stories.</p>
-    <p class="install-text">npm i ngx-stories<a href=""><img class="copy" src="assets/images/copy.png" alt=""></a></p>
+    <p class="intro-text">An angular component for rendering instagram like stories.</p>
+    <p class="install-text">npm i ngx-stories<a href="javascript:void(0)" (click)="copyCommand()"><img class="copy" [src]="installIcon" alt="copy icon"></a></p>
 
     <div class="table">
 
       <table>
         <thead>
           <tr>
-            <th>Instructions for the Insta Stories</th>
+            <th>Instructions for the Ngx-Stories</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td><img class="instructions" src="assets/images/left.png" alt=""> Tap left for previous stories</td>
           </tr>
           <tr>
-            <td><img class="instructions" src="assets/images/right.png" alt=""> Tap right for previous stories</td>
+            <td><img class="instructions" src="assets/images/right.png" alt=""> Tap right for next stories</td>
           </tr>
           <tr>
             <td><img class="instructions" src="assets/images/center.png" alt=""> Press and hold to pause</td>

src/app/app.component.ts

@@ -9,6 +9,7 @@ import { NgxStoriesComponent, NgxStoriesOptions, StoryGroup } from '../../projec
   styleUrl: './app.component.css',
 })
 export class AppComponent {
+  installIcon: string = 'assets/images/copy.png';
   storyOptions: NgxStoriesOptions = {
     width: 338,
     height: 600,
@@ -55,4 +56,9 @@ export class AppComponent {
   currentStoryDetails(eventData: object) {
     console.log('currentStoryDetails', eventData);
   }
+
+  copyCommand() {
+    navigator.clipboard.writeText('npm i ngx-stories');
+    this.installIcon = 'assets/images/copy-done.svg';
+  }
 }