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() {
function Hide_Controls() {
var ZornTitleArea = document.querySelector(".video-container > h2")
var ZornTitleArea = document.querySelector(".zorn-title")
if (ZornVideoPlayer.paused) {
return
} else {
@ -14,7 +14,7 @@ export function AutoToggleControls() {
// Show_Controls displays the video 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')
ZornTitleArea.classList.remove('hide')
}

View file

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

View file

@ -1,13 +1,25 @@
import {
PlayIcon,
PauseIcon,
FullcreenIcon,
CaptionsIcon,
Backward15Icon,
Forward15Icon,
VolumeHighIcon
VolumeHighIcon,
ZornVideoPlayer
} 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 = `
<h2 class="zorn-title hide"></h2>
<div oncontextmenu="return false" class="zorn-player-controls">
@ -109,10 +121,9 @@ export var Controls = `
display: inline-flex;
}
.video-container .zorn-title {
display: none;
position: absolute;
top: 0px;
background: #000;
background: rgb(0 0 0 / 50%);
width: auto;
margin: 12px;
padding: 12px 24px;

File diff suppressed because one or more lines are too long