File size: 2,010 Bytes
83dfbe9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<script lang="ts">
export let value: any;
function formatDuration(duration: number): string {
const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60);
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
</script>
<div class="example-container">
{#if value && value.video}
<div class="video-thumbnail">
<video
src={value.video.path}
controls={false}
muted
style="width: 100%; height: 60px; object-fit: cover;"
>
</video>
<div class="overlay">
<span class="duration">
{value.duration ? formatDuration(value.duration) : 'Recording'}
</span>
<span class="format">
{value.video.orig_name?.split('.').pop()?.toUpperCase() || 'VIDEO'}
</span>
</div>
</div>
{:else}
<div class="placeholder">
📹 Screen Recording
</div>
{/if}
</div>
<style>
.example-container {
width: 100%;
height: 80px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.video-thumbnail {
position: relative;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 4px 8px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.duration, .format {
color: white;
font-size: 10px;
font-weight: bold;
}
.placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #f0f0f0;
color: #666;
font-size: 12px;
}
</style>
|