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

Adds PIP and fullscreen to MV, need glyph for PIP

Browse source
This commit is contained in:
booploops 2021-12-06 23:38:07 -08:00
parent fed4c24034
commit 81d277b91d
4 changed files with 438 additions and 337 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/cider-ui-tests/index.js
View file

@ -211,10 +211,10 @@ const app = new Vue({
if (type.includes("musicVideo")){ if (type.includes("musicVideo")){
document.getElementById("apple-music-video-container").style.display = "block"; document.getElementById("apple-music-video-container").style.display = "block";
app.chrome.topChromeVisible = false // app.chrome.topChromeVisible = false
} else { } else {
document.getElementById("apple-music-video-container").style.display = "none"; document.getElementById("apple-music-video-container").style.display = "none";
app.chrome.topChromeVisible = true // app.chrome.topChromeVisible = true
} }
self.chrome.artworkReady = false self.chrome.artworkReady = false
self.lyrics = [] self.lyrics = []

43
resources/cider-ui-tests/style.css
View file

@ -1879,8 +1879,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
float: left; float: left;
display: none; display: none;
width: 100%; width: 100%;
height: 100%; height: calc(100% - var(--chromeHeight));
top: 0; bottom: 0;
z-index: 100000; z-index: 100000;
} }
@ -1906,6 +1906,45 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
float: left; float: left;
width: 100%; width: 100%;
margin: 10px; margin: 10px;
cursor: pointer;
}
#apple-music-video-player-controls #player-pip{
position: absolute;
z-index: 100001;
width: 32px;
height: 32px;
margin: 10px;
right: 50px;
border-radius: 100%;
background: rgb(255 255 255 / 50%);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#apple-music-video-player-controls #player-pip>svg {
width: 50%;
}
#apple-music-video-player-controls #player-fullscreen{
position: absolute;
z-index: 100001;
width: 32px;
height: 32px;
margin: 10px;
right: 0px;
border-radius: 100%;
background: rgb(255 255 255 / 50%);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#apple-music-video-player-controls #player-fullscreen>svg {
width: 50%;
} }
#apple-music-video-player-controls:hover{ #apple-music-video-player-controls:hover{

63
resources/cider-ui-tests/views/main.ejs
View file

