Greasy Fork is available in English.

video

video list

Ezt a szkriptet nem ajánlott közvetlenül telepíteni. Ez egy könyvtár más szkriptek számára, amik tartalmazzák a // @require https://update.greasyfork.org/scripts/498124/1396763/video.js hivatkozást.

  1. function generateJsonIndexContent(finalData) {
  2. return `
  3. <!DOCTYPE html>
  4. <html lang="en" data-theme="light">
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>视频列表</title>
  9. <style>
  10. body {
  11. font-family: Arial, sans-serif;
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. padding: 20px;
  16. overflow-x: hidden;
  17. }
  18. .video-row {
  19. display: flex;
  20. flex-wrap: wrap;
  21. justify-content: space-between;
  22. width: 100%;
  23. max-width: 1200px;
  24. margin-bottom: 20px;
  25. }
  26. .notification {
  27. display: none;
  28. position: fixed;
  29. top: 50%;
  30. left: 50%;
  31. transform: translate(-50%, -50%);
  32. background-color: rgba(0, 0, 0, 0.7);
  33. color: white;
  34. padding: 10px;
  35. z-index: 1000;
  36. }
  37. .video {
  38. width: 48%;
  39. position: relative;
  40. max-width: 48%;
  41. position: relative;
  42. cursor: pointer;
  43. display: flex;
  44. flex-direction: column;
  45. align-items: center;
  46. margin-bottom: 20px;
  47. }
  48. .network-label {
  49. position: absolute;
  50. bottom: 4px;
  51. right: 4px;
  52. background-color: rgba(0, 0, 0, 0.7);
  53. color: white;
  54. padding: 2px 4px;
  55. font-size: 10px;
  56. }
  57. .video img {
  58. width: 100%;
  59. height: auto;
  60. }
  61. .video video {
  62. width: 100%;
  63. height: auto;
  64. }
  65. .video-title {
  66. margin: 10px 0;
  67. font-weight: bold;
  68. text-align: center;
  69. }
  70. .video-mark {
  71. color: gray;
  72. text-align: center;
  73. }
  74. @media (min-width: 768px) {
  75. .video {
  76. width: 23.5%;
  77. max-width: 23.5%;
  78. }
  79. }
  80. .sidebar {
  81. position: fixed;
  82. right: -300px;
  83. top: 0;
  84. width: 300px;
  85. height: 100%;
  86. background-color: #f1f1f1;
  87. box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  88. transition: right 0.3s;
  89. display: flex;
  90. flex-direction: column;
  91. padding: 20px;
  92. }
  93. .sidebar.open {
  94. right: 0;
  95. }
  96. .sidebar-button {
  97. position: fixed;
  98. right: -70px; /* 贴边隐藏按钮,此处可以调整隐藏时的偏移量 */
  99. top: 95%; /* 垂直居中 */
  100. transform: translateY(-50%); /* 将按钮垂直居中 */
  101. background-color: #4CAF50;
  102. color: white;
  103. border: none;
  104. padding: 10px 15px;
  105. cursor: pointer;
  106. z-index: 1000;
  107. transition: right 0.3s ease; /* 添加过渡效果 */
  108. }
  109. .sidebar-button:hover,
  110. .sidebar-button:focus {
  111. right: 20px; /* 悬停或者焦点时,展示完整按钮 */
  112. }
  113. .sidebar-content button {
  114. background-color: #4CAF50;
  115. color: white;
  116. border: none;
  117. padding: 10px;
  118. margin: 10px 0;
  119. cursor: pointer;
  120. }
  121.  
  122. .modal {
  123. display: none;
  124. position: fixed;
  125. z-index: 1;
  126. left: 0;
  127. top: 0;
  128. width: 100%;
  129. height: 100%;
  130. overflow: auto;
  131. background-color: rgba(0,0,0,0.4);
  132. }
  133. .modal-content.dark-mode {
  134. background-color: var(--background-dark);
  135. color: var(--text-dark);
  136. border-color: var(--border-dark);
  137. }
  138. .modal-content {
  139. background-color: var(--background-light);
  140. margin: 15% auto;
  141. padding: 20px;
  142. border: 1px solid #888;
  143. width: 80%;
  144. max-width: 600px;
  145. border-radius: 8px;
  146. color: var(--text-light);
  147. }
  148. .modal-close {
  149. color: #aaa;
  150. float: right;
  151. font-size: 28px;
  152. font-weight: bold;
  153. }
  154.  
  155.  
  156. .detail-button {
  157. background-color: var(--button-background-light); /* 按钮背景颜色 */
  158. color: var(--button-text-light); /* 文字颜色 */
  159. border: none; /* 去掉边框 */
  160. padding: 10px 20px; /* 按钮内边距 */
  161. cursor: pointer; /* 光标样式 */
  162. outline: none; /* 去掉点击时的边框 */
  163. border-radius: 4px; /* 圆角 */
  164. transition: background-color 0.3s ease, color 0.3s ease; /* 过渡效果 */
  165. }
  166.  
  167. [data-theme="dark"] .detail-button {
  168. background-color: var(--button-background-dark); /* 按钮背景颜色 */
  169. color: var(--button-text-dark); /* 文字颜色 */
  170. }
  171. [data-theme="light"] .detail-button {
  172. background-color: var(--button-background-light); /* 按钮背景颜色 */
  173. color: var(--button-text-light); /* 文字颜色 */
  174. }
  175. .detail-button:hover {
  176. background-color: #45a049; /* 鼠标悬停时的背景颜色 */
  177. }
  178.  
  179. .detail-button:focus {
  180. background-color: #388e3c; /* 获得焦点时的背景颜色 */
  181. }
  182. :root {
  183. --background-light: #ffffff;
  184. --background-dark: #000000;
  185. --text-light: #000000;
  186. --text-dark: #ffffff;
  187. --border-light: #cccccc;
  188. --border-dark: #333333;
  189. --modal-background-light: #fefefe;
  190. --modal-background-dark: #1c1c1c; /* 更深的黑色背景 */
  191. --button-background-light: #4CAF50;
  192. --button-background-dark: #444444;
  193. --button-text-light: white;
  194. --button-text-dark: white;
  195. --message-background-light: #f1f1f1;
  196. --message-background-dark: #333333; /* 更深的黑色背景 */
  197. --message-border-light: #ccc;
  198. --message-border-dark: #555; /* 边框颜色 */
  199.  
  200. }
  201.  
  202.  
  203. [data-theme="light"] {
  204. background-color: var(--background-light);
  205. color: var(--text-light);
  206. }
  207.  
  208. [data-theme="dark"] {
  209. background-color: var(--background-dark);
  210. color: var(--text-dark);
  211. }
  212.  
  213. [data-theme="light"] .sun {
  214. display: none;
  215. }
  216.  
  217. [data-theme="dark"] .moon {
  218. display: none;
  219. }
  220. [data-theme="light"] input, [data-theme="light"] button {
  221. background-color: #ffffff;
  222. border: 1px solid var(--border-light);
  223. color: var(--text-light);
  224. }
  225. [data-theme="dark"] .modal-content {
  226. background-color: var(--modal-background-dark);
  227. color: var(--text-dark);
  228. border-color: var(--border-dark);
  229. }
  230. .message {
  231. text-align: center;
  232. padding: 10px;
  233. margin-top: 20px;
  234. background-color: var(--message-background-light);
  235. border: 1px solid var(--message-border-light);
  236. transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  237. }
  238. [data-theme="dark"] .message {
  239. background-color: var(--message-background-dark);
  240. border-color: var(--message-border-dark);
  241. color: var(--text-dark);
  242. }
  243. [data-theme="dark"] input, [data-theme="dark"] button {
  244. background-color: #333333;
  245. border: 1px solid var(--border-dark);
  246. color: var(--text-dark);
  247. }
  248. .toggle {
  249. display: inline-flex;
  250. justify-content: center;
  251. align-items: center;
  252. width: 32px;
  253. height: 32px;
  254. border-radius: 4px;
  255. background-color: #fff;
  256. border: 1px solid #e2e8f0;
  257. cursor: pointer;
  258. position: fixed;
  259. top: 10px;
  260. right: 10px;
  261. }
  262.  
  263. </style>
  264. </head>
  265. <body>
  266. <button class="toggle">
  267. <svg class="sun" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
  268. <svg class="moon" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
  269. </button>
  270. <button class="sidebar-button" onclick="openModal()">备份信息</button>
  271.  
  272. <div id="video-container"></div>
  273. <!-- 通知窗口 -->
  274. <div class="notification" id="notification"></div>
  275.  
  276. <!-- 模态框 -->
  277. <div id="myModal" class="modal">
  278. <div class="modal-content">
  279. <span class="modal-close" onclick="closeMyModal()">&times;</span>
  280.  
  281. <button type="button" onclick="exportJson()">导出Json</button>
  282. <br><br>
  283. <h2>备份信息</h2>
  284. <p>备份数量: <span id="videoCount"></span></p>
  285. <p>备份时间: <span id="cstTime"></span></p>
  286. <p>备份地址: <a id="backupLink" href="#" target="_blank">访问</a></p>
  287. <p>联系作者: <a href="mailto:toniaiwanowskiskr47@gmail.com" target="_blank">人民的勤务员</a></p>
  288. </form>
  289. </div>
  290. </div>
  291.  
  292. <script>
  293. document.addEventListener('DOMContentLoaded', (event) => {
  294.  
  295.  
  296. function loadHighlightStyle() {
  297. const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  298. if (isDarkMode) {
  299.  
  300. toggleDarkMode2('dark');
  301. } else {
  302.  
  303. toggleDarkMode2('light');
  304. }
  305. }
  306.  
  307. const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  308. mediaQuery.addEventListener('change', loadHighlightStyle);
  309.  
  310. // Initial check
  311. loadHighlightStyle();
  312. });
  313. function toggleDarkMode2(mode) {
  314. const html = document.documentElement;
  315. const isDarkMode = html.getAttribute('data-theme') === 'dark';
  316. const newMode = mode || (isDarkMode ? 'light' : 'dark');
  317.  
  318. // 验证新模式是否为有效值
  319. if (newMode !== 'dark' && newMode !== 'light') return;
  320.  
  321. // 设置新的主题模式
  322. html.setAttribute('data-theme', newMode);
  323.  
  324. // 更新URL中的主题参数,不重新加载页面
  325. const url = new URL(window.location);
  326. url.searchParams.set('theme', newMode);
  327. window.history.replaceState({}, '', url);
  328. }
  329. document.querySelector('.toggle').addEventListener('click', () => toggleDarkMode2());
  330. function exportJson() {
  331. const dataStr = JSON.stringify(jsonData, null, 4); // 将JSON数据转换为字符串格式,并进行格式化
  332. const blob = new Blob([dataStr], { type: 'application/json' }); // 创建一个Blob对象表示JSON数据
  333.  
  334. const url = URL.createObjectURL(blob); // 创建一个URL指向Blob对象
  335. const a = document.createElement('a'); // 创建一个<a>元素
  336. a.href = url; // 设置<a>元素的href属性为URL
  337. a.download = 'settings.json'; // 设置下载文件的名称
  338. a.click(); // 触发<a>元素的点击事件,从而下载文件
  339.  
  340. // 释放URL对象
  341. URL.revokeObjectURL(url);
  342. }
  343. function openModal() {
  344.  
  345. const modal = document.getElementById('myModal');
  346. modal.style.display = 'block';
  347. // 设置视频数量
  348. document.getElementById('videoCount').innerText = videoData.length;
  349.  
  350.  
  351.  
  352. // 设置备份时间(将 UTC 时间转为中国时间)
  353. const timestamp = new Date(jsonData.info.timestamp);
  354. const cstTime = timestamp.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
  355. cocstTime = document.getElementById('cstTime');
  356. cocstTime.textContent = cstTime
  357. const backupUrl = jsonData.info.inurl;
  358. const backupLink = document.getElementById('backupLink');
  359. backupLink.href = backupUrl;
  360. }
  361.  
  362. function closeMyModal() {
  363. const modal = document.getElementById('myModal');
  364. modal.style.display = 'none';
  365. }
  366. const jsonData = ${JSON.stringify(finalData, null, 4)};
  367.  
  368. const videoData = jsonData.video;
  369. let currentPage = 0;
  370. const pageSizeMobile = 12;
  371. const pageSizePC = 12;
  372. const pageSize = isPC() ? pageSizePC : pageSizeMobile;
  373. let isLoadingVideos = false;
  374. let allVideosLoaded = false;
  375. let firstLoad = true;
  376. function isPC() {
  377. return window.innerWidth >= 768;
  378. }
  379. const originalImages = new Map();
  380. const maxVideosOnMobile = 12; // 设置移动设备上同时播放的视频最大数量
  381. let currentVideosOnMobile = 0;
  382.  
  383. function isMobileDevice() {
  384. return /Mobi|Android/i.test(navigator.userAgent);
  385. }
  386.  
  387. function playVideo(element) {
  388. const imgElement = element.querySelector('img');
  389. const videoUrl = imgElement.getAttribute('data-video');
  390.  
  391. // 保存原始图片元素
  392. if (!originalImages.has(element)) {
  393. originalImages.set(element, imgElement.cloneNode(true));
  394. }
  395.  
  396. const videoElement = document.createElement('video');
  397. videoElement.controls = false;
  398. videoElement.autoplay = true;
  399. videoElement.loop = true;
  400. videoElement.style.width = '100%';
  401. videoElement.style.height = imgElement.clientHeight + 'px';
  402. videoElement.innerHTML = "<source src='" + videoUrl + "' type='video/mp4'>";
  403.  
  404. if (isMobileDevice()) {
  405. // 检查是否达到最大视频数量限制
  406. if (currentVideosOnMobile >= maxVideosOnMobile) {
  407. // 停止并恢复其他视频为图片
  408. const videos = document.querySelectorAll('video');
  409. videos.forEach(video => {
  410. video.pause();
  411. video.src = '';
  412. video.load();
  413. const parentElement = video.parentElement;
  414. if (originalImages.has(parentElement)) {
  415. video.replaceWith(originalImages.get(parentElement).cloneNode(true));
  416. currentVideosOnMobile--; // 减少当前播放视频计数
  417. }
  418. });
  419. }
  420. currentVideosOnMobile++; // 增加当前播放视频计数
  421. }
  422.  
  423. // 替换图片元素
  424. imgElement.replaceWith(videoElement);
  425. }
  426.  
  427.  
  428. function createVideoElement(video) {
  429. const videoDiv = document.createElement('div');
  430. videoDiv.classList.add('video');
  431. videoDiv.setAttribute('onclick', 'playVideo(this)');
  432.  
  433. // 创建图片元素
  434. const imgElement = new Image();
  435. imgElement.alt = video.altText;
  436. imgElement.dataset.video = video.videoUrl;
  437.  
  438. // 设置本地图片路径
  439. imgElement.src = "img/" + video.fileName + ".jpg";
  440.  
  441. const netLabel = document.createElement('div');
  442. netLabel.classList.add('network-label');
  443. netLabel.textContent = 'L';
  444. netLabel.style.backgroundColor = '#00FF00';
  445. videoDiv.appendChild(netLabel);
  446.  
  447.  
  448.  
  449. // 检查图片是否加载成功
  450.  
  451. imgElement.addEventListener('error', function() {
  452. // 图片加载失败时,切换到网络图片
  453. imgElement.src = video.imgUrl;
  454.  
  455. // 添加网络图片标识
  456.  
  457. netLabel.style.backgroundColor = '#f44336';
  458.  
  459. netLabel.textContent = 'N';
  460.  
  461. videoDiv.appendChild(netLabel);
  462.  
  463. });
  464. videoDiv.appendChild(imgElement);
  465.  
  466. // 创建标题元素
  467. const titleElement = document.createElement('a');
  468. titleElement.classList.add('video-title');
  469. const MAX_TITLE_LENGTH = 20; // 最大标题长度
  470.  
  471. // 拼接标题文本
  472. let titleText = video.fileName + " - " + video.altText;
  473.  
  474. // 如果标题文本长度超过最大长度,则截取前面的部分
  475. if (titleText.length > MAX_TITLE_LENGTH) {
  476. titleText = titleText.substring(0, MAX_TITLE_LENGTH) + '...';
  477. }
  478. titleElement.textContent =titleText
  479.  
  480.  
  481. titleElement.href = video.jumpUrl;
  482. titleElement.target = '_blank'; // 打开新标签页
  483. titleElement.style.textDecoration = 'none'; // 移除下划线
  484. videoDiv.appendChild(titleElement);
  485.  
  486. // 创建标记内容元素
  487. if (video.info) {
  488. const detailButton = document.createElement('button');
  489. detailButton.textContent = '查看详细';
  490. detailButton.classList.add('detail-button');
  491. detailButton.onclick = function(event) {
  492. event.stopPropagation(); // 阻止事件冒泡,防止触发视频播放
  493. const videoElements = document.querySelectorAll('.video');
  494. const index = Array.prototype.indexOf.call(videoElements, videoDiv);
  495. const videoInfo = jsonData.video[index].info;
  496. openVideoModal(videoInfo);
  497. };
  498.  
  499. // 将查看详细按钮放在视频条目底部
  500. const detailButtonContainer = document.createElement('div');
  501. detailButtonContainer.classList.add('detail-button-container');
  502. detailButtonContainer.appendChild(detailButton);
  503. videoDiv.appendChild(detailButtonContainer);
  504. }
  505. // 创建左上角的文本
  506. const firstLineElement = document.createElement('div');
  507. firstLineElement.classList.add('mark-first-line');
  508. firstLineElement.textContent = video.markContent;
  509. videoDiv.appendChild(firstLineElement);
  510.  
  511. // 设置样式
  512. firstLineElement.style.position = 'absolute';
  513. firstLineElement.style.top = '5px';
  514. firstLineElement.style.left = '5px';
  515. firstLineElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  516. firstLineElement.style.color = '#fff';
  517. firstLineElement.style.padding = '5px';
  518. firstLineElement.style.fontSize = '10px';
  519.  
  520. return videoDiv;
  521. }
  522. function openVideoModal(info) {
  523. const modal = document.createElement('div');
  524. modal.id = 'videoModal';
  525. modal.style.display = 'none'; // 默认隐藏
  526. modal.style.position = 'fixed';
  527. modal.style.zIndex = '1000';
  528. modal.style.left = '0';
  529. modal.style.top = '0';
  530. modal.style.width = '100%';
  531. modal.style.height = '100%';
  532. modal.style.overflow = 'auto';
  533. modal.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // 半透明黑色背景
  534.  
  535. const modalContent = document.createElement('div');
  536. modalContent.classList.add('modal-content-video');
  537. modalContent.style.backgroundColor = '#fefefe'; // 白色背景
  538. modalContent.style.margin = '5% auto'; // 上部5%间距,左右居中
  539. modalContent.style.padding = '20px';
  540. modalContent.style.border = '1px solid #888'; // 灰色边框
  541. modalContent.style.width = '80%';
  542. modalContent.style.position = 'relative'; // 相对定位,用于绝对定位关闭按钮
  543.  
  544. const closeButton = document.createElement('span');
  545. closeButton.textContent = '×'; // 使用红色 X 号
  546. closeButton.style.position = 'absolute';
  547. closeButton.style.top = '10px';
  548. closeButton.style.right = '10px';
  549. closeButton.style.fontSize = '50px';
  550. closeButton.style.cursor = 'pointer';
  551. closeButton.style.color = 'red'; // 默认红色关闭按钮
  552. closeButton.style.fontWeight = 'bold';
  553. closeButton.onclick = function() {
  554. modal.style.display = 'none'; // 点击关闭按钮关闭模态框
  555. };
  556. modalContent.appendChild(closeButton);
  557.  
  558. // 创建标题
  559. const title = document.createElement('h2');
  560. title.textContent = '详细信息';
  561. title.style.textAlign = 'center';
  562. modalContent.appendChild(title);
  563.  
  564. // 解析视频信息对象
  565. const videosInfo = info.videosinfo;
  566.  
  567. // 创建信息列表
  568. const infoList = document.createElement('ul');
  569. infoList.style.listStyleType = 'none';
  570. infoList.style.padding = '0';
  571. infoList.style.display = 'flex'; // 使用 flex 布局
  572. infoList.style.flexWrap = 'wrap'; // 允许内容换行
  573.  
  574. // 遍历视频信息对象,创建列表项
  575. for (const key in videosInfo) {
  576. const listItem = document.createElement('li');
  577. listItem.style.marginBottom = '10px';
  578. listItem.style.flex = '1 1 30%'; // 设置每个列表项的宽度,可根据需要调整
  579.  
  580. const label = document.createElement('strong');
  581. label.textContent = key.replace(/:/, ''); // 去除末尾的冒号
  582. label.style.display = 'block';
  583. listItem.appendChild(label);
  584.  
  585. // 处理值是数组的情况
  586. if (Array.isArray(videosInfo[key])) {
  587. const values = videosInfo[key];
  588. const valueList = document.createElement('ul');
  589. valueList.style.listStyleType = 'none';
  590. valueList.style.padding = '0';
  591. valueList.style.marginTop = '5px';
  592. values.forEach(value => {
  593. const valueItem = document.createElement('li');
  594. valueItem.style.marginBottom = '3px';
  595. if (typeof value === 'object' && value.name) {
  596. const link = document.createElement('a');
  597. link.textContent = value.name;
  598. link.href = value.link;
  599. link.target = '_blank';
  600. link.style.color = '#0645AD'; // 蓝色链接色
  601. link.style.textDecoration = 'none';
  602. link.style.fontWeight = 'bold';
  603. valueItem.appendChild(link);
  604. } else {
  605. valueItem.textContent = value;
  606. }
  607. valueList.appendChild(valueItem);
  608. });
  609. listItem.appendChild(valueList);
  610. } else {
  611. listItem.textContent += ' ' + videosInfo[key];
  612. }
  613.  
  614. infoList.appendChild(listItem);
  615. }
  616.  
  617. // 将信息列表添加到模态框内容
  618. modalContent.appendChild(infoList);
  619.  
  620. // 创建下载链接列表
  621. if (info.secondElementLinksInfo && info.secondElementLinksInfo.length > 0) {
  622. const downloadList = document.createElement('ul');
  623. downloadList.style.listStyleType = 'none';
  624. downloadList.style.padding = '0';
  625. downloadList.style.marginTop = '20px';
  626.  
  627. // 添加磁力链下载标题
  628. const titleListItem = document.createElement('li');
  629. const titleStrong = document.createElement('strong');
  630. titleStrong.textContent = '磁力链下载:';
  631. titleListItem.appendChild(titleStrong);
  632. downloadList.appendChild(titleListItem);
  633.  
  634. // 遍历下载链接信息对象,创建列表项
  635. info.secondElementLinksInfo.forEach((linkInfo, index) => {
  636. const listItem = document.createElement('li');
  637. listItem.style.marginBottom = '10px';
  638.  
  639. const linkLabel = document.createElement('span');
  640. linkLabel.textContent = (index + 1) + '. '; // 使用字符串拼接
  641. linkLabel.style.fontWeight = 'bold';
  642. linkLabel.style.marginRight = '5px';
  643. listItem.appendChild(linkLabel);
  644.  
  645. const link = document.createElement('a');
  646. link.textContent = linkInfo.name + ' (' + linkInfo.size + ', ' + linkInfo.date + ')';
  647. link.href = linkInfo.link;
  648. link.target = '_blank';
  649. link.style.color = '#0645AD'; // 蓝色链接色
  650. link.style.textDecoration = 'none';
  651. link.style.fontWeight = 'bold';
  652.  
  653. listItem.appendChild(link);
  654. downloadList.appendChild(listItem);
  655. });
  656.  
  657. // 将下载链接列表添加到模态框内容的底部
  658. modalContent.appendChild(downloadList);
  659. }
  660.  
  661. // 将模态框内容添加到模态框
  662. modal.appendChild(modalContent);
  663.  
  664. // 将模态框添加到页面主体
  665. document.body.appendChild(modal);
  666.  
  667. // 根据当前主题设置模态框样式(这部分是您之前提供的代码,不需要修改)
  668. const currentTheme = document.documentElement.getAttribute('data-theme');
  669. if (currentTheme === 'dark') {
  670. modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // 深色背景
  671. modalContent.style.backgroundColor = '#1c1c1c'; // 深色内容背景
  672. modalContent.style.border = '1px solid #555'; // 深色边框
  673. closeButton.style.color = '#ff6347'; // 深色关闭按钮
  674. }
  675.  
  676. // 显示模态框
  677. modal.style.display = 'block';
  678. }
  679.  
  680.  
  681.  
  682.  
  683.  
  684.  
  685.  
  686. // 关闭模态框
  687. function closevideoModal() {
  688. const modal = document.getElementById('videoModal');
  689. modal.style.display = 'none';
  690. }
  691. function showNoMoreVideosMessage() {
  692.  
  693. const messageDiv = document.createElement('div');
  694. messageDiv.textContent = '没有更多视频了';
  695. messageDiv.className = 'message';
  696. document.body.appendChild(messageDiv);
  697.  
  698. // 设置定时器清除消息(可选)
  699. setTimeout(() => {
  700. document.body.removeChild(messageDiv);
  701. }, 3000); // 3秒后自动隐藏消息
  702. }
  703. function loadVideos() {
  704.  
  705. isLoadingVideos = true;
  706.  
  707. const container = document.getElementById('video-container');
  708. const pageSize = isPC() ? pageSizePC : pageSizeMobile;
  709. const start = currentPage * pageSize;
  710. const end = start + pageSize;
  711. const videosToLoad = videoData.slice(start, end);
  712.  
  713. const newVideoRow = document.createElement('div');
  714. newVideoRow.classList.add('video-row');
  715.  
  716. videosToLoad.forEach(video => {
  717. const videoDiv = createVideoElement(video);
  718. newVideoRow.appendChild(videoDiv);
  719. });
  720.  
  721. container.appendChild(newVideoRow);
  722.  
  723. currentPage++;
  724. isLoadingVideos = false;
  725. if (firstLoad) {
  726. firstLoad=false;
  727. return;
  728. };
  729. updateNotification(); // 更新通知窗口内容
  730. }
  731. function updateNotification() {
  732. const totalVideos = videoData.length;
  733. const loadedVideos = currentPage * (isPC() ? pageSizePC : pageSizeMobile);
  734. const notificationElement = document.getElementById('notification');
  735. notificationElement.innerText = "已加载 " + loadedVideos + " 个视频,共 " + totalVideos + " 个视频。";
  736.  
  737. notificationElement.style.display = 'block';
  738.  
  739. setTimeout(() => {
  740. notificationElement.style.display = 'none';
  741. }, 1000); // 3秒后隐藏通知窗口
  742. }
  743.  
  744. function handleScroll() {
  745. // 如果正在加载视频或者已经加载所有视频,则返回
  746. console.log('Window height:', window.innerHeight);
  747. console.log('Scroll Y:', window.scrollY);
  748. console.log('Body offset height:', document.body.offsetHeight);
  749. if (allVideosLoaded) {
  750.  
  751. return;
  752. }
  753. // 检查是否滚动到页面底部
  754. if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  755. if (currentPage * pageSize >= videoData.length) {
  756. console.log('已加载所有视频');
  757. allVideosLoaded = true;
  758. // 显示提示信息
  759. showNoMoreVideosMessage();
  760. } else {
  761. loadVideos();
  762. }
  763. }
  764. }
  765.  
  766. function toggleSidebar() {
  767. const sidebar = document.getElementById('sidebar');
  768. sidebar.classList.toggle('open');
  769. }
  770.  
  771.  
  772. window.addEventListener('scroll', function() {
  773. handleScroll(isPC() ? pageSizePC : pageSizeMobile);
  774. });
  775. window.addEventListener('DOMContentLoaded', loadVideos);
  776. </script>
  777.  
  778. </body>
  779. </html>
  780.  
  781. `;
  782. }