Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Marquee to Make Long Text Readable #767

Merged
merged 12 commits into from
Dec 26, 2024
Merged

Add Marquee to Make Long Text Readable #767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e7e0a30
Refactor: Force elements in info header on 1 line
maximmaxim345 Dec 2, 2024
0cc4374
Fix: Make the title in InfoHeader fit on screen
maximmaxim345 Dec 2, 2024
821fe0f
Feat: Add MarqueeText for synced scrolling of overflowed text
maximmaxim345 Dec 2, 2024
e3ecf5b
Feat: Use MarqueeText in the Fullscreen Player
maximmaxim345 Dec 2, 2024
590f00d
Feat: Use MarqueeText in the minimized Player
maximmaxim345 Dec 2, 2024
ac11649
Feat: Use MarqueeText in InfoHeader
maximmaxim345 Dec 2, 2024
a04db05
Fix: Slow down MarqueeText speed for better readability
maximmaxim345 Dec 25, 2024
c3a26d4
Feat: Add `disabled` prop to MarqueeText
maximmaxim345 Dec 25, 2024
42b210c
Feat: Use MarqueeText for the currently playing track in the Player Q…
maximmaxim345 Dec 25, 2024
1bfde8c
Perf: Disconnect observers on disabled MarqueeTexts
maximmaxim345 Dec 25, 2024
f5884d1
Fix: skip waiting when reenabling a MarqueeText
maximmaxim345 Dec 25, 2024
269f889
Feat: Scroll queue item on mouse hover
maximmaxim345 Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 42 additions & 22 deletions src/components/InfoHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
padding-left: 15px;
align-items: center;
padding-right: 15px;
display: flex;
width: 100%;
"
>
<!-- left side: cover image -->
Expand All @@ -54,6 +56,7 @@
margin-bottom: 15px;
margin-right: 24px;
align-content: center;
flex-shrink: 0;
"
>
<div v-if="item.media_type && item.media_type == MediaType.ARTIST">
Expand All @@ -70,7 +73,7 @@
</div>
</div>

<div style="width: 100%; text-align: left">
<div style="min-width: 0">
<!-- Main title -->
<img
v-if="artistLogo"
Expand All @@ -80,7 +83,9 @@
style="padding-left: 10px"
/>
<v-card-title v-else>
{{ item.name }}
<MarqueeText :sync="marqueeSync">
{{ item.name }}
</MarqueeText>
</v-card-title>

<!-- other details -->
Expand Down Expand Up @@ -108,52 +113,64 @@
<!-- item artists -->
<v-card-subtitle
v-if="'artists' in item && item.artists"
class="title accent--text"
class="title accent--text d-flex"
>
<v-icon
style="margin-left: -3px; margin-right: 3px"
small
color="primary"
icon="mdi-account-music"
/>
<span
v-for="(artist, artistindex) in item.artists"
:key="artist.item_id"
>
<a style="color: accent" @click="artistClick(artist)">{{
artist.name
}}</a>
<MarqueeText :sync="marqueeSync">
<span
v-if="artistindex + 1 < item.artists.length"
:key="artistindex"
style="color: accent"
>{{ " / " }}</span
v-for="(artist, artistindex) in item.artists"
:key="artist.item_id"
>
</span>
<a style="color: accent" @click="artistClick(artist)">{{
artist.name
}}</a>
<span
v-if="artistindex + 1 < item.artists.length"
:key="artistindex"
style="color: accent"
>{{ " / " }}</span
>
</span>
</MarqueeText>
</v-card-subtitle>

<!-- playlist owner -->
<v-card-subtitle v-if="'owner' in item && item.owner" class="title">
<v-card-subtitle
v-if="'owner' in item && item.owner"
class="title d-flex"
>
<v-icon
color="primary"
style="margin-left: -3px; margin-right: 3px"
small
icon="mdi-account-music"
/>
<a style="color: primary">{{ item.owner }}</a>
<MarqueeText :sync="marqueeSync">
<a style="color: primary">{{ item.owner }}</a>
</MarqueeText>
</v-card-subtitle>

<v-card-subtitle v-if="'album' in item && item.album">
<v-card-subtitle
v-if="'album' in item && item.album"
class="d-flex"
>
<v-icon
color="primary"
style="margin-left: -3px; margin-right: 3px"
small
icon="mdi-album"
/>
<a
style="color: secondary"
@click="albumClick((item as Track)?.album)"
>{{ item.album.name }}</a
<MarqueeText :sync="marqueeSync">
<a
style="color: secondary"
@click="albumClick((item as Track)?.album)"
>{{ item.album.name }}</a
></MarqueeText
>
</v-card-subtitle>
</div>
Expand Down Expand Up @@ -322,6 +339,8 @@ import {
} from "@/layouts/default/ItemContextMenu.vue";
import Toolbar from "@/components/Toolbar.vue";
import { useI18n } from "vue-i18n";
import MarqueeText from "./MarqueeText.vue";
import { MarqueeTextSync } from "@/helpers/marquee_text_sync";

// properties
export interface Props {
Expand All @@ -335,6 +354,7 @@ const { mobile } = useDisplay();
const imgGradient = new URL("../assets/info_gradient.jpg", import.meta.url)
.href;

const marqueeSync = new MarqueeTextSync();
const router = useRouter();
const { t } = useI18n();

Expand Down
Loading
Loading