nodes/niknah-presentation-ComfyUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sizing of PresentaionHistory & audio / video outputs.

Browse Source
This commit is contained in:
niknah
2025-10-29 09:35:40 +11:00
parent 058686fe3f
commit e031f58cc3
2 changed files with 71 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation-site/components/PresentationHistory.vue
+33 -21
View File
@@ -115,17 +115,24 @@ onMounted(async () => {
<div ref="listElem" class="pres-history-list pres-event-update-history" @update-history="updateHistory">
<div v-for="historyItem in historyList" :key="historyItem.id" :data-hash="historyItem.hash" class="pres-history-item" @click="clickItem(historyItem)">
<div v-if="historyItem.outputs.length > 0" class="pres-history-preview">
<span v-if="historyItem.outputs.length > 1" class="pres-history-count">{{ historyItem.outputs.length }}</span>
<img v-if="/\.(png|gif|avif|webp|jpg|jpeg|bmp|ico)$/i.exec(historyItem.outputs[0].filename)" class="pres-history-media pres-history-image lazy" :src="historyItem.outputs[0].previewURL" />
<div v-if="/\.(png|gif|avif|webp|jpg|jpeg|bmp|ico)$/i.exec(historyItem.outputs[0].filename)" class="pres-history-media-wrapper">
<img class="pres-history-media pres-history-image lazy" :src="historyItem.outputs[0].previewURL" />
</div>
<div v-else-if="/\.(mp4|avi|webm|mkv|mov|wmv)$/i.exec(historyItem.outputs[0].filename)" class='pres-history-media-wrapper'>
<div class='pres-history-media-toolbar'><a @click="clickItem(historyItem)"></a></div>
<video class="pres-history-media pres-history-video lazy" :data-src="historyItem.outputs[0].viewURL" controls ></video>
<!--
<video class="pres-history-media pres-history-video" :src="historyItem.outputs[0].viewURL" controls ></video>
-->
<PresentationHistoryToolbar :historyItem="historyItem" />
</div>
<div v-else-if="/\.(mp3|wav|flac|ogg|aac|wma|aiff|m4a)$/i.exec(historyItem.outputs[0].filename)" class='pres-history-media-wrapper'>
<div class='pres-history-media-toolbar'><a @click="clickItem(historyItem)"></a></div>
<audio class="pres-history-media pres-history-audio" :src="historyItem.outputs[0].viewURL" controls></audio>
<audio class="pres-history-media pres-history-audio" :src="historyItem.outputs[0].viewURL" controls></audio>
<PresentationHistoryToolbar :historyItem="historyItem" />
</div>
<a v-else :src="historyItem.outputs[0].viewURL">Download</a>
<div v-else>
<a target='_blank' :href="historyItem.outputs[0].viewURL">Download</a>
</div>
<span v-if="historyItem.outputs.length > 1" class="pres-history-count">{{ historyItem.outputs.length }}</span>
</div>
</div>
</div>
@@ -145,26 +152,38 @@ onMounted(async () => {
overflow: scroll;
}
.pres-history-count {
position: absolute;
margin-left: 6px;
}
.pres-history-preview {
overflow: hidden;
border-radius: var(--border-ruler);
border: 1px solid #888;
margin: 2px;
display: grid;
}
.pres-history-preview .pres-history-media
.pres-history-count {
margin: 4px;
opacity: 0.5;
color: #000;
background-color: #fff;
padding: 1px 4px;
border-radius: 5px;
grid-area: 1/1/1/1;
width: fit-content;
height: fit-content;
}
.pres-history-media-wrapper {
grid-area: 1/1/1/1;
}
.pres-history-media
{
width: 24vw;
}
.pres-history-preview .pres-history-image,
.pres-history-preview .pres-history-image
{
min-height: 24vw;
min-height: 18vw;
}
.pres-history-item {
@@ -195,12 +214,5 @@ onMounted(async () => {
display: inline-block;
}
}
.pres-history-media-toolbar a {
cursor: pointer;
width: 24px;
height: 24px;
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 21C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5H20C20.5523 5 21 5.44772 21 6V9H19V7H11.5858L9.58579 5H4V16.998L5.5 11H22.5L20.1894 20.2425C20.0781 20.6877 19.6781 21 19.2192 21H3ZM19.9384 13H7.06155L5.56155 19H18.4384L19.9384 13Z'%3E%3C/path%3E%3C/svg%3E");
}
</style>
presentation-site/components/PresentationHistoryToolbar.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup>
const props = defineProps(['historyItem']);
function clickParent(elem) {
let p = elem.parentNode;
while(p) {
if (p.classList.has('pres-history-item')) {
p.click();
break;
}
p = elem.parentNode;
}
}
</script>
<template>
<div class='pres-history-media-toolbar'>
<a class='pres-history-open' @click="clickParent(this)"></a>
<a class='pres-history-download' target='_blank' :href='historyItem.outputs[0].viewURL + "&download=1"'></a>
</div>
</template>
<style>
.pres-history-media-toolbar a {
cursor: pointer;
width: 24px;
height: 24px;
display: inline-block;
}
.pres-history-media-toolbar .pres-history-open {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 21C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5H20C20.5523 5 21 5.44772 21 6V9H19V7H11.5858L9.58579 5H4V16.998L5.5 11H22.5L20.1894 20.2425C20.0781 20.6877 19.6781 21 19.2192 21H3ZM19.9384 13H7.06155L5.56155 19H18.4384L19.9384 13Z'%3E%3C/path%3E%3C/svg%3E");
}
.pres-history-media-toolbar .pres-history-download {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13 10H18L12 16L6 10H11V3H13V10ZM4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19Z'%3E%3C/path%3E%3C/svg%3E");
}
</style>