isomtrik-quickchat
Version:
isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu
272 lines (252 loc) • 10.4 kB
JavaScript
import { h, a as i, k as ke } from './ClockMark-2dd98d26.js';
class VideoMessageBubble extends h {
static properties = {
bgColor: { type: String },
borderWidth: { type: String },
borderColor: { type: String },
borderStyle: { type: String },
borderRadius: { type: String },
padding: { type: String },
videoSrc: { type: String },
videoType: { type: String },
time: { type: String },
height: { type: String },
width: { type: String },
playing: { type: Boolean },
isRead: { type: Boolean },
isSelf: { type: Boolean },
isDelivered: { type: String },
};
constructor() {
super();
this.playing = false;
this.isPopupOpen = false;
}
static styles = i`
.video-message-container {
width: fit-content;
position: relative;
}
.time-stamp-container {
position: absolute;
bottom: 3px;
right: 10px;
font-size: 12px;
display: flex;
align-items: center;
gap: 3px;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
}
.controls button {
padding: 5px 10px;
border: none;
cursor: pointer;
background: transparent;
border-radius: 5px;
}
.video_play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video_pause {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video_fullscreen {
position: absolute;
right: 10px;
bottom: 25px;
}
.actions {
position: absolute;
left: -15px;
cursor: pointer;
top: 5px;
}
.popup {
position: absolute;
top: 0px;
left: -100px;
background-color: white;
border: 1px solid #eef1fa;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 10px #eef1fa;
z-index: 10;
display: flex;
flex-items: column;
align-items: center;
justify-content: center;
}
.popup div {
cursor: pointer;
}
`;
openPopup() {
this.isPopupOpen = !this.isPopupOpen;
}
playVideo() {
const video = this.shadowRoot.querySelector('video');
video.play();
this.playing = true;
const container = this.shadowRoot.querySelector('.video-message-container');
container.addEventListener('mouseenter', () => {
if (this.playing) {
this.showPauseButton();
}
});
container.addEventListener('mouseleave', () => {
this.hidePauseButton();
});
}
pauseVideo() {
const video = this.shadowRoot.querySelector('video');
video.pause();
this.playing = false;
this.hidePauseButton();
}
showPauseButton() {
const pauseButton = this.shadowRoot.querySelector('.video_pause');
pauseButton.style.display = 'block';
}
hidePauseButton() {
const pauseButton = this.shadowRoot.querySelector('.video_pause');
pauseButton.style.display = 'none';
}
togglePlayPause() {
if (this.playing) {
this.pauseVideo();
} else {
this.playVideo();
}
}
fullscreenVideo() {
const video = this.shadowRoot.querySelector('video');
if (video.requestFullscreen) {
video.requestFullscreen();
}
}
render() {
return ke`
<div
class="video-message-container"
style="padding:${this.padding};
border-width: ${this.borderWidth};
border-color: ${this.borderColor};
border-style:${this.borderStyle};
border-radius:${this.borderRadius};
background-color: ${this.bgColor}
"
>
<div>
<div class="time-stamp-container">
<timestamp-element .time="${this.time || new Date().toISOString()}" .color="${'#000'}"></timestamp-element>
${this.isSelf
? this.isRead == true
? ke`<blue-read-mark></blue-read-mark>`
: this.isDelivered == 'true'
? ke`<double-mark></double-mark>`
: this.isDelivered == 'pending'
? ke`<clock-mark></clock-mark>`
: ke`<single-mark></single-mark>`
: null}
</div>
<video
style="height: ${this.height || '150px'};
width:${this.width || '150px'};
object-fit: cover;
overflow: hidden;
border-radius:${this.borderRadius};
"
@click="${this.togglePlayPause}"
>
<source src=${this.videoSrc} type=${this.videoType || 'video/mp4'} />
</video>
<div class="controls">
<button class="video_play" style="display: ${this.playing ? 'none' : 'block'};" @click="${this.playVideo}">
<svg
height="50px"
width="50px"
version="1.1"
id="_x32_"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-51.2 -51.2 614.40 614.40"
xml:space="preserve"
fill="#000000"
>
<g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(64,64), scale(0.75)">
<rect x="-51.2" y="-51.2" width="614.40" height="614.40" rx="307.2" fill="" strokewidth="0"></rect>
</g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<style type="text/css">
.st0 {
fill: #eff1fa;
}
</style>
<g>
<path
class="st0"
d="M256,0C114.625,0,0,114.625,0,256c0,141.374,114.625,256,256,256c141.374,0,256-114.626,256-256 C512,114.625,397.374,0,256,0z M351.062,258.898l-144,85.945c-1.031,0.626-2.344,0.657-3.406,0.031 c-1.031-0.594-1.687-1.702-1.687-2.937v-85.946v-85.946c0-1.218,0.656-2.343,1.687-2.938c1.062-0.609,2.375-0.578,3.406,0.031 l144,85.962c1.031,0.586,1.641,1.718,1.641,2.89C352.703,257.187,352.094,258.297,351.062,258.898z"
></path>
</g>
</g>
</svg>
</button>
<button class="video_pause" style="display: ${this.playing ? 'block' : 'none'};" @click="${this.pauseVideo}">
<svg width="60px" height="60px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(3.959999999999999,3.959999999999999), scale(0.67)">
<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#000" strokewidth="0"></rect>
</g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM8.07612 8.61732C8 8.80109 8 9.03406 8 9.5V14.5C8 14.9659 8 15.1989 8.07612 15.3827C8.17761 15.6277 8.37229 15.8224 8.61732 15.9239C8.80109 16 9.03406 16 9.5 16C9.96594 16 10.1989 16 10.3827 15.9239C10.6277 15.8224 10.8224 15.6277 10.9239 15.3827C11 15.1989 11 14.9659 11 14.5V9.5C11 9.03406 11 8.80109 10.9239 8.61732C10.8224 8.37229 10.6277 8.17761 10.3827 8.07612C10.1989 8 9.96594 8 9.5 8C9.03406 8 8.80109 8 8.61732 8.07612C8.37229 8.17761 8.17761 8.37229 8.07612 8.61732ZM13.0761 8.61732C13 8.80109 13 9.03406 13 9.5V14.5C13 14.9659 13 15.1989 13.0761 15.3827C13.1776 15.6277 13.3723 15.8224 13.6173 15.9239C13.8011 16 14.0341 16 14.5 16C14.9659 16 15.1989 16 15.3827 15.9239C15.6277 15.8224 15.8224 15.6277 15.9239 15.3827C16 15.1989 16 14.9659 16 14.5V9.5C16 9.03406 16 8.80109 15.9239 8.61732C15.8224 8.37229 15.6277 8.17761 15.3827 8.07612C15.1989 8 14.9659 8 14.5 8C14.0341 8 13.8011 8 13.6173 8.07612C13.3723 8.17761 13.1776 8.37229 13.0761 8.61732Z"
fill="#EFF1FA"
></path>
</g>
</svg>
</button>
<button class="video_fullscreen" @click="${this.fullscreenVideo}">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M23 4C23 2.34315 21.6569 1 20 1H16C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 21.4477 9 22 9C22.5523 9 23 8.55228 23 8V4Z"
fill="#fff"
></path>
<path
d="M23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16V20C21 20.5523 20.5523 21 20 21H16C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23H20C21.6569 23 23 21.6569 23 20V16Z"
fill="#fff"
></path>
<path
d="M4 21H8C8.55228 21 9 21.4477 9 22C9 22.5523 8.55228 23 8 23H4C2.34315 23 1 21.6569 1 20V16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16V20C3 20.5523 3.44772 21 4 21Z"
fill="#fff"
></path>
<path
d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8L3 4C3 3.44772 3.44772 3 4 3H8C8.55228 3 9 2.55228 9 2C9 1.44772 8.55228 1 8 1H4C2.34315 1 1 2.34315 1 4V8Z"
fill="#fff"
></path>
</g>
</svg>
</button>
</div>
</div>
</div>
`;
}
}
customElements.define('video-message', VideoMessageBubble);
//# sourceMappingURL=VideoMessageBubble-258cc9fe.js.map