VGFilePreview

Модуль для быстрого просмотра файла

Медиа

Изображения, inline-аудио и видео с навигацией по соседним файлам.

Изображение и полноэкранный просмотр

Миниатюра появляется в поле icon, а кнопка, миниатюра предпросмотра и имя открывают общий VGModal.

HTML 
<div class="file" data-vg-filepreview="/files/tradein.jpg" data-fields="icon,name,size,preview,download">
  <div class="icon"></div>
  <button class="name" type="button"></button>
  <span class="size"></span>
  <div class="preview"></div>
  <div class="download"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element);
});
CSS 
.file-list {
  display: grid;
  gap: 0.75rem;
}

Inline-аудио

Play/pause встроен в поле name. Одновременно играет только одна карточка, прогресс хранится в --vg-filepreview-audio-inline-progress.

HTML 
<div data-vg-filepreview="/files/HUMBLE.mp3" data-fields="icon,name,original_name,download" data-name="HUMBLE">
  <div class="icon"></div>
  <button class="name" type="button"></button>
  <span class="original_name"></span>
  <div class="download"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element);
});
CSS 
.file-list {
  display: grid;
  gap: 0.75rem;
}

Видео-плейлист

Рендерер собирает соседние валидные видео. В модальном окне доступны предыдущий/следующий и клавиши ArrowLeft/ArrowRight; два пункта используют один локальный ролик для проверки навигации.

HTML 
<div data-vg-filepreview="/files/video.mp4?clip=1" data-fields="icon,name,preview" data-name="Фрагмент 1">
  <div class="icon"></div><button class="name" type="button"></button><div class="preview"></div>
</div>
<div data-vg-filepreview="/files/video.mp4?clip=2" data-fields="icon,name,preview" data-name="Фрагмент 2">
  <div class="icon"></div><button class="name" type="button"></button><div class="preview"></div>
</div>
JavaScript 
import { VGFilePreview } from 'vgapp';

document.querySelectorAll('[data-vg-filepreview]').forEach((element) => {
  VGFilePreview.init(element);
});
CSS 
.file-list {
  display: grid;
  gap: 0.75rem;
}