Merge pull request #3 from Gauravdarkslayer/issue-1

Issue 1

src/app/app.component.css

@@ -7,8 +7,10 @@
   border-radius: 10px;
 
   opacity: 0;
-  transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.6s ease-in-out;
   display: none;
+  height: 100%;
+
 }
 
 .story-container.active {
@@ -55,6 +57,7 @@ button {
   font-size: 1.5rem;
   cursor: pointer;
   z-index: 10;
+  height: 100vh;
 }
 
 button:focus {
@@ -100,17 +103,6 @@ progress::-moz-progress-bar {
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
 .story-container {
   position: relative;
   width: 100%;

src/app/app.component.html

@@ -1,22 +1,27 @@
 @for(person of persons; track person.id; let i=$index) {
 <div class="story-container" #storyContainer [class.active]="i === currentPersonIndex"
-[class.swipe-left]="isSwipingLeft" 
-[class.swipe-right]="isSwipingRight"
+  [class.swipe-left]="isSwipingLeft" 
+  [class.swipe-right]="isSwipingRight"
+  (mousedown)="onHold()"
+  (mouseup)="onRelease()"
+  (touchstart)="onHold()"
+  (touchend)="onRelease()"
+  (contextmenu)="disableContextMenu($event)"
 >
   @for(story of person.stories; track story.id; let z = $index ) {
     <div [class.active]="z === currentStoryIndex" class="story-content">
-      <h5>
-        {{person.name}}
-      </h5>
+        <h5 [style.visibility]="isHolding ? 'hidden' : 'visible'">
+          {{person.name}}
+        </h5>
         <img [src]="story.content" >
     </div>
   }
 
-  <div class="progress-bar-container">
+  <div class="progress-bar-container" [style.visibility]="isHolding ? 'hidden' : 'visible'">
     @for(story of person.stories; track story.id; let x = $index ) {
-      <progress  class="progress-bar "
-      [value]="getProgressValue(x)" 
-                max="100" [class.active]="x===currentStoryIndex"></progress>
+        <progress  class="progress-bar "
+        [value]="getProgressValue(x)" 
+                  max="100" [class.active]="x===currentStoryIndex"></progress>
     }
   </div>
   @if(!(currentPersonIndex === 0 && currentStoryIndex === 0) ) {

src/app/app.component.ts

@@ -50,6 +50,7 @@ export class AppComponent implements AfterViewInit {
   isTransitioning = false;
   isSwipingLeft = false;
   isSwipingRight = false;
+  isHolding = false;
   @ViewChildren('storyContainer') storyContainers!: QueryList<ElementRef>;
 
   constructor(
@@ -70,6 +71,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   startStoryProgress() {
+    this.intervalId && clearInterval(this.intervalId);
     this.intervalId = setInterval(() => {
       this.progressWidth += 1;
       if (this.progressWidth >= 100) {
@@ -129,7 +131,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   prevStory() {
-    if (this.isTransitioning) return;
+      if (this.isTransitioning) return;
     this.isTransitioning = true;
     clearInterval(this.intervalId);
     let stories = this.persons.find((person, index) => index === this.currentPersonIndex)?.stories;
@@ -144,8 +146,6 @@ export class AppComponent implements AfterViewInit {
       stories = this.persons.find((person, index) => index === this.currentPersonIndex)?.stories;
     }
 
-    // this.currentStoryIndex--;
-    // }
     this.progressWidth = 0;
     setTimeout(() => {
       this.startStoryProgress();
@@ -179,15 +179,8 @@ export class AppComponent implements AfterViewInit {
     }, 500); // Match this timeout with the CSS transition duration
   }
 
-  onPreviousTap() {
-
-  }
-
-  onNextTap() {
-
-  }
-
   getProgressValue(storyIndex: number): number {
+    if (this.isHolding) return this.progressWidth;
     if (storyIndex < this.currentStoryIndex) {
       return 100;
     } else if (storyIndex === this.currentStoryIndex) {
@@ -197,6 +190,20 @@ export class AppComponent implements AfterViewInit {
     }
   }
 
+  onHold() {
+    this.isHolding = true;
+    clearInterval(this.intervalId);
+  }
+
+  onRelease() {
+    this.isHolding = false;
+    this.startStoryProgress();
+  }
+
+  disableContextMenu(event: MouseEvent) {
+    event.preventDefault();
+  }
+
   onEnd() {
     alert('End');
   }