mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 13:08:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tooltip show/hide work in progress

Browse source
This commit is contained in:
banaanihillo@protonmail.ch 2024-04-20 11:31:52 +03:00
parent 2aca90d993
commit 7fd5f11898
3 changed files with 70 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/SongItem.vue
View file

@ -132,30 +132,36 @@ const openSong = el => {
</a>
</span>
<span
<button
class="bi bi-three-dots-vertical popup-wrap ign"
@mouseenter="show = true"
@mouseleave="show = false">
@mouseleave="show = false"
@click.enter="show = player.toggle('tooltipIsOpen')"
>
<Transition name="fade">
<div v-if="show" class="popup ign">
<span
<button
v-if="playlistId || offlineUri"
class="bi bi-dash-lg clickable ign"
@click="Remove"></span>
<span
@click="Remove">
</button>
<button
class="bi bi-chevron-bar-right clickable ign"
@click="appendSong"></span>
<span
@click="appendSong">
</button>
<button
class="bi bi-collection clickable ign"
@click="showPl = true"></span>
<span
@click="showPl = true">
</button>
<button
class="bi bi-broadcast clickable ign"
@click="$emit('nxt-song')"></span>
<span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
<span class="bi bi-share clickable ign" @click="Share"></span>
@click="$emit('nxt-song')">
</button>
<button class="bi bi-plus-lg clickable ign" @click="addSong"></button>
<button class="bi bi-share clickable ign" @click="Share"></button>
</div>
</Transition>
</span>
</button>
</div>
</template>
@ -177,6 +183,9 @@ span.content {
span.bi-three-dots-vertical {
margin: 2rem;
}
button.bi-three-dots-vertical {
border: none;
}
.popup {
line-height: auto;
height: auto;

9
src/stores/player.js
View file

@ -17,6 +17,7 @@ export const useData = defineStore('data', () => {
lyrics: '',
src: [],
urls: [],
tooltipIsOpen: false,
}),
player = usePlayer();
@ -148,10 +149,16 @@ export const usePlayer = defineStore('player', () => {
info: false,
add: false,
vol: store.vol ? store.vol / 100 : 1,
tooltipIsOpen: false,
});
function toggle(i) {
if (typeof state[i] == 'boolean') state[i] = !state[i];
console.log(i)
console.log(state[i])
if (typeof state[i] == 'boolean') {
console.log(state[i])
return state[i] = !state[i]
}
}
function setTime(t) {

80
vite.config.mjs
View file

@ -2,51 +2,51 @@ import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';
// import { VitePWA } from 'vite-plugin-pwa';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: [
'**/*.{css,html,png,svg,woff,woff2}',
'manifest.webmanifest',
'**/index*.js',
'**/shaka*.js',
'**/[A-Z]*.js',
],
},
manifest: {
name: 'Hyperpipe',
short_name: 'Hyperpipe',
start_url: '/',
display: 'standalone',
background_color: '#000',
theme_color: '#000',
description: 'Privacy respecting YouTube Music Frontend.',
icons: [
{
src: '/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: '/android-maskable.png',
sizes: '1024x1024',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
// VitePWA({
// registerType: 'autoUpdate',
// workbox: {
// globPatterns: [
// '**/*.{css,html,png,svg,woff,woff2}',
// 'manifest.webmanifest',
// '**/index*.js',
// '**/shaka*.js',
// '**/[A-Z]*.js',
// ],
// },
// manifest: {
// name: 'Hyperpipe',
// short_name: 'Hyperpipe',
// start_url: '/',
// display: 'standalone',
// background_color: '#000',
// theme_color: '#000',
// description: 'Privacy respecting YouTube Music Frontend.',
// icons: [
// {
// src: '/android-chrome-192x192.png',
// sizes: '192x192',
// type: 'image/png',
// },
// {
// src: '/android-chrome-512x512.png',
// sizes: '512x512',
// type: 'image/png',
// },
// {
// src: '/android-maskable.png',
// sizes: '1024x1024',
// type: 'image/png',
// purpose: 'maskable',
// },
// ],
// },
// }),
],
resolve: {
alias: {