Player track chapter tickmarks, highlight current chapter, progress filters, links in stream container

This commit is contained in:
advplyr 2021-09-21 16:42:01 -05:00
parent 9e668bbf35
commit c821ef424f
17 changed files with 109 additions and 33 deletions

View file

@ -1,5 +1,14 @@
<template>
<button class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @click="click">
<nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :class="classList">
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<!-- <span class="material-icons animate-spin">refresh</span> -->
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
</nuxt-link>
<button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @click="click">
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<!-- <span class="material-icons animate-spin">refresh</span> -->
@ -13,6 +22,7 @@
<script>
export default {
props: {
to: String,
color: {
type: String,
default: 'primary'

View file

@ -113,7 +113,6 @@ export default {
this.currentSearch = null
},
clickedOption(e, item) {
var newValue = this.input === item ? null : item
this.textInput = null
this.currentSearch = null
this.input = this.textInput ? this.textInput.trim() : null

View file

@ -180,7 +180,7 @@ export default {
submitForm() {
if (!this.textInput) return
var cleaned = this.textInput.toLowerCase().trim()
var cleaned = this.textInput.trim()
var matchesItem = this.items.find((i) => {
return i === cleaned
})

View file

@ -1,5 +1,5 @@
<template>
<div ref="box" class="tooltip-box" @mouseover="mouseover" @mouseleave="mouseleave">
<div ref="box" @mouseover="mouseover" @mouseleave="mouseleave">
<slot />
</div>
</template>
@ -51,8 +51,9 @@ export default {
createTooltip() {
if (!this.$refs.box) return
var tooltip = document.createElement('div')
tooltip.className = 'absolute px-2 bg-black bg-opacity-90 py-1 text-white pointer-events-none text-xs rounded shadow-lg'
tooltip.className = 'absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs'
tooltip.style.zIndex = 100
tooltip.style.backgroundColor = 'rgba(0,0,0,0.75)'
tooltip.innerHTML = this.text
this.setTooltipPosition(tooltip)