okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

marquee

Browse source
This commit is contained in:
vapormusic 2022-01-21 22:13:27 +07:00
parent 8795037fc2
commit 5804e1e52d
3 changed files with 42 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/renderer/index.js
View file

@ -3285,6 +3285,14 @@ const app = new Vue({
this.cfg.visual.showuserinfo = false
this.chrome.hideUserInfo = true
}
},
isElementOverflowing(selector) {
try{
let element = document.querySelector(selector);
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY); } catch (e) { return false}
}
}

35
src/renderer/style.less
View file

@ -1048,7 +1048,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 13px;
height: 1.3em;
line-height: 1.3em;
overflow: hidden;
white-space: nowrap;
max-width: 360px;
.song-name-normal {
@ -1080,16 +1080,44 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin: 0 0 0 0.25em;
}
.app-playback-controls:hover .marquee{
animation: unset;
&.song-artist{
overflow: hidden;
}
.song-artist{
overflow: hidden;
}
&.song-name{
overflow: hidden;
}
}
.marquee{
animation: marquee 15s linear infinite;
&.song-artist{
overflow: unset ;
}
.song-artist{
overflow: unset ;
}
&.song-name{
overflow: unset ;
}
}
.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
font-weight: 400;
font-size: 12px;
text-align: center;
/*height: 1.2em;
line-height: 1.2em;*/
overflow: hidden;
z-index: 1;
max-width: 360px;
/* animation: marquee 10s linear infinite; */
.song-artist-normal {
height: inherit;
@ -1221,6 +1249,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center;
flex-direction: column;
position: relative;
overflow: hidden;
}
.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {

3
src/renderer/views/main.ejs
View file

@ -83,13 +83,14 @@
</div>
<div class="playback-info">
<div class="song-name" style="-webkit-box-orient: horizontal;"
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
:style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
{{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon"
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div>
</div>
<div class="song-artist"
<div class="song-artist" :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
<div class="item-navigate song-artist" style="display: inline-block"
@click="getNowPlayingItemDetailed(`artist`)">