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

Added about page

Browse source
This commit is contained in:
booploops 2022-01-12 19:30:37 -08:00
parent 5be1690553
commit 8b1b68ebff
6 changed files with 143 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/renderer/assets/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

1
src/renderer/assets/ko_fi.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="391" viewBox="0 0 391 391" width="391" xmlns="http://www.w3.org/2000/svg"><path d="m52 102h296v199h-296z" fill="#fff"/><path d="m174 1.09995c-79.2999 8.9-145.5999 65.29995-166.59995 141.70005-15.2 55.6-5.8 114 26.10005 161.7 61.7 92.3 189.4999 114.2 278.7999 47.8 74.8-55.8 99.8-156.6 59.7-241-9.7-20.3001-20.4-35.6001-36.4-52.2001-27.2-27.9-61.3-46.7-99.6-54.99995-18.3-3.900005-43.3-5.1-62-3zm117.8 102.90005c25.2 7 43.6 24.6 50.2 48 7.8 28.1-.1 55.6-21.5 73.9-11.5 9.8-32.5 17.1-49.6 17.1h-7.6l-.8 7.2c-1.9 19.4-11.4 32.5-27 37-2.9.9-25.2 1.2-80 1.2l-75.9999.1-6-2.8c-9.6-4.5-16.9-12.7-19.7-22.2-.4-1.6-.8-36.6-.8-77.8 0-80.7 0-80.6 5.2-82.7 1.4-.5 48.5999-.9 114.2999-.9 109.5-.1 112.2-.1 119.3 1.9z" fill="#579fbf"/><path d="m264 173v34h8.8c15.5 0 25-5.3 31.2-17.4 3.3-6.6 3.5-7.4 3.5-17.5 0-9.6-.3-11.1-2.8-16.3-3-6.2-8.6-11.6-15.2-14.8-3.3-1.6-6.2-2-14.8-2h-10.7z" fill="#579fbf"/><path d="m177.885 147.41c-7.3 2.4-9.6 3.7-15.3 8.4l-4.7 3.9-4.3-3.5c-14.2-11.6-35-12.9-46.7-2.9-5.8 5-8.1996 10.3-8.7996 19.4-.5 8.1 1.2 15.8 4.9996 23.2 1.1 2.2 5.9 8 10.6 13 14.7 15.3 42.4 40.7 44.4 40.7 1.2 0 12.1-10.1 27.3-25.3 22.9-22.8 25.7-25.9 28.6-32.1 4.1-8.7 5-18.8 2.5-26.4-4.9-14.6-23.4-23.4-38.6-18.4z" fill="#ff5f5f"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/renderer/assets/open_collective.svg Normal file
View file

@ -0,0 +1 @@
<svg height="38" viewBox="0 0 38 38" width="38" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533zm-4.7982246-4.79822459-4.9217466 4.92174663c-1.748848-.96649637-3.7599079-1.51660786-5.8994533-1.51660786-6.7457637 0-12.21428571 5.46852201-12.21428571 12.21428571s5.46852201 12.2142857 12.21428571 12.2142857c2.1395454 0 4.1506053-.5501115 5.8994533-1.5166078l4.9217466 4.9217466c-3.0707265 2.1314244-6.8000858 3.3805755-10.8211999 3.3805755-10.49341025 0-19-8.5065898-19-19 0-10.49341025 8.50658975-19 19-19 4.0211141 0 7.7504734 1.24915112 10.8211999 3.38057552z" fill="#7fadf2"/><path d="m34.6194245 8.17880011c2.1314244 3.07072649 3.3805755 6.80008579 3.3805755 10.82119989s-1.2491511 7.7504734-3.3805755 10.8211999l-4.9217466-4.9217466c.9664963-1.748848 1.5166078-3.7599079 1.5166078-5.8994533s-.5501115-4.1506053-1.5166078-5.8994533z" fill="#b8d3f4"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

28
src/renderer/style.less
View file