@ -34,7 +34,8 @@
<div class="app-chrome-item"> <div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button> @click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button> <button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
</div> </div>
<div class="app-chrome-item"> <div class="app-chrome-item">
<button class="playback-button previous" @click="mk.skipToPreviousItem()"></button> <button class="playback-button previous" @click="mk.skipToPreviousItem()"></button>
@ -71,8 +72,7 @@
<div class="song-progress"> <div class="song-progress">
<input type="range" step="0.01" min="0" <input type="range" step="0.01" min="0"
@change="mk.seekToTime($event.target.value)" @change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration" :max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
:value="playerLCD.playbackDuration">
</div> </div>
</div> </div>
<div class="actions">❤️</div> <div class="actions">❤️</div>
@ -101,7 +101,8 @@
<div class="app-chrome-item full-height"> <div class="app-chrome-item full-height">
<div class="window-controls"> <div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></div> <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
<div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div> <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')">
</div>
<div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div> <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
<div class="close" @click="ipcRenderer.send('close')"></div> <div class="close" @click="ipcRenderer.send('close')"></div>
</div> </div>
@ -113,12 +114,9 @@
<div class="app-sidebar-header"> <div class="app-sidebar-header">
<div class="search-input-container"> <div class="search-input-container">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" <input type="search" spellcheck="false" @click="showSearch()"
spellcheck="false" @change="showSearch();searchQuery()" placeholder="Search..." v-model="search.term"
@click="showSearch()" class="search-input">
@change="showSearch();searchQuery()"
placeholder="Search..."
v-model="search.term" class="search-input">
</div> </div>
</div> </div>
<div class="app-sidebar-content"> <div class="app-sidebar-content">
@ -138,7 +136,8 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Playlists Playlists
</div> </div>
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href" <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
:href="item.href"
@click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'> @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
{{ item.attributes.name }} {{ item.attributes.name }}
</button> </button>
@ -168,13 +167,13 @@
@click="chrome.menuOpened = !chrome.menuOpened"> @click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy" <img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)" /> :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)" />
</template> </template>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div> <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
</div>
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
}} }}
</div> </div>
@ -221,7 +220,8 @@
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
MusicKit MusicKit
</button> </button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()"> <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
@click="unauthorize()">
Stop Stop
MusicKit MusicKit
</button> </button>
@ -236,7 +236,8 @@
</div> </div>
<h1 class="header-text">Browse</h1> <h1 class="header-text">Browse</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
tincidunt
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi. consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p> </p>
<div class="media-item--small"> <div class="media-item--small">
@ -298,28 +299,25 @@
<h1 class="header-text">Albums</h1> <h1 class="header-text">Albums</h1>
<div class="search-input-container" style="width:100%;margin: 16px 0px;"> <div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" <input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
style="width:100%;" class="search-input">
spellcheck="false"
placeholder="Search..." class="search-input">
</div> </div>
<mediaitem-square-large :item="item" <mediaitem-square-large :item="item" v-for="item in library.albums.listing">
v-for="item in library.albums.listing"></mediaitem-square-large> </mediaitem-square-large>
</div> </div>
</template> </template>
</transition> </transition>
</div> </div>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" v-if="drawertest"> <div class="app-drawer" v-if="drawertest">
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view> <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
</lyrics-view>
</div> </div>
</transition> </transition>
</div> </div>
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
<img v-show="chrome.artworkReady" <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
@load="chrome.artworkReady = true"
class="bg-artwork"
:src="getNowPlayingArtworkBG(32)"> :src="getNowPlayingArtworkBG(32)">
</transition> </transition>
<transition name="wpfade"> <transition name="wpfade">
@ -327,11 +325,20 @@
</transition> </transition>
<div id="apple-music-video-container"> <div id="apple-music-video-container">
<div id="apple-music-video-player-controls"> <div id="apple-music-video-player-controls">
<div id= "player-exit" onclick="app.exitMV()"> <div id="player-exit" title="Close" onclick="app.exitMV()">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" aria-role="presentation" focusable="false"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
<path d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z" fill-rule="nonzero"/> aria-role="presentation" focusable="false">
<path
d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
fill-rule="nonzero" />
</svg> </svg>
</div> </div>
<div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()" title="Picture-in-Picture">
<%- include("svg/fullscreen.svg") %>
</div>
<div id="player-fullscreen" @click="document.querySelector('video').requestFullscreen()" title="Fullscreen">
<%- include("svg/fullscreen.svg") %>
</div>
</div> </div>
<div id="apple-music-video-player"></div> <div id="apple-music-video-player"></div>
</div> </div>

55
resources/cider-ui-tests/views/svg/fullscreen.svg Normal file
View file

@ -0,0 +1,55 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
fill="#eee" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
<g>
<g id="Fullscreen_1_">
<path d="M372.939,216.545c-6.123,0-12.03,5.269-12.03,12.03v132.333H24.061V24.061h132.333c6.388,0,12.03-5.642,12.03-12.03
S162.409,0,156.394,0H24.061C10.767,0,0,10.767,0,24.061v336.848c0,13.293,10.767,24.061,24.061,24.061h336.848
c13.293,0,24.061-10.767,24.061-24.061V228.395C384.97,221.731,380.085,216.545,372.939,216.545z"/>
<path d="M372.939,0H252.636c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h91.382L99.635,268.432
c-4.668,4.668-4.668,12.235,0,16.903c4.668,4.668,12.235,4.668,16.891,0L360.909,40.951v91.382c0,6.641,5.39,12.03,12.03,12.03
s12.03-5.39,12.03-12.03V12.03l0,0C384.97,5.558,379.412,0,372.939,0z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB