2021-08-18 00:01:11 +02:00
< template >
< div class = "w-full my-2" >
2021-11-04 23:35:59 +01:00
< div class = "w-full bg-primary px-4 md:px-6 py-2 flex items-center cursor-pointer" @click.stop ="clickBar" >
2022-03-17 18:25:12 +01:00
< p class = "pr-2 md:pr-4" > { { title } } < / p >
2021-11-04 23:35:59 +01:00
< div class = "h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center" >
2021-10-07 04:08:52 +02:00
< span class = "text-sm font-mono" > { { tracks . length } } < / span >
< / div >
<!-- < span class = "bg-black-400 rounded-xl py-1 px-2 text-sm font-mono" > { { tracks . length } } < / span > -- >
2021-08-18 00:01:11 +02:00
< div class = "flex-grow" / >
2023-04-09 23:10:03 +02:00
< ui -btn v-if ="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath" > {{ $ strings.ButtonFullPath }} < / ui -btn >
2022-04-28 02:42:34 +02:00
< nuxt -link v -if = " userCanUpdate & & ! isFile " :to ="`/audiobook/${libraryItemId}/edit`" class = "mr-2 md:mr-4" @ mousedown.prevent >
2022-11-08 15:37:39 +01:00
< ui -btn small color = "primary" > { { $strings . ButtonManageTracks } } < / u i - b t n >
2021-08-18 00:01:11 +02:00
< / n u x t - l i n k >
< div class = "cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" : class = "showTracks ? 'transform rotate-180' : ''" >
< span class = "material-icons text-4xl" > expand _more < / span >
< / div >
< / div >
< transition name = "slide" >
< div class = "w-full" v-show ="showTracks" >
< table class = "text-sm tracksTable" >
2023-02-11 22:02:56 +01:00
< tr >
2021-10-07 04:08:52 +02:00
< th class = "w-10" > # < / th >
2022-11-08 15:37:39 +01:00
< th class = "text-left" > { { $strings . LabelFilename } } < / th >
< th class = "text-left w-20" > { { $strings . LabelSize } } < / th >
< th class = "text-left w-20" > { { $strings . LabelDuration } } < / th >
< th v-if ="userCanDownload" class="text-center w-20" > {{ $ strings.LabelDownload }} < / th >
2022-10-02 22:24:32 +02:00
< th v-if ="showExperimentalFeatures" class="text-center w-20" >
< div class = "flex items-center" >
< p > Tone < / p >
< ui -tooltip text = "Experimental feature for testing Tone library metadata scan results. Results logged in browser console." class = "ml-2 w-2" direction = "left" >
< span class = "material-icons-outlined text-sm" > information < / span >
< / u i - t o o l t i p >
< / div >
< / th >
2021-08-18 00:01:11 +02:00
< / tr >
2022-03-11 01:45:02 +01:00
< template v-for ="track in tracks" >
2021-08-18 00:01:11 +02:00
< tr :key ="track.index" >
< td class = "text-center" >
< p > { { track . index } } < / p >
< / td >
2022-03-11 01:45:02 +01:00
< td class = "font-sans" > { { showFullPath ? track . metadata . path : track . metadata . filename } } < / td >
2021-08-18 00:01:11 +02:00
< td class = "font-mono" >
2022-03-11 01:45:02 +01:00
{ { $bytesPretty ( track . metadata . size ) } }
2021-08-18 00:01:11 +02:00
< / td >
< td class = "font-mono" >
{ { $secondsToTimestamp ( track . duration ) } }
< / td >
2021-09-07 00:42:15 +02:00
< td v-if ="userCanDownload" class="text-center" >
2022-10-02 22:24:32 +02:00
< a : href = "`${$config.routerBasePath}/s/item/${libraryItemId}/${$encodeUriPath(track.metadata.relPath).replace(/^\//, '')}?token=${userToken}`" download > < span class = "material-icons icon-text pt-1" > download < / span > < / a >
< / td >
< td v-if ="showExperimentalFeatures" class="text-center" >
< ui -icon -btn borderless :loading ="toneProbing" icon = "search" @click ="toneProbe(track.index)" / >
2021-09-06 21:13:01 +02:00
< / td >
2021-08-18 00:01:11 +02:00
< / tr >
< / template >
< / table >
< / div >
< / transition >
< / div >
< / template >
< script >
export default {
props : {
2022-03-17 18:25:12 +01:00
title : {
type : String ,
default : 'Audio Tracks'
} ,
2021-08-18 00:01:11 +02:00
tracks : {
type : Array ,
default : ( ) => [ ]
} ,
2022-04-28 02:42:34 +02:00
libraryItemId : String ,
isFile : Boolean
2021-08-18 00:01:11 +02:00
} ,
data ( ) {
return {
2021-10-07 04:08:52 +02:00
showTracks : false ,
2022-10-02 22:24:32 +02:00
showFullPath : false ,
toneProbing : false
2021-08-18 00:01:11 +02:00
}
} ,
2021-09-07 00:42:15 +02:00
computed : {
2021-10-06 04:10:49 +02:00
userToken ( ) {
return this . $store . getters [ 'user/getToken' ]
} ,
2021-09-07 00:42:15 +02:00
userCanDownload ( ) {
return this . $store . getters [ 'user/getUserCanDownload' ]
} ,
userCanUpdate ( ) {
return this . $store . getters [ 'user/getUserCanUpdate' ]
2022-10-02 22:24:32 +02:00
} ,
2023-04-09 23:10:03 +02:00
userIsAdmin ( ) {
return this . $store . getters [ 'user/getIsAdminOrUp' ]
} ,
2022-10-02 22:24:32 +02:00
showExperimentalFeatures ( ) {
return this . $store . state . showExperimentalFeatures
2021-09-07 00:42:15 +02:00
}
} ,
2021-08-18 00:01:11 +02:00
methods : {
clickBar ( ) {
this . showTracks = ! this . showTracks
2022-10-02 22:24:32 +02:00
} ,
toneProbe ( index ) {
this . toneProbing = true
this . $axios
. $post ( ` /api/items/ ${ this . libraryItemId } /tone-scan/ ${ index } ` )
. then ( ( data ) => {
console . log ( 'Tone probe data' , data )
if ( data . error ) {
this . $toast . error ( 'Tone probe error: ' + data . error )
} else {
this . $toast . success ( 'Tone probe successful! Check browser console' )
}
} )
. catch ( ( error ) => {
console . error ( 'Failed to tone probe' , error )
this . $toast . error ( 'Tone probe failed' )
} )
. finally ( ( ) => {
this . toneProbing = false
} )
2021-08-18 00:01:11 +02:00
}
} ,
mounted ( ) { }
}
< / script >