Setup optional title for default theme
This commit is contained in:
parent
28de864295
commit
63037350d1
4 changed files with 27 additions and 13 deletions
|
@ -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')
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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
Reference in a new issue