feat: update charity project assets, add livestream media, and clean up temporary migration scripts
This commit is contained in:
@@ -0,0 +1,155 @@
|
||||
import java.sql.Connection;
|
||||
import java.sql.DriverManager;
|
||||
import java.sql.PreparedStatement;
|
||||
|
||||
public class UpdateLivestreamTemplate4 {
|
||||
public static void main(String[] args) {
|
||||
try {
|
||||
Class.forName("oracle.jdbc.OracleDriver");
|
||||
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521/sisvietnam", "sisvietnam", "sisvietnam");
|
||||
|
||||
// Re-apply the URL to be just the embed URL without autoplay so we can append it cleanly in data-src
|
||||
PreparedStatement updatePost = conn.prepareStatement(
|
||||
"UPDATE sis_post SET meta_description = ? WHERE slug = 'sis-vi-suc-khoe-cong-dong-ky-134'"
|
||||
);
|
||||
updatePost.setString(1, "https://www.youtube.com/embed/j63kT9Bjrb4?si=N5JwIcuRn-iRxkYu");
|
||||
updatePost.executeUpdate();
|
||||
|
||||
// We ensure it is just the standard embed without JS tampering
|
||||
String htmlTemplate =
|
||||
"<style>\n" +
|
||||
" .tabbed-media-content-media-item { width: 100%; aspect-ratio: 16/9; position: relative; display: block; background: #000; overflow: hidden; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }\n" +
|
||||
" .tabbed-media-content-media-item .f--video-embed iframe { width: 100%; height: 100%; border: none; }\n" +
|
||||
" .tabbed-media-content-media-item .f--image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }\n" +
|
||||
" .tabbed-media-content-media-item .f--button { z-index: 10; }\n" +
|
||||
"</style>\n" +
|
||||
"<div class=\"cc--component-container cc--tabbed-media-content\" style=\"background-color: var(--color-gray-100);\">\n" +
|
||||
" <div class=\"c--component c--tabbed-media-content\">\n" +
|
||||
" <div class=\"tabbed-media-content-text-col\">\n" +
|
||||
" <div data-component-id=\"umass_base:section-title\" class=\"f--section-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-brand);\">LiveStream</h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:tabbed-container\" data-once=\"tabbed-container\">\n" +
|
||||
" <div class=\"tab-labels-container\" role=\"tablist\">\n" +
|
||||
" <div class=\"tab-labels-inner\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <a href=\"#tabbed-content-{{index}}\" class=\"tab-label link-context-dark\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tabbed-content-{{index}}\">{{title}}</a>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tab-content-container\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tab-content-panel\" id=\"tabbed-content-{{index}}\" role=\"tabpanel\" aria-live=\"polite\">\n" +
|
||||
" <div class=\"f--field f--cta-title\">\n" +
|
||||
" <h2 style=\"color: var(--color-black);\"> {{excerpt}} </h2>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:description\" class=\"f--description\">\n" +
|
||||
" <div style=\"color:var(--color-black);\">{{content}}</div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"cta-container\">\n" +
|
||||
" <div class=\"f--field f--button\">\n" +
|
||||
" <a href=\"/post/{{slug}}\" class=\"button-primary button-context-light \" aria-label=\"Tìm Hiểu Thêm\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-text\"> Tìm Hiểu Thêm </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"tabbed-media-content-media-col\">\n" +
|
||||
" {{#each livestream_posts}}\n" +
|
||||
" <div class=\"tabbed-media-content-media-item with-video\" data-tab-id=\"tabbed-content-{{index}}\">\n" +
|
||||
" <div class=\"f--field f--image\">\n" +
|
||||
" <img src=\"{{featuredImageUrl}}\" data-src=\"{{featuredImageUrl}}\" class=\"lazyload\" alt=\"{{title}}\" style=\"width:100%;height:100%;object-fit:cover;\">\n" +
|
||||
" </div>\n" +
|
||||
" <div class=\"f--field f--button\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;\">\n" +
|
||||
" <a href=\"#\" class=\"button-play button-context-light \" aria-label=\"Play video\" data-component-id=\"umass_base:button\">\n" +
|
||||
" <span class=\"button-icon button-icon-play\">\n" +
|
||||
" <svg width=\"18\" height=\"27\" viewBox=\"0 0 18 27\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
|
||||
" <path d=\"M18 13.5L0 0V27L18 13.5Z\"></path>\n" +
|
||||
" </svg>\n" +
|
||||
" </span>\n" +
|
||||
" <span class=\"button-text visually-hidden\"> Play </span>\n" +
|
||||
" </a>\n" +
|
||||
" </div>\n" +
|
||||
" <div data-component-id=\"umass_base:video-embed\" class=\"f--field f--video-embed\">\n" +
|
||||
" <iframe title=\"YouTube video player\" data-src=\"{{metaDescription}}&autoplay=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
" {{/each}}\n" +
|
||||
" </div>\n" +
|
||||
" </div>\n" +
|
||||
"</div>\n" +
|
||||
"<script>\n" +
|
||||
" document.addEventListener(\"DOMContentLoaded\", function() {\n" +
|
||||
" var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id=\"tabbed-content-0\"]');\n" +
|
||||
" if(tabs.length > 0) tabs[0].classList.add('is-active');\n" +
|
||||
" \n" +
|
||||
" var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');\n" +
|
||||
" if(panels.length > 0) panels[0].classList.add('is-active');\n" +
|
||||
"\n" +
|
||||
" var labels = document.querySelectorAll('a.tab-label[aria-controls=\"tabbed-content-0\"]');\n" +
|
||||
" if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');\n" +
|
||||
"\n" +
|
||||
" var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');\n" +
|
||||
" allLabels.forEach(function(label) {\n" +
|
||||
" label.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });\n" +
|
||||
" this.setAttribute('aria-selected', 'true');\n" +
|
||||
" \n" +
|
||||
" var targetId = this.getAttribute('aria-controls');\n" +
|
||||
" document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });\n" +
|
||||
" document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) { \n" +
|
||||
" m.classList.remove('is-active'); \n" +
|
||||
" var img = m.querySelector('.f--image');\n" +
|
||||
" if(img) img.style.display = 'block';\n" +
|
||||
" var btnContainer = m.querySelector('.f--field.f--button');\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'block';\n" +
|
||||
" var iframe = m.querySelector('iframe');\n" +
|
||||
" if(iframe) iframe.removeAttribute('src'); // Stop video playing if they switch tabs\n" +
|
||||
" });\n" +
|
||||
" \n" +
|
||||
" var targetPanel = document.getElementById(targetId);\n" +
|
||||
" if(targetPanel) targetPanel.classList.add('is-active');\n" +
|
||||
" var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id=\"' + targetId + '\"]');\n" +
|
||||
" if(targetMedia) targetMedia.classList.add('is-active');\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"\n" +
|
||||
" var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');\n" +
|
||||
" playButtons.forEach(function(btn) {\n" +
|
||||
" btn.addEventListener('click', function(e) {\n" +
|
||||
" e.preventDefault();\n" +
|
||||
" var mediaItem = this.closest('.tabbed-media-content-media-item');\n" +
|
||||
" var img = mediaItem.querySelector('.f--image');\n" +
|
||||
" var btnContainer = mediaItem.querySelector('.f--field.f--button');\n" +
|
||||
" var iframe = mediaItem.querySelector('iframe');\n" +
|
||||
" \n" +
|
||||
" if(img) img.style.display = 'none';\n" +
|
||||
" if(btnContainer) btnContainer.style.display = 'none';\n" +
|
||||
" if(iframe && iframe.getAttribute('data-src')) {\n" +
|
||||
" iframe.setAttribute('src', iframe.getAttribute('data-src'));\n" +
|
||||
" }\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
" });\n" +
|
||||
"</script>";
|
||||
|
||||
PreparedStatement updateTemplate = conn.prepareStatement(
|
||||
"UPDATE sis_component_template SET html_template = ? WHERE slug = 'tabbed-livestream'"
|
||||
);
|
||||
updateTemplate.setString(1, htmlTemplate);
|
||||
updateTemplate.executeUpdate();
|
||||
|
||||
System.out.println("Update complete!");
|
||||
|
||||
conn.close();
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user