innerHTML: ''
}) as HTMLElement
+ if (!options.element.video) {
+ li.classList.add('vjs-disabled')
+ }
+
const positionBlock = super.createEl('div', {
className: 'item-position-block'
- })
+ }) as HTMLElement
const position = super.createEl('div', {
className: 'item-position',
innerHTML: options.element.position
})
+ positionBlock.appendChild(position)
+ li.appendChild(positionBlock)
+
+ if (options.element.video) {
+ this.buildAvailableVideo(li, positionBlock, options)
+ } else {
+ this.buildUnavailableVideo(li)
+ }
+
+ return li
+ }
+
+ setSelected (selected: boolean) {
+ if (selected) this.addClass('vjs-selected')
+ else this.removeClass('vjs-selected')
+ }
+
+ getElement () {
+ return this.element
+ }
+
+ private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
const player = super.createEl('div', {
className: 'item-player'
})
- positionBlock.appendChild(position)
positionBlock.appendChild(player)
- li.appendChild(positionBlock)
-
const thumbnail = super.createEl('img', {
src: window.location.origin + options.element.video.thumbnailPath
})
li.append(thumbnail)
li.append(infoBlock)
-
- return li
}
- setSelected (selected: boolean) {
- if (selected) this.addClass('vjs-selected')
- else this.removeClass('vjs-selected')
- }
+ private buildUnavailableVideo (li: HTMLElement) {
+ const block = super.createEl('div', {
+ className: 'item-unavailable',
+ innerHTML: this.player().localize('Unavailable video')
+ })
- getElement () {
- return this.element
+ li.appendChild(block)
}
private handleKeyDown (event: KeyboardEvent) {
constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
super(player, options as any)
- this.player().on('userinactive', () => {
- this.close()
+ const self = this
+
+ function userInactiveHandler () {
+ self.close()
+ }
+
+ this.el().addEventListener('mouseenter', () => {
+ this.player().off('userinactive', userInactiveHandler)
+ })
+
+ this.el().addEventListener('mouseleave', () => {
+ this.player().one('userinactive', userInactiveHandler)
})
this.player().on('click', event => {
justify-content: space-between;
.title {
+ @include ellipsis;
+
font-size: 14px;
margin-bottom: 5px;
- white-space: nowrap;
- text-overflow: ellipsis;
}
.channel {
+ @include ellipsis;
+
font-size: 11px;
color: #bfbfbf;
- white-space: nowrap;
- text-overflow: ellipsis;
}
.cross {
}
.vjs-playlist-menu-item {
- cursor: pointer;
display: flex;
padding: 10px 0;
+ height: 60px;
+
+ &:not(.vjs-disabled) {
+ cursor: pointer;
+ }
.item-position-block {
position: relative;
align-items: center;
justify-content: center;
width: 30px;
+ flex-shrink: 0;
+ }
+
+ .item-unavailable {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.item-player {
}
}
- &:hover {
+ &:hover:not(.vjs-disabled) {
background-color: rgba(150, 150, 150, 0.2);
}
}
.info-block {
- margin-left: 10px;
+ margin: 0 10px;
+ min-width: 1px;
.title {
+ @include ellipsis;
+
font-size: 13px;
margin-bottom: 5px;
- white-space: nowrap;
- text-overflow: ellipsis;
}
.channel {
+ @include ellipsis;
+
font-size: 11px;
color: #bfbfbf;
- white-space: nowrap;
- text-overflow: ellipsis;
}
}
}