mirror of
https://codeberg.org/yeentown/barkey
synced 2024-11-25 17:35:12 +00:00
replaced ti-player-* and ti-volume-*
This commit is contained in:
parent
d21d428d64
commit
172f9e7443
16 changed files with 35 additions and 26 deletions
|
@ -44,8 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</audio>
|
||||
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
||||
<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
|
||||
<i v-if="isPlaying" class="ph-pause ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-play ph-bold ph-lg"></i>
|
||||
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
|
||||
<i v-else class="ti ti-player-play-filled"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="[$style.controlsChild, $style.controlsRight]">
|
||||
|
@ -59,8 +59,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
|
||||
<div :class="[$style.controlsChild, $style.controlsVolume]">
|
||||
<button class="_button" :class="$style.controlButton" @click="toggleMute">
|
||||
<i v-if="volume === 0" class="ph-speaker-x ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-speaker-high ph-bold ph-lg"></i>
|
||||
<i v-if="volume === 0" class="ti ti-volume-3"></i>
|
||||
<i v-else class="ti ti-volume"></i>
|
||||
</button>
|
||||
<MkMediaRange
|
||||
v-model="volume"
|
||||
|
|
|
@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<source :src="video.url">
|
||||
</video>
|
||||
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ph-play ph-bold ph-lg"></i></button>
|
||||
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
|
||||
<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
|
||||
<MkLoading/>
|
||||
</div>
|
||||
|
@ -72,8 +72,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.videoControls" @click.self="togglePlayPause">
|
||||
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
||||
<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
|
||||
<i v-if="isPlaying" class="ph-pause ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-play ph-bold ph-lg"></i>
|
||||
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
|
||||
<i v-else class="ti ti-player-play-filled"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="[$style.controlsChild, $style.controlsRight]">
|
||||
|
@ -91,8 +91,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
|
||||
<div :class="[$style.controlsChild, $style.controlsVolume]">
|
||||
<button class="_button" :class="$style.controlButton" @click="toggleMute">
|
||||
<i v-if="volume === 0" class="ph-speaker-x ph-bold ph-lg"></i>
|
||||
<i v-else class="ph-speaker-high ph-bold ph-lg"></i>
|
||||
<i v-if="volume === 0" class="ti ti-volume-3"></i>
|
||||
<i v-else class="ti ti-volume"></i>
|
||||
</button>
|
||||
<MkMediaRange
|
||||
v-model="volume"
|
||||
|
|
|
@ -81,7 +81,7 @@ const buttonsRight = computed(() => {
|
|||
title: i18n.ts.reload,
|
||||
onClick: reload,
|
||||
}, {
|
||||
icon: 'ph-eject ph-bold ph-lg',
|
||||
icon: 'ti ti-player-eject',
|
||||
title: i18n.ts.showInPage,
|
||||
onClick: expand,
|
||||
}];
|
||||
|
@ -113,7 +113,7 @@ provide('forceSpacerMin', true);
|
|||
provide('shouldBackButton', false);
|
||||
|
||||
const contextmenu = computed(() => ([{
|
||||
icon: 'ph-eject ph-bold ph-lg',
|
||||
icon: 'ti ti-player-eject',
|
||||
text: i18n.ts.showInPage,
|
||||
action: expand,
|
||||
}, {
|
||||
|
|
|
@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<div v-if="!playerEnabled && player.url" :class="$style.action">
|
||||
<MkButton :small="true" inline @click="playerEnabled = true">
|
||||
<i class="ph-play ph-bold ph-lg"></i> {{ i18n.ts.enablePlayer }}
|
||||
<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
|
||||
</MkButton>
|
||||
<MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()">
|
||||
<i class="ph-picture-in-picture ph-bold ph-lg"></i> {{ i18n.ts.openInWindow }}
|
||||
|
|
|
@ -61,7 +61,7 @@ function onContextmenu(ev) {
|
|||
os.pageWindow(props.to);
|
||||
},
|
||||
}, {
|
||||
icon: 'ph-eject ph-bold ph-lg',
|
||||
icon: 'ti ti-player-eject',
|
||||
text: i18n.ts.showInPage,
|
||||
action: () => {
|
||||
router.push(props.to, 'forcePage');
|
||||
|
|
|
@ -93,7 +93,7 @@ export const navbarItemDef = reactive({
|
|||
},
|
||||
play: {
|
||||
title: 'Play',
|
||||
icon: 'ph-play ph-bold ph-lg',
|
||||
icon: 'ti ti-player-play',
|
||||
to: '/play',
|
||||
},
|
||||
gallery: {
|
||||
|
|
|
@ -105,7 +105,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</I18n>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ph-play ph-bold ph-lg"></i> {{ i18n.ts.replaying }}</span></div>
|
||||
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></div>
|
||||
</div>
|
||||
|
||||
<div v-if="replaying" class="_woodenFrame">
|
||||
|
@ -116,9 +116,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<div class="_woodenFrameInner">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton @click="endReplay"><i class="ph-stop ph-bold ph-lg"></i> {{ i18n.ts.endReplay }}</MkButton>
|
||||
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ph-skip-forward ph-bold ph-lg"></i> x4</MkButton>
|
||||
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ph-skip-forward ph-bold ph-lg"></i> x16</MkButton>
|
||||
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> {{ i18n.ts.endReplay }}</MkButton>
|
||||
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
|
||||
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -92,6 +92,6 @@ const headerTabs = computed(() => [{
|
|||
|
||||
definePageMetadata(() => ({
|
||||
title: 'Play',
|
||||
icon: 'ph-play ph-bold ph-lg',
|
||||
icon: 'ti ti-player-play',
|
||||
}));
|
||||
</script>
|
||||
|
|
|
@ -94,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkButton :disabled="logPos === game.logs.length" @click="logPos++"><i class="ti ti-chevron-right"></i></MkButton>
|
||||
<MkButton :disabled="logPos === game.logs.length" @click="logPos = game.logs.length"><i class="ti ti-chevrons-right"></i></MkButton>
|
||||
</div>
|
||||
<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ph-play ph-bold ph-lg"></i></MkButton>
|
||||
<MkButton style="margin: auto;" :disabled="autoplaying" @click="autoplay()"><i class="ti ti-player-play"></i></MkButton>
|
||||
</div>
|
||||
|
||||
<div class="_panel" style="padding: 16px;">
|
||||
|
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.editor" class="_panel">
|
||||
<MkCodeEditor v-model="code" lang="aiscript"/>
|
||||
</div>
|
||||
<MkButton primary @click="run()"><i class="ph-play ph-bold ph-lg"></i></MkButton>
|
||||
<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
|
||||
</div>
|
||||
|
||||
<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
|
||||
|
|
|
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkRange>
|
||||
|
||||
<div class="_buttons">
|
||||
<MkButton inline @click="listen"><i class="ph-play ph-bold ph-lg"></i> {{ i18n.ts.listen }}</MkButton>
|
||||
<MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton>
|
||||
<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps">
|
||||
<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`">
|
||||
<template #icon>
|
||||
<i v-if="webhook.active === false" class="ph-pause ph-bold ph-lg"></i>
|
||||
<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
|
||||
<i v-else-if="webhook.latestStatus === null" class="ph-circle ph-bold ph-lg"></i>
|
||||
<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
|
||||
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
|
||||
|
|
|
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</a>
|
||||
<a :href="listenbrainz.listenbrainzurl">
|
||||
<div class="playicon">
|
||||
<i class="ph-play ph-bold ph-lg-filled"></i>
|
||||
<i class="ph-play ph-bold ph-lg"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -115,7 +115,7 @@ const headerTabs = computed(() => user.value ? [{
|
|||
}, {
|
||||
key: 'flashs',
|
||||
title: 'Play',
|
||||
icon: 'ph-play ph-bold ph-lg',
|
||||
icon: 'ti ti-player-play',
|
||||
}, {
|
||||
key: 'gallery',
|
||||
title: i18n.ts.gallery,
|
||||
|
|
|
@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
|
||||
<div class="divider"></div>
|
||||
<MkA to="/pages" class="link" activeClass="active"><i class="ph-newspaper ph-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
|
||||
<MkA to="/play" class="link" activeClass="active"><i class="ph-play ph-bold ph-lg icon"></i>Play</MkA>
|
||||
<MkA to="/play" class="link" activeClass="active"><i class="ti ti-player-play icon"></i>Play</MkA>
|
||||
<MkA to="/gallery" class="link" activeClass="active"><i class="ph-images-square ph-bold ph-lgs icon"></i>{{ i18n.ts.gallery }}</MkA>
|
||||
<div class="action">
|
||||
<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
|
||||
|
|
|
@ -214,6 +214,15 @@ export function getConfig(): UserConfig {
|
|||
'ti ti-search': 'ph-magnifying-glass ph-bold ph-lg',
|
||||
'ti ti-external-link': 'ph-arrow-square-out ph-bold ph-lg',
|
||||
'ti ti-music': 'ph-music-notes ph-bold ph-lg',
|
||||
'ti ti-player-pause': 'ph-pause ph-bold ph-lg',
|
||||
'ti ti-player-pause-filled': 'ph-pause ph-bold ph-lg',
|
||||
'ti ti-player-play': 'ph-play ph-bold ph-lg',
|
||||
'ti ti-player-play-filled': 'ph-play ph-bold ph-lg',
|
||||
'ti ti-volume-3': 'ph-speaker-x ph-bold ph-lg',
|
||||
'ti ti-volume': 'ph-speaker-high ph-bold ph-lg',
|
||||
'ti ti-player-eject': 'ph-eject ph-bold ph-lg',
|
||||
'ti ti-player-stop': 'ph-stop ph-bold ph-lg',
|
||||
'ti ti-player-track-next': 'ph-skip-forward ph-bold ph-lg',
|
||||
},
|
||||
}),
|
||||
...process.env.NODE_ENV === 'production'
|
||||
|
|
Loading…
Reference in a new issue