Skip to content

Commit

Permalink
media v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ledangtrung
ledangtrung committed Dec 2, 2024
1 parent c05cd80 commit e4bfdd8
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 1 deletion.
2 changes: 1 addition & 1 deletion js/WorkflowAI-H24-scr501-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ <h2 class="dmview-title">##store_lb##</h2>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"
defer></script>
<script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider.js">defer ></script>
<script src="https://therealtimex.github.io/rtlibrary/js/mediaSlider_v2.js">defer ></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const listFiles = "https://img.icons8.com/ios-filled/50/youtube-squared.png;https://img.icons8.com/arcade/64/youtube-squared.png;https://img.icons8.com/officel/50/facebook-new.png;https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf;https://filesamples.com/samples/document/docx/sample3.docx;https://www.w3resource.com/python-exercises/pandas/excel/SaleData.xlsx;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
Expand Down
172 changes: 172 additions & 0 deletions js/mediaSlider_v2.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
class MediaSlider {
constructor(containerId, mediaUrls) {
this.containerId = containerId;
this.mediaUrls = Array.isArray(mediaUrls) ? mediaUrls : []; // Ensure mediaUrls is an array
this.init();
}

init() {
this.injectStyles();
this.createSlider();
this.initializeSwiper();
}

injectStyles() {
const styles = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<style>
.swiper {
width: 100%;
height: 100%;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 2px var(--color_theme_shadow);
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: var(--color_theme_surface);
}
.swiper-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide audio,
.swiper-slide video {
max-width: 100%;
}
.swiper-slide iframe {
width: 100%;
height: 100%;
border: none;
}
.document-viewer {
width: 100%;
height: 100%;
overflow: auto;
}
.swiper-button-next,
.swiper-button-prev {
background: var(--color_theme_background);
padding: 10px;
border-radius: 50%;
color: var(--color_theme_text_primary);
width: 25px;
height: 25px;
transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: var(--color_theme_surface);
transform: scale(1.1);
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 20px;
font-weight: 700;
}
</style>
`;
document.head.insertAdjacentHTML('beforeend', styles);
}

detectMediaType(url) {
const extension = url.split('.').pop().toLowerCase();
const mediaTypes = {
'jpg': 'image',
'jpeg': 'image',
'png': 'image',
'gif': 'image',
'webp': 'image',
'avif': 'image',
'mp3': 'audio',
'm4a': 'audio',
'wav': 'audio',
'ogg': 'audio',
'mp4': 'video',
'webm': 'video',
'ogv': 'video',
'pdf': 'pdf',
'docx': 'office',
'xlsx': 'office',
'pptx': 'office'
};
return mediaTypes[extension] || 'unknown';
}

createMediaElement(url) {
if (!url) {
return `<i class="bi bi-file-earmark-x" title="Documents not available"></i>`;
}
const mediaType = this.detectMediaType(url);
switch(mediaType) {
case 'image':
return `<img src="${url}" alt="Slide">`;
case 'audio':
return `<audio controls><source src="${url}" type="audio/${url.split('.').pop()}"></audio>`;
case 'video':
return `<video controls width="100%"><source src="${url}" type="video/${url.split('.').pop()}"></video>`;
case 'pdf':
return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
case 'office':
return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
default:
return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true"></iframe>`;
}
}

createSlider() {
if (this.mediaUrls.length === 0) {
document.getElementById(this.containerId).innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 40vh; font-weight: bold; color: #666;">📄 No documents 📋</div>';
return; // Exit if there are no media URLs
}

const sliderHtml = `
<div class="swiper">
<div class="swiper-wrapper">
${this.mediaUrls.map(url => `
<div class="swiper-slide">
${this.createMediaElement(url)}
</div>
`).join('')}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
`;
document.getElementById(this.containerId).innerHTML = sliderHtml;
}

initializeSwiper() {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js';
script.onload = () => {
new Swiper('.swiper', {
loop: true,
autoplay: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
speed: 900,
preloadImages: true,
watchSlidesProgress: true
});
};
document.body.appendChild(script);
}
}

0 comments on commit e4bfdd8

Please sign in to comment.