### Configure and Control Auto-Play Slideshow in TypeScript Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Manages the automatic cycling of images in a slideshow. It starts the slideshow with a configurable interval and provides functionality to stop it. This feature is visible in fullscreen view when the auto-play interval is set greater than zero. ```typescript startAutoPlay() { const interval = this.plugin.settings.autoPlayInterval; if (interval > 0) { this.autoPlayTimer = window.setTimeout(() => { const nextIndex = (this.currentIndex + 1) % this.mediaUrls.length; this.showMedia(nextIndex); }, interval * 1000); this.isAutoPlaying = true; } } stopAutoPlay() { if (this.autoPlayTimer) { window.clearTimeout(this.autoPlayTimer); this.autoPlayTimer = null; } this.isAutoPlaying = false; } ``` -------------------------------- ### Gallery Block with Parameters Markdown Source: https://github.com/devon22/obsidian-mediaviewer/blob/main/README.md This markdown syntax demonstrates how to create a gallery block with additional parameters to customize its appearance and behavior. Parameters include title, size, add button visibility, pagination, alt text, thumbnail images, and filtering. ```markdown ```gallery size: small addButton: true title: gallery alt: image1 ![[image1.jpg]] alt: image2 ![[image2.jpg]] alt: image3 ![[image3.jpg]] ![[video.mp4]] img: image4.jpg [[note]] ``` ``` -------------------------------- ### Gallery Block Syntax - Markdown Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Demonstrates the custom markdown syntax for creating a media gallery within an Obsidian note. This block renders images, videos, and note links in a responsive grid. It supports various parameters like title, size, add button, and pagination, along with custom attributes for individual items such as alt text and custom thumbnails. ```markdown ```gallery title: My Photo Gallery size: medium addButton: true pagination: 20 alt: Beach sunset ![[vacation/sunset.jpg]] alt: Mountain view ![[vacation/mountains.jpg]] ![[vacation/video.mp4]] img: thumbnail.jpg [[My Travel Notes]] ``` ``` -------------------------------- ### Create Gallery Block Markdown Source: https://github.com/devon22/obsidian-mediaviewer/blob/main/README.md This markdown syntax is used to create a gallery block within an Obsidian note. It allows for the inclusion of images, videos, and links to other notes, displayed in a grid format. ```markdown ```gallery ![[image1.jpg]] ![[image2.jpg]] ![[image3.jpg]] ![[video.mp4]] [[note]] ``` ``` -------------------------------- ### Full Screen Modal Navigation Controls (TypeScript) Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Handles navigation within the full-screen media viewer using keyboard shortcuts, mouse wheel, touch gestures, and clickable areas. It includes specific controls for video playback and media switching. ```typescript // Keyboard navigation this.scope.register(null, 'ArrowLeft', (evt) => { if (evt.ctrlKey && !this.isImage) { // Ctrl+Left: Rewind video 5 seconds this.fullVideo.currentTime = Math.max(0, this.fullVideo.currentTime - 5); } else { // Left arrow: Previous media this.showPrevMedia(); } }); this.scope.register(null, 'ArrowRight', (evt) => { if (evt.ctrlKey && !this.isImage) { // Ctrl+Right: Fast forward video 5 seconds this.fullVideo.currentTime += 5; } else { // Right arrow: Next media this.showNextMedia(); } }); // Escape or ArrowDown: Close fullscreen view // Mouse wheel: Navigate between media (when not zoomed) // Click on image: Toggle zoom in/out // Touch swipe: Navigate on mobile devices ``` -------------------------------- ### Open Media Viewer Command - TypeScript Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Registers a command to open the full-screen media browser. This command scans the current note for embedded media files (images, videos, audio) and displays them as thumbnails. It uses regex to identify Obsidian internal links and standard markdown image syntax. Supported formats include common image, video, and audio file types. ```typescript this.addCommand({ id: 'open-media-viewer', name: 'Open Media Viewer', callback: () => { const modal = new FullScreenModal(this.app, this, 'command'); modal.open(); } }); // The modal scans for media using regex patterns: // - Obsidian internal links: ![[image.jpg]] // - Standard markdown: ![alt](path/to/image.jpg) // Supported formats: jpg, jpeg, png, gif, webp, mp4, mkv, mov, webm, mp3, m4a, flac, ogg, wav, 3gp ``` -------------------------------- ### Define Plugin Settings Interface (TypeScript) Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Defines the structure for the MediaViewer plugin's settings, including options for media display, deletion, and gallery customization. These settings control various aspects of the plugin's behavior. ```typescript interface MediaViewSettings { showImageInfo: boolean; // Show filename and dimensions in fullscreen allowMediaDeletion: boolean; // Enable delete button in media viewer autoOpenFirstImage: boolean; // Auto-open first image when viewer opens openMediaBrowserOnClick: boolean; // Click images to open media browser disableClickToOpenMediaOnGallery: boolean; // Disable click behavior in galleries muteVideoOnOpen: boolean; // Mute videos when opened galleryGridSize: string; // Default grid size: 'small' | 'medium' | 'large' galleryGridSizeSmall: number; // Small grid width in pixels (default: 100) galleryGridSizeMedium: number; // Medium grid width in pixels (default: 150) galleryGridSizeLarge: number; // Large grid width in pixels (default: 200) itemsPerPage: number; // Default pagination (0 for no pagination) insertAtEnd: boolean; // Insert new images at end of gallery displayOriginalSize: boolean; // Display small images at original size autoPlayInterval: number; // Slideshow interval in seconds (0 to disable) } // Default settings const DEFAULT_SETTINGS: MediaViewSettings = { showImageInfo: true, allowMediaDeletion: false, autoOpenFirstImage: false, openMediaBrowserOnClick: true, disableClickToOpenMediaOnGallery: false, muteVideoOnOpen: false, galleryGridSize: 'medium', galleryGridSizeSmall: 100, galleryGridSizeMedium: 150, galleryGridSizeLarge: 200, itemsPerPage: 0, insertAtEnd: true, displayOriginalSize: false, autoPlayInterval: 0 }; ``` -------------------------------- ### Image Upload Modal Implementation (TypeScript) Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Implements an image upload modal for gallery blocks, supporting drag-and-drop, file picker, and clipboard paste. It manages file uploads to the vault's attachment folder and updates the gallery automatically. ```typescript // Create upload modal for a gallery element const modal = new ImageUploadModal( this.app, this.plugin, galleryDiv, // HTMLElement with data-gallery-id attribute sourcePath // Optional: path to the source markdown file ); modal.open(); // Supported upload methods: // - Drag and drop files onto the modal // - Click to open file picker (accepts image/*, video/*, audio/*) // - Paste from clipboard (images or URLs) // Files are saved to the vault's configured attachment folder // Gallery block is automatically updated with new media links ``` -------------------------------- ### Generate Gallery Block Command - TypeScript Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Registers a command to programmatically create or modify a gallery block. This command identifies selected text containing image links, opens a modal for configuration, and then replaces the selected text with the generated gallery block markdown. It ensures an active markdown view is present before execution. ```typescript this.addCommand({ id: 'generategallery', name: 'Generate Gallery Block', checkCallback: (checking) => { const activeView = this.app.workspace.getActiveViewOfType(MarkdownView); if (activeView) { if (!checking) { const editor = activeView.editor; const selectedText = editor.getSelection(); const modal = new GalleryBlockGenerateModal(this.app, selectedText); modal.onConfirm = (newGalleryBlock: string) => { editor.replaceSelection(newGalleryBlock); }; modal.open(); } return true; } return false; } }); // Input: Selected text with image links // Output: Formatted gallery block with configuration options ``` -------------------------------- ### Implement Internationalization (i18n) with TypeScript Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Provides internationalization support by detecting the user's language from Obsidian's locale settings. It uses a translation function `t` to retrieve localized strings, falling back to English if a translation is not found for the current language. Supported languages include English, Traditional Chinese, Simplified Chinese, and Japanese. ```typescript import { t } from './translations'; // Usage in code new Notice(t('no_media_found')); button.setText(t('add_image')); setting.setName(t('allow_media_deletion')); // Supported languages: // - English ('en') // - Traditional Chinese ('zh-TW') // - Simplified Chinese ('zh') // - Japanese ('ja') // Translation function export function t(key: string): string { const lang = window.localStorage.getItem('language'); const translations = TRANSLATIONS[lang] || TRANSLATIONS['en']; return translations[key] || key; } ``` -------------------------------- ### Reorder Gallery Items Persistently in TypeScript Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Enables reordering of gallery items within a markdown file. It supports swapping items using hover controls or a context menu, and persists these changes back to the source markdown file. The function `swapGalleryItems` handles the logic for updating the file content. ```typescript async swapGalleryItems( galleryId: string, item1: GalleryItem, item2: GalleryItem, sourcePath?: string, currentPage?: number ) { const activeFile = this.app.vault.getAbstractFileByPath(sourcePath); const content = await this.app.vault.read(activeFile); // Find gallery block by ID (hash of content) const galleryBlockRegex = /```gallery\n([\s\S]*?)```/g; // ... locate matching block and swap line ranges await this.app.vault.process(activeFile, (fileContent) => { // Reconstruct content with swapped items return updatedContent; }); } ``` -------------------------------- ### Register Gallery Block Processor (TypeScript) Source: https://context7.com/devon22/obsidian-mediaviewer/llms.txt Registers a markdown code block processor for 'gallery' blocks. This processor handles the rendering and interactivity of galleries within Obsidian, including drag-and-drop, reordering, and pagination. ```typescript // Register the gallery block processor const galleryProcessor = new GalleryBlock(this.app, this); this.registerMarkdownCodeBlockProcessor("gallery", (source, el, ctx) => galleryProcessor.processGalleryBlock(source, el, ctx?.sourcePath) ); // The processor: // 1. Parses gallery content for configuration and media items // 2. Creates responsive grid layout with CSS Grid // 3. Supports drag-and-drop file uploads // 4. Enables reordering via hover controls or context menu // 5. Handles pagination when item count exceeds threshold ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.