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{

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

@ -2,15 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/> <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin/> <link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/> <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/> <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/> <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/> <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/> <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/> <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/> <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
@ -23,7 +23,7 @@
</head> </head>
<body oncontextmenu="return false;" loading="1"> <body oncontextmenu="return false;" loading="1">
<div id="app"> <div id="app">
<div id="app-main"> <div id="app-main">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}"> <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
@ -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,49 +299,55 @@
<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">
<div class="bg-artwork--placeholder" v-else></div> <div class="bg-artwork--placeholder" v-else></div>
</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>
</div> </div>
<%- include("components/mediaitem-artwork"); %> <%- include("components/mediaitem-artwork"); %>
<!-- Generic Collection of MediaItems --> <!-- Generic Collection of MediaItems -->
<script type="text/x-template" id="collection-view-generic"> <script type="text/x-template" id="collection-view-generic">
<template> <template>
<div class="content-inner"> <div class="content-inner">
@ -348,8 +355,8 @@
</template> </template>
</script> </script>
<!-- Listen Now --> <!-- Listen Now -->
<script type="text/x-template" id="cider-listen-now"> <script type="text/x-template" id="cider-listen-now">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">Listen Now</h1> <h1 class="header-text">Listen Now</h1>
<template v-for="recom in data.data"> <template v-for="recom in data.data">
@ -375,11 +382,11 @@
</div> </div>
</script> </script>
<!-- Playlists / Albums --> <!-- Playlists / Albums -->
<%- include('pages/cider-playlist') %> <%- include('pages/cider-playlist') %>
<!-- Search --> <!-- Search -->
<script type="text/x-template" id="cider-search"> <script type="text/x-template" id="cider-search">
<div class="content-inner"> <div class="content-inner">
<div class="row"> <div class="row">
<div class="col-sm" style="width: auto;" v-if="getTopResult()"> <div class="col-sm" style="width: auto;" v-if="getTopResult()">
@ -445,37 +452,37 @@
</div> </div>
</script> </script>
<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>
<!-- Sidebar Item --> <!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$parent.page = page"> :class="$parent.getSidebarItemClass(page)" @click="$parent.page = page">
{{ name }} {{ name }}
</button> </button>
</script> </script>
<!-- Horizontal MediaItem Scroller --> <!-- Horizontal MediaItem Scroller -->
<%- include('components/mediaitem-scroller-horizontal') %> <%- include('components/mediaitem-scroller-horizontal') %>
<!-- Horizontal MediaItem Scroller (Large) --> <!-- Horizontal MediaItem Scroller (Large) -->
<%- include('components/mediaitem-scroller-horizontal-large') %> <%- include('components/mediaitem-scroller-horizontal-large') %>
<!-- Horizontal MediaItem Scroller (SP : Special) --> <!-- Horizontal MediaItem Scroller (SP : Special) -->
<%- include('components/mediaitem-scroller-horizontal-sp') %> <%- include('components/mediaitem-scroller-horizontal-sp') %>
<!-- MediaItem List Item --> <!-- MediaItem List Item -->
<%- include('components/mediaitem-list-item') %> <%- include('components/mediaitem-list-item') %>
<!-- MediaItem Horizontal Rectangle --> <!-- MediaItem Horizontal Rectangle -->
<%- include('components/mediaitem-hrect') %> <%- include('components/mediaitem-hrect') %>
<!-- MediaItem Square --> <!-- MediaItem Square -->
<%- include('components/mediaitem-square') %> <%- include('components/mediaitem-square') %>
<!-- MediaItem Square (Large) --> <!-- MediaItem Square (Large) -->
<%- include('components/mediaitem-square-large') %> <%- include('components/mediaitem-square-large') %>
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp') %> <%- include('components/mediaitem-square-sp') %>
<!-- Lyrics View --> <!-- Lyrics View -->
<script type="text/x-template" id="lyrics-view"> <script type="text/x-template" id="lyrics-view">
<div class="md-body lyric-body"> <div class="md-body lyric-body">
<template v-if="lyrics"> <template v-if="lyrics">
<template v-for="lyric in lyrics" v-if="lyric.line != 'lrcInstrumental'"> <template v-for="lyric in lyrics" v-if="lyric.line != 'lrcInstrumental'">
@ -504,8 +511,8 @@
</div> </div>
</script> </script>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script> <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script src="index.js?v=1"></script> <script src="index.js?v=1"></script>
</body> </body>
</html> </html>

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