Setup optional title for default theme

This commit is contained in:
Korbs 2024-02-26 21:17:34 -05:00
parent 28de864295
commit 63037350d1
No known key found for this signature in database
4 changed files with 27 additions and 13 deletions

View file

@ -3,7 +3,7 @@ import { VideoContainer, VideoControls, ZornVideoPlayer } from '../get'
export function AutoToggleControls() { export function AutoToggleControls() {
function Hide_Controls() { function Hide_Controls() {
var ZornTitleArea = document.querySelector(".video-container > h2") var ZornTitleArea = document.querySelector(".zorn-title")
if (ZornVideoPlayer.paused) { if (ZornVideoPlayer.paused) {
return return
} else { } else {
@ -14,7 +14,7 @@ export function AutoToggleControls() {
// Show_Controls displays the video controls // Show_Controls displays the video controls
function Show_Controls() { function Show_Controls() {
var ZornTitleArea = document.querySelector(".video-container > h2") var ZornTitleArea = document.querySelector(".zorn-title")
document.querySelector('.zorn-player-controls').classList.remove('hide') document.querySelector('.zorn-player-controls').classList.remove('hide')
ZornTitleArea.classList.remove('hide') ZornTitleArea.classList.remove('hide')
} }

View file

@ -1,5 +1,5 @@
import { ZornVideoPlayer } from "./get" import { ZornVideoPlayer } from "./get"
import { Controls } from "./themes/default" import { Controls, Title } from "./themes/default"
// Import Functions // Import Functions
import { Events } from './events' import { Events } from './events'
@ -17,6 +17,10 @@ import { KeyboardShortcuts } from "./functions/KeyboardShortcuts"
ZornVideoPlayer.insertAdjacentHTML("afterend", Controls) ZornVideoPlayer.insertAdjacentHTML("afterend", Controls)
ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog) ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog)
if (ZornVideoPlayer.getAttribute('layout') === 'default') {
Title()
}
// Init Functions // Init Functions
Events() Events()
KeyboardShortcuts() KeyboardShortcuts()

View file

@ -1,13 +1,25 @@
import { import {
PlayIcon, PlayIcon,
PauseIcon,
FullcreenIcon, FullcreenIcon,
CaptionsIcon, CaptionsIcon,
Backward15Icon, Backward15Icon,
Forward15Icon, Forward15Icon,
VolumeHighIcon VolumeHighIcon,
ZornVideoPlayer
} from '../get' } from '../get'
// This theme includes an optional title
export function Title() {
let VideoTitle = ZornVideoPlayer.getAttribute('video-title')
document.querySelector(".zorn-title").innerHTML = VideoTitle
if (ZornVideoPlayer.hasAttribute('video-title')) {
document.querySelector('.zorn-title').style.display = 'inherit'
} else {
document.querySelector('.zorn-title').style.display = 'none'
}
}
export var Controls = ` export var Controls = `
<h2 class="zorn-title hide"></h2> <h2 class="zorn-title hide"></h2>
<div oncontextmenu="return false" class="zorn-player-controls"> <div oncontextmenu="return false" class="zorn-player-controls">
@ -109,10 +121,9 @@ export var Controls = `
display: inline-flex; display: inline-flex;
} }
.video-container .zorn-title { .video-container .zorn-title {
display: none;
position: absolute; position: absolute;
top: 0px; top: 0px;
background: #000; background: rgb(0 0 0 / 50%);
width: auto; width: auto;
margin: 12px; margin: 12px;
padding: 12px 24px; padding: 12px 24px;

File diff suppressed because one or more lines are too long