@ -45,6 +45,17 @@ body {
transition: opacity .10s var(--appleEase); transition: opacity .10s var(--appleEase);
} }
a:-webkit-any-link {
color: var(--keyColor);
}
hr {
appearance: none;
border: none;
height: 1px;
background-color: rgb(255 255 255 / 20%);
}
body[loading] { body[loading] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -1828,6 +1839,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */ /* Cider */
.about-page {
.sponsorBtn {
display: inline-flex;
justify-content: center;
align-items: center;
>img {
width: 26px;
margin: 0px 16px 0px 0px;
pointer-events: none;
}
}
}
.md-close-btn { .md-close-btn {
-webkit-mask-image: url("ameres://icons/webui/close.svg"); -webkit-mask-image: url("ameres://icons/webui/close.svg");
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
@ -1864,7 +1889,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&:active { &:active {
filter: brightness(75%); filter: brightness(75%);
transform: translateY(2px); transform: scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
} }
} }

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

@ -92,9 +92,10 @@
{{ mk.nowPlayingItem["attributes"]["artistName"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div> </div>
<div class="song-artist item-navigate" style="display: inline-block;" <div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')"> @click="getNowPlayingItemDetailed('album')">
<div class="separator" style="display: inline-block;">{{"-"}}</div> <div class="separator" style="display: inline-block;">{{"-"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ? (mk.nowPlayingItem["attributes"]["albumName"]) : "" }} {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div> </div>
</div> </div>
@ -127,7 +128,8 @@
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume display--large"> <div class="app-chrome-item volume display--large">
<div class="app-chrome-item volume-icon"></div> <div class="app-chrome-item volume-icon"></div>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"> v-if="typeof mk.volume != 'undefined'">
</div> </div>
<div class="app-chrome-item generic" v-if="false"> <div class="app-chrome-item generic" v-if="false">
@ -181,21 +183,30 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Apple Music Apple Music
</div> </div>
<sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item> <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg"
<sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item> page="home"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item> <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item> page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg"
page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Library Library
</div> </div>
<sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item> <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
<sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item> page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item> <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item> page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg"
page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
page="library-artists"></sidebar-library-item>
<div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu"> <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
Playlists Playlists
</div> </div>
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"></sidebar-playlist> <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
:item="item"></sidebar-playlist>
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened"> <div class="usermenu-container" v-if="chrome.menuOpened">
@ -220,10 +231,11 @@
</div> </div>
</div> </div>
</button> </button>
<button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial" @click="modals.spatialProperties = true"> <button class="usermenu-item" v-if="cfg.advanced.AudioContext && cfg.audio.spatial"
@click="modals.spatialProperties = true">
Spatialized Audio Settings Spatialized Audio Settings
</button> </button>
<button class="usermenu-item"> <button class="usermenu-item" @click="appRoute('about')">
About About
</button> </button>
<button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')"> <button class="usermenu-item" @click="window.open('https://discord.gg/applemusic')">
@ -240,7 +252,7 @@
</transition> </transition>
<div class="app-sidebar-footer"> <div class="app-sidebar-footer">
<div class="app-playback-controls display--small" v-if="mkReady()" <div class="app-playback-controls display--small" v-if="mkReady()"
@contextmenu="nowPlayingContextMenu"> @contextmenu="nowPlayingContextMenu">
<div class="control-buttons"> <div class="control-buttons">
<div class="app-chrome-item"> <div class="app-chrome-item">
@ -253,7 +265,8 @@
<button class="playback-button previous" @click="prevButton()"></button> <button class="playback-button previous" @click="prevButton()"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button> <button class="playback-button pause" @click="mk.pause()"
v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button> <button class="playback-button play" @click="mk.play()" v-else></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item">
@ -271,7 +284,8 @@
<div class="app-chrome-item volume"> <div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div> <div class="app-chrome-item volume-icon"></div>
<div class="input-container"> <div class="input-container">
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume" <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"> v-if="typeof mk.volume != 'undefined'">
</div> </div>
</div> </div>
@ -304,7 +318,9 @@
</button> </button>
</div> </div>
<div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show"> <div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
<div class="message">{{ library.downloadNotification.message }} ({{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }})</div> <div class="message">{{ library.downloadNotification.message }} ({{
library.downloadNotification.progress }} / {{ library.downloadNotification.total }})
</div>
</div> </div>
</div> </div>
<div id="app-content"> <div id="app-content">
@ -313,6 +329,12 @@
<button class="nav-item" <button class="nav-item"
@click="navigateForward()"><%- include('svg/chevron-right.svg') %></button> @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
</div> </div>
<!-- About -->
<transition name="wpfade">
<template v-if="page == 'about'">
<about-page></about-page>
</template>
</transition>
<!-- Artist Page --> <!-- Artist Page -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'artist-page' && artistPage.data.attributes"> <template v-if="page == 'artist-page' && artistPage.data.attributes">
@ -493,11 +515,13 @@
<img class="bg-artwork b" :src="$store.state.artwork.playerLCD"> <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
</div> </div>
</div> </div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics" <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view> :richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer"> <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
<button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? "Default View":'Fullscreen View'}}</button> <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
</div> "Default View":'Fullscreen View'}}
</button>
</div>
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue> <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div> </div>
</transition> </transition>
@ -506,11 +530,13 @@
</transition> </transition>
<transition name="fsModeSwitch"> <transition name="fsModeSwitch">
<div class="fullscreen-view-container" v-if="appMode == 'fullscreen'"> <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
<fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view> <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
:lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
</div> </div>
</transition> </transition>
<transition name="wpfade"> <transition name="wpfade">
<div class="bg-artwork-container" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}"> <div class="bg-artwork-container"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a " <img @load="chrome.artworkReady = true" class="bg-artwork a "
> >
<img class="bg-artwork b" <img class="bg-artwork b"
@ -596,6 +622,9 @@
<!-- Search --> <!-- Search -->
<%- include('pages/search') %> <%- include('pages/search') %>
<!-- About -->
<%- include('pages/about') %>
<script type="text/x-template" id="am-musiccovershelf"> <script type="text/x-template" id="am-musiccovershelf">
<h1>{{ component.attributes.title.stringForDisplay }}</h1> <h1>{{ component.attributes.title.stringForDisplay }}</h1>
</script> </script>

