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{

673
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,334 +23,341 @@
</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'}">
<div class="app-chrome--left"> <div class="app-chrome--left">
<div class="app-chrome-item full-height"> <div class="app-chrome-item full-height">
<div class="app-title"></div> <div class="app-title"></div>
</div> </div>
<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
</div> @click="mk.shuffleMode = 0"></button>
<div class="app-chrome-item"> </div>
<button class="playback-button previous" @click="mk.skipToPreviousItem()"></button> <div class="app-chrome-item">
</div> <button class="playback-button previous" @click="mk.skipToPreviousItem()"></button>
<div class="app-chrome-item"> </div>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button> <div class="app-chrome-item">
<button class="playback-button play" @click="mk.play()" v-else></button> <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
</div> <button class="playback-button play" @click="mk.play()" v-else></button>
<div class="app-chrome-item"> </div>
<button class="playback-button next" @click="mk.skipToNextItem()"></button> <div class="app-chrome-item">
</div> <button class="playback-button next" @click="mk.skipToNextItem()"></button>
<div class="app-chrome-item"> </div>
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" <div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button> @click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button> v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button> v-else-if="mk.repeatMode == 2"></button>
</div>
</div> </div>
</div> <div class="app-chrome--center">
<div class="app-chrome--center"> <div class="app-chrome-item playback-controls">
<div class="app-chrome-item playback-controls"> <template v-if="mkReady()">
<template v-if="mkReady()"> <div class="app-playback-controls">
<div class="app-playback-controls"> <div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div> <div class="playback-info">
<div class="playback-info"> <div class="song-name">
<div class="song-name"> {{ mk.nowPlayingItem["attributes"]["name"] }}
{{ mk.nowPlayingItem["attributes"]["name"] }} </div>
</div> <div class="song-artist">
<div class="song-artist"> {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
mk.nowPlayingItem["attributes"]["albumName"] }} mk.nowPlayingItem["attributes"]["albumName"] }}
</div>
<div class="song-progress">
<input type="range" step="0.01" min="0"
@change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
</div>
</div> </div>
<div class="song-progress"> <div class="actions">❤️</div>
<input type="range" step="0.01" min="0"
@change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration"
:value="playerLCD.playbackDuration">
</div>
</div> </div>
<div class="actions">❤️</div>
</div>
</template>
</div>
</div>
<div class="app-chrome--right">
<div class="app-chrome-item volume display--large">
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small">
<%- include("svg/cast.svg") %>
</button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"
@click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
</div>
<div class="app-chrome-item full-height">
<div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></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="close" @click="ipcRenderer.send('close')"></div>
</div>
</div>
</div>
</div>
<div class="app-navigation">
<div id="app-sidebar">
<div class="app-sidebar-header">
<div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search"
spellcheck="false"
@click="showSearch()"
@change="showSearch();searchQuery()"
placeholder="Search..."
v-model="search.term" class="search-input">
</div>
</div>
<div class="app-sidebar-content">
<div class="app-sidebar-header-text">
Apple Music
</div>
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
<div class="app-sidebar-header-text">
Library
</div>
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
<div class="app-sidebar-header-text">
Playlists
</div>
<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))'>
{{ item.attributes.name }}
</button>
</div>
<transition name="wpfade">
<div class="app-sidebar-content" v-if="chrome.menuOpened">
<button class="app-sidebar-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
Toggle Personal Info
</button>
<button class="app-sidebar-item">
About
</button>
<button class="app-sidebar-item">
Discord
</button>
<button class="app-sidebar-item">
Settings
</button>
<button class="app-sidebar-item">
Sign Out
</button>
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="display--small">
<button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"/>
</template> </template>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> </div>
<template v-if="chrome.userinfo.attributes">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div>
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
}}
</div>
</template>
<template v-else>
Sign in
</template>
</div>
<div class="sidebar-user-text" v-else>
Cider
</div>
</button>
</div> </div>
<div class="app-sidebar-notification" v-if="library.songs.downloadState == 1"> <div class="app-chrome--right">
<div>Updating your library...</div> <div class="app-chrome-item volume display--large">
<div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div> <input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
<div style="width: 100%"> v-if="typeof mk.volume != 'undefined'">
<progress style="width: 80%;" :value="library.songs.meta.progress" </div>
:max="library.songs.meta.total"></progress> <div class="app-chrome-item generic">
<button class="playback-button--small">
<%- include("svg/cast.svg") %>
</button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"
@click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
</div>
<div class="app-chrome-item full-height">
<div class="window-controls">
<div class="minimize" @click="ipcRenderer.send('minimize')"></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="close" @click="ipcRenderer.send('close')"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="app-content"> <div class="app-navigation">
<!-- Artist Page --> <div id="app-sidebar">
<transition name="wpfade"> <div class="app-sidebar-header">
<%- include('pages/artist') %> <div class="search-input-container">
</transition> <div class="search-input--icon"></div>
<!-- Playlist / Album page--> <input type="search" spellcheck="false" @click="showSearch()"
<transition name="wpfade"> @change="showSearch();searchQuery()" placeholder="Search..." v-model="search.term"
<template v-if="page.includes('playlist_')"> class="search-input">
<cider-playlist :data="showingPlaylist"></cider-playlist> </div>
</template> </div>
</transition> <div class="app-sidebar-content">
<transition name="wpfade"> <div class="app-sidebar-header-text">
<template v-if="page.includes('album_')"> Apple Music
<cider-playlist :data="showingPlaylist"></cider-playlist> </div>
</template> <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
</transition> <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
</transition> <sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
<!-- Browse --> <div class="app-sidebar-header-text">
<transition name="wpfade"> Library
<template v-if="page == 'browse'"> </div>
<div class="content-inner"> <sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start <sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
MusicKit <sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
<div class="app-sidebar-header-text">
Playlists
</div>
<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))'>
{{ item.attributes.name }}
</button>
</div>
<transition name="wpfade">
<div class="app-sidebar-content" v-if="chrome.menuOpened">
<button class="app-sidebar-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
Toggle Personal Info
</button> </button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()"> <button class="app-sidebar-item">
Stop About
MusicKit
</button> </button>
<br> <button class="app-sidebar-item">
<template v-if="mk.nowPlayingItem"> Discord
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }} </button>
<br> <button class="app-sidebar-item">
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }} Settings
</button>
<button class="app-sidebar-item">
Sign Out
</button>
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="display--small">
<button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes">
<img class="sidebar-user-icon" loading="lazy"
:src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)" />
</template> </template>
<div><input type="text" v-model="quickPlayQuery">
<button @click="quickPlay(quickPlayQuery)">Play</button>
</div>
<h1 class="header-text">Browse</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<div class="text"> <template v-if="chrome.userinfo.attributes">
Text <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
</div> </div>
<div class="subtext"> <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
Subtext }}
</div> </div>
</template>
<template v-else>
Sign in
</template>
</div> </div>
<br> <div class="sidebar-user-text" v-else>
<br> Cider
<h1 class="header-text">Listen Now</h1> </div>
<div class="winbox"> </button>
<div class="fancy">990kbps</div> </div>
<div class=""> <div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
<button class="md-btn md-btn-primary">Audio Quality Settings</button> <div>Updating your library...</div>
<div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
<div style="width: 100%">
<progress style="width: 80%;" :value="library.songs.meta.progress"
:max="library.songs.meta.total"></progress>
</div>
</div>
</div>
<div id="app-content">
<!-- Artist Page -->
<transition name="wpfade">
<%- include('pages/artist') %>
</transition>
<!-- Playlist / Album page-->
<transition name="wpfade">
<template v-if="page.includes('playlist_')">
<cider-playlist :data="showingPlaylist"></cider-playlist>
</template>
</transition>
<transition name="wpfade">
<template v-if="page.includes('album_')">
<cider-playlist :data="showingPlaylist"></cider-playlist>
</template>
</transition>
</transition>
<!-- Browse -->
<transition name="wpfade">
<template v-if="page == 'browse'">
<div class="content-inner">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
MusicKit
</button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary"
@click="unauthorize()">
Stop
MusicKit
</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<br>
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</template>
<div><input type="text" v-model="quickPlayQuery">
<button @click="quickPlay(quickPlayQuery)">Play</button>
</div> </div>
<h1 class="header-text">Browse</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
tincidunt
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div>
</div>
<br>
<br>
<h1 class="header-text">Listen Now</h1>
<div class="winbox">
<div class="fancy">990kbps</div>
<div class="">
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
</div>
</div>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</div> </div>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button> </template>
<button class="md-btn">Button</button> </transition>
<button class="md-btn md-btn-primary">Button</button> <!-- Listen Now -->
</div> <transition v-on:enter="getListenNow()" name="wpfade">
</template> <template v-if="page == 'listen_now'" @created="console.log('listennow')">
</transition> <cider-listen-now :data="listennow"></cider-listen-now>
<!-- Listen Now --> </template>
<transition v-on:enter="getListenNow()" name="wpfade"> </transition>
<template v-if="page == 'listen_now'" @created="console.log('listennow')"> <!-- Radio -->
<cider-listen-now :data="listennow"></cider-listen-now> <transition v-on:enter="getRadioStations()" name="wpfade">
</template> <template v-if="page == 'radio'" @created="console.log('radio')">
</transition> <div class="content-inner">
<!-- Radio --> <h1 class="header-text">Radio</h1>
<transition v-on:enter="getRadioStations()" name="wpfade"> <h3>Recent Stations</h3>
<template v-if="page == 'radio'" @created="console.log('radio')"> <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
<div class="content-inner">
<h1 class="header-text">Radio</h1>
<h3>Recent Stations</h3>
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
</div>
</template>
</transition>
<!-- Search -->
<transition name="wpfade">
<template v-if="page == 'search'">
<cider-search :search="search"></cider-search>
</template>
</transition>
<!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
<%- include('pages/library-songs') %>
</transition>
<!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbums()">
<template v-if="page == 'library-albums'">
<div class="content-inner">
<h1 class="header-text">Albums</h1>
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..." class="search-input">
</div> </div>
<mediaitem-square-large :item="item" </template>
v-for="item in library.albums.listing"></mediaitem-square-large> </transition>
</div> <!-- Search -->
</template> <transition name="wpfade">
<template v-if="page == 'search'">
<cider-search :search="search"></cider-search>
</template>
</transition>
<!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
<%- include('pages/library-songs') %>
</transition>
<!-- Library - Albums -->
<transition name="wpfade" v-on:enter="getLibraryAlbums()">
<template v-if="page == 'library-albums'">
<div class="content-inner">
<h1 class="header-text">Albums</h1>
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search" style="width:100%;" spellcheck="false" placeholder="Search..."
class="search-input">
</div>
<mediaitem-square-large :item="item" v-for="item in library.albums.listing">
</mediaitem-square-large>
</div>
</template>
</transition>
</div>
<transition name="drawertransition">
<div class="app-drawer" v-if="drawertest">
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
</lyrics-view>
</div>
</transition> </transition>
</div> </div>
<transition name="drawertransition"> </div>
<div class="app-drawer" v-if="drawertest"> <transition name="wpfade">
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view> <img v-show="chrome.artworkReady" @load="chrome.artworkReady = true" class="bg-artwork"
:src="getNowPlayingArtworkBG(32)">
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder" v-else></div>
</transition>
<div id="apple-music-video-container">
<div id="apple-music-video-player-controls">
<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">
<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>
</div> </div>
</transition> <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 id="apple-music-video-player"></div>
</div> </div>
</div> </div>
<transition name="wpfade">
<img v-show="chrome.artworkReady"
@load="chrome.artworkReady = true"
class="bg-artwork"
:src="getNowPlayingArtworkBG(32)">
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder" v-else></div>
</transition>
<div id="apple-music-video-container">
<div id="apple-music-video-player-controls">
<div id= "player-exit" 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">
<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>
</div>
</div>
<div id="apple-music-video-player"></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">
</div> </div>
</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">
<div class="row"> <div class="row">
@ -375,12 +382,12 @@
</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()">
<template> <template>
@ -445,38 +452,38 @@
</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'">
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
@ -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