80 lines
2.8 KiB
HTML
80 lines
2.8 KiB
HTML
<nav class="navbar navbar-light bg-light">
|
|
<a class="navbar-brand" href="#" style="margin: 0 auto;">ASYNC HUDDLE</a>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div *ngFor="let user of users" class="col p-3">
|
|
<div class="text-center" (click)="playStory(user)">
|
|
<div
|
|
class="storyImage"
|
|
style="background-image: url({{user.image}})"
|
|
[ngClass]="{'hasStory': user.story_link && user.submit_time}"
|
|
></div>
|
|
<p class="mt-2 mb-0"><strong>{{user.name}}</strong></p>
|
|
<p><small>{{user.submit_time | date :'dd.MM. HH:mm' }}</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #content let-modal>
|
|
<div class="modal-body d-flex flex-column">
|
|
<div class="btn-group mb-2" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-secondary" (click)="prevUser(modal)">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M18 17L10 12L18 7V17Z" fill="currentColor" />
|
|
<path d="M6 7H9V17H6V7Z" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
(click)="modal.dismiss('Cross click')"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" (click)="nextUser(modal)">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M6 17L14 12L6 7V17Z" fill="currentColor" />
|
|
<path d="M18 7H15V12V17H18V7Z" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-center m-0">
|
|
<strong
|
|
>{{selectedUser.name}} -
|
|
<small
|
|
>{{selectedUser.submit_time | date :'dd.MM. HH:mm' }}</small
|
|
></strong
|
|
>
|
|
</p>
|
|
<video
|
|
[src]="selectedUser.story_link"
|
|
(ended)="nextUser(modal)"
|
|
autoplay
|
|
></video>
|
|
</div>
|
|
</ng-template>
|