mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-30 14:49:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update iOS disable touch callout and user select

Browse source
This commit is contained in:
advplyr 2023-03-04 17:15:48 -06:00
parent f28405081a
commit 1ea984b915
4 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/app.css
View file

@ -2,6 +2,19 @@
@import './defaultStyles.css'; @import './defaultStyles.css';
@import './absicons.css'; @import './absicons.css';
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
input,
textarea {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
user-select: auto;
}
body { body {
background-color: #262626; background-color: #262626;
} }

8
components/app/AudioPlayer.vue
View file

@ -81,7 +81,7 @@
</div> </div>
<div id="playerTrack" class="absolute left-0 w-full px-6"> <div id="playerTrack" class="absolute left-0 w-full px-6">
<div class="flex"> <div class="flex pointer-events-none">
<p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p> <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
<div class="flex-grow" /> <div class="flex-grow" />
<p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p> <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
@ -90,7 +90,7 @@
<div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 rounded-full pointer-events-none" /> <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 rounded-full pointer-events-none" />
<div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 rounded-full pointer-events-none" /> <div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 rounded-full pointer-events-none" />
<div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 rounded-full pointer-events-none" /> <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 rounded-full pointer-events-none" />
<div ref="trackCursor" class="rounded-full bg-gray-200 absolute pointer-events-auto" :class="{ 'opacity-0': lockUi || !showFullscreen, 'h-3.5 w-3.5 -top-1': isDraggingCursor, 'h-3 w-3 -top-0.75': !isDraggingCursor }" @touchstart="touchstartCursor" /> <div ref="trackCursor" class="h-3.5 w-3.5 -top-1 rounded-full bg-gray-200 absolute pointer-events-auto" :class="{ 'opacity-0': lockUi || !showFullscreen }" @touchstart="touchstartCursor" />
</div> </div>
</div> </div>
</div> </div>
@ -547,8 +547,7 @@ export default {
this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px' this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px'
if (this.$refs.trackCursor) { if (this.$refs.trackCursor) {
const cursorShift = this.isDraggingCursor ? 7 : 6 this.$refs.trackCursor.style.left = ptWidth - 7 + 'px'
this.$refs.trackCursor.style.left = ptWidth - cursorShift + 'px'
} }
if (this.useChapterTrack) { if (this.useChapterTrack) {
@ -579,6 +578,7 @@ export default {
}, },
async touchstartCursor(e) { async touchstartCursor(e) {
if (!e || !e.touches || !this.$refs.track || !this.showFullscreen || this.lockUi) return if (!e || !e.touches || !this.$refs.track || !this.showFullscreen || this.lockUi) return
await this.$hapticsImpact() await this.$hapticsImpact()
this.isDraggingCursor = true this.isDraggingCursor = true
this.draggingTouchStartX = e.touches[0].pageX this.draggingTouchStartX = e.touches[0].pageX

2
layouts/default.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="select-none w-full layout-wrapper bg-bg text-white"> <div class="w-full layout-wrapper bg-bg text-white">
<app-appbar /> <app-appbar />
<div id="content" class="overflow-hidden relative" :class="playerIsOpen ? 'playerOpen' : ''"> <div id="content" class="overflow-hidden relative" :class="playerIsOpen ? 'playerOpen' : ''">
<Nuxt /> <Nuxt />

3
tailwind.config.js
View file

@ -50,9 +50,6 @@ module.exports = {
}, },
minHeight: { minHeight: {
'12': '3rem' '12': '3rem'
},
spacing: {
'0.75': '0.1875rem'
} }
} }
}, },