76
src/renderer/views/pages/about.ejs
View file

@ -1,19 +1,63 @@
Major thanks to the Cider Development Team and all of our contributors. <script type="text/x-template" id="about-page">
<div class="content-inner about-page">
<div class="row">
<div class="col">
<img src="assets/banner.png" alt="Cider Logo" style="display:block;margin:0 auto;width: 500px;">
<p style="text-align: center">Major thanks to the Cider Collective Team and all of our contributors.</p>
<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link" <p style="text-align: center">"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
target="_blank" target="_blank"
rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a> rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
All Rights All Rights
Reserved.</p> Reserved.</p>
</div>
<div class="col">
<div class="row">
<div class="col">
<h3></h3>
<h3>Contributors</h3>
<img class="md-contributors"
style="cursor:pointer;width:100%;"
onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
</div>
</div>
<div class="row">
<div class="col">
<h3>Cider Team</h3>
<ul>
<li><a href="https://github.com/cryptofyre" target="_blank">cryptofyre - Developer</a></li>
<li><a href="https://github.com/coredev-uk" target="_blank">Core - Developer</a></li>
<li><a href="https://github.com/child-duckling" target="_blank">Quacksire - Developer</a></li>
<li><a href="https://github.com/booploops" target="_blank">booploops - Developer</a></li>
<li><a href="https://github.com/vapormusic" target="_blank">vapormusic - Developer</a></li>
<li><a href="https://twitter.com/MoonyVoid" target="_blank">Void - Social Communications Team</a></li>
<li><a href="https://twitter.com/noah_grose" target="_blank">NoseySG - Social Communications Team</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<h3>Sponsor this project</h3>
<button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
<button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
</div>
</div>
</div>
cryptofyre - Developer - https://github.com/cryptofyre
Core - Developer - https://github.com/coredev-uk
Quacksire - Developer - https://github.com/child-duckling
booploops - Developer - https://github.com/booploops
vapormusic - Developer - https://github.com/vapormusic
Void - Social Communications Team - https://twitter.com/MoonyVoid
NoseySG - Social Communications Team - https://twitter.com/noah_grose
<img class="md-contributors"
onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
src="https://contrib.rocks/image?repo=ciderapp/Cider"/> </div>
</script>
<script>
Vue.component('about-page', {
template: '#about-page',
methods: {
}
});
</script>