akkoma-fe/src/components/media_modal/media_modal.vue

137 lines
2.5 KiB
Vue
Raw Normal View History

<template>
<Modal
2019-07-05 07:17:44 +00:00
v-if="showing"
class="media-modal-view"
2019-10-22 00:52:31 +00:00
@backdropClicked="hide"
2019-07-05 07:17:44 +00:00
>
<img
v-if="type === 'image'"
class="modal-image"
2019-07-05 07:17:44 +00:00
:src="currentMedia.url"
2019-02-18 05:03:26 +00:00
:alt="currentMedia.description"
:title="currentMedia.description"
@touchstart.stop="mediaTouchStart"
@touchmove.stop="mediaTouchMove"
2019-11-14 19:07:05 +00:00
@click="hide"
2019-07-06 21:54:17 +00:00
>
2019-07-05 07:17:44 +00:00
<VideoAttachment
v-if="type === 'video'"
2019-07-05 07:17:44 +00:00
class="modal-image"
2019-01-26 15:45:03 +00:00
:attachment="currentMedia"
:controls="true"
2019-07-05 07:17:44 +00:00
/>
<audio
v-if="type === 'audio'"
class="modal-image"
:src="currentMedia.url"
:alt="currentMedia.description"
:title="currentMedia.description"
controls
/>
2019-02-19 16:33:40 +00:00
<button
2019-07-05 07:17:44 +00:00
v-if="canNavigate"
2019-02-19 16:33:40 +00:00
:title="$t('media_modal.previous')"
class="modal-view-button-arrow modal-view-button-arrow--prev"
@click.stop.prevent="goPrev"
>
2020-10-20 21:31:16 +00:00
<FAIcon
class="arrow-icon"
icon="chevron-left"
/>
2019-02-19 16:33:40 +00:00
</button>
<button
2019-07-05 07:17:44 +00:00
v-if="canNavigate"
2019-02-19 16:33:40 +00:00
:title="$t('media_modal.next')"
class="modal-view-button-arrow modal-view-button-arrow--next"
@click.stop.prevent="goNext"
>
2020-10-20 21:31:16 +00:00
<FAIcon
class="arrow-icon"
icon="chevron-right"
/>
2019-02-19 16:33:40 +00:00
</button>
</Modal>
</template>
<script src="./media_modal.js"></script>
<style lang="scss">
2019-10-18 16:13:11 +00:00
.modal-view.media-modal-view {
z-index: 1001;
.modal-view-button-arrow {
opacity: 0.75;
2019-02-10 18:26:08 +00:00
&:focus,
&:hover {
outline: none;
box-shadow: none;
}
&:hover {
opacity: 1;
}
2019-02-19 16:33:40 +00:00
}
}
@keyframes media-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
2019-02-19 16:33:40 +00:00
.modal-image {
max-width: 90%;
max-height: 90%;
box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
2019-02-19 16:33:40 +00:00
}
2019-02-19 16:33:40 +00:00
.modal-view-button-arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
border: 0;
padding: 0;
opacity: 0;
box-shadow: none;
background: none;
appearance: none;
overflow: visible;
cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
.arrow-icon {
position: absolute;
top: 35px;
height: 30px;
width: 32px;
font-size: 14px;
line-height: 30px;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,.3);
}
&--prev {
left: 0;
.arrow-icon {
left: 6px;
}
}
2019-02-19 16:33:40 +00:00
&--next {
right: 0;
.arrow-icon {
right: 6px;
}
}
}
</style>