46 lines
2.3 KiB
JavaScript
46 lines
2.3 KiB
JavaScript
(() => {
|
|
// src/assets/icons/play-solid.svg
|
|
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
|
|
|
|
// src/get.js
|
|
var ZornVideoPlayer = document.querySelector(".zorn-player");
|
|
var VideoContainer = document.querySelector(".video-container");
|
|
var PlayIcon = play_solid_default;
|
|
|
|
// src/themes/default.js
|
|
var Controls = `
|
|
<h2 class="zorn-title hide"></h2>
|
|
<div oncontextmenu="return false" class="zorn-player-controls">
|
|
<div class="row-1">
|
|
<div class="row-1-start">
|
|
<button id="play-pause">${PlayIcon}</button>
|
|
<button id="skip-back"><i class="fa-solid fa-arrow-rotate-left"></i></button>
|
|
<button id="skip-forth"><i class="fa-solid fa-arrow-rotate-right"></i></button>
|
|
<div class="volume-controls">
|
|
<button data-title="Mute (m)" class="volume-button" id="volume-button"><i class="fa-solid fa-volume-high"></i></button>
|
|
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01">
|
|
</div>
|
|
</div>
|
|
<div class="row-1-center">
|
|
<div class="video-progress">
|
|
<progress id="progress-bar" value="0" min="0"></progress>
|
|
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
|
|
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-1-end">
|
|
<div class="time">
|
|
<time id="time-elapsed">00:00</time>
|
|
<span> / </span>
|
|
<time id="duration">00:00</time>
|
|
</div>
|
|
<button id="subtitles"><i class="fa-solid fa-subtitles"></i></button>
|
|
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// src/index.js
|
|
ZornVideoPlayer.insertAdjacentHTML("afterend", Controls);
|
|
})();
|