import frontend remote
This commit is contained in:
child_duckling
parent
2f57d9bb3f
commit
ff368570f0
26 changed files with 3713 additions and 1 deletions
22
src/web-remote/assets/Grabber.svg
Normal file
22
src/web-remote/assets/Grabber.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 28 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-11,-10)">
|
||||
<path d="M39,12.24C39,11.004 37.996,10 36.76,10L13.24,10C12.004,10 11,11.004 11,12.24L11,71.76C11,72.996 12.004,74 13.24,74L36.76,74C37.996,74 39,72.996 39,71.76L39,12.24Z" style="fill:rgb(108,108,108);fill-opacity:0.43;"/>
|
||||
<g transform="matrix(0.714286,0,0,1,7.14286,0)">
|
||||
<rect x="18" y="41" width="14" height="2" style="fill:rgb(231,231,231);fill-opacity:0.77;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.714286,0,0,1,7.14286,-5)">
|
||||
<rect x="18" y="41" width="14" height="2" style="fill:rgb(231,231,231);fill-opacity:0.77;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.714286,0,0,1,7.14286,5)">
|
||||
<rect x="18" y="41" width="14" height="2" style="fill:rgb(231,231,231);fill-opacity:0.77;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.571429,0,0,0.6,10.7143,10.4)">
|
||||
<path d="M25,26L32,36L18,36L25,26Z" style="fill:rgb(231,231,231);fill-opacity:0.77;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.571429,0,0,-0.6,10.7143,73.6)">
|
||||
<path d="M25,26L32,36L18,36L25,26Z" style="fill:rgb(231,231,231);fill-opacity:0.77;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/web-remote/assets/arrow-left.svg
Normal file
1
src/web-remote/assets/arrow-left.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
|
||||
|
After Width: | Height: | Size: 521 B |
1
src/web-remote/assets/backward.svg
Normal file
1
src/web-remote/assets/backward.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M11.5 280.6l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2zm256 0l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 500 B |
1
src/web-remote/assets/forward.svg
Normal file
1
src/web-remote/assets/forward.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M500.5 231.4l-192-160C287.9 54.3 256 68.6 256 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2zm-256 0l-192-160C31.9 54.3 0 68.6 0 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 493 B |
1
src/web-remote/assets/infinity.svg
Normal file
1
src/web-remote/assets/infinity.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="white"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"/></svg>
|
||||
|
After Width: | Height: | Size: 684 B |
1
src/web-remote/assets/list.svg
Normal file
1
src/web-remote/assets/list.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>
|
||||
|
After Width: | Height: | Size: 831 B |
1
src/web-remote/assets/pause.svg
Normal file
1
src/web-remote/assets/pause.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"/></svg>
|
||||
|
After Width: | Height: | Size: 487 B |
1
src/web-remote/assets/play.svg
Normal file
1
src/web-remote/assets/play.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/></svg>
|
||||
|
After Width: | Height: | Size: 384 B |
1
src/web-remote/assets/quote-right.svg
Normal file
1
src/web-remote/assets/quote-right.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>
|
||||
|
After Width: | Height: | Size: 640 B |
47
src/web-remote/assets/repeat.svg
Normal file
47
src/web-remote/assets/repeat.svg
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<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"
|
||||
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="white" d="M42,12H20.414l7.293-7.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0l-8.999,8.999
|
||||
c-0.093,0.092-0.166,0.203-0.217,0.326c-0.101,0.244-0.101,0.52,0,0.764c0.051,0.123,0.124,0.234,0.217,0.326l8.999,8.999
|
||||
C26.488,22.902,26.744,23,27,23s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L20.414,14H42c8.822,0,16,7.178,16,16
|
||||
c0,4.252-1.668,8.264-4.696,11.295c-0.391,0.391-0.391,1.024,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293
|
||||
C58.124,39.3,60,34.786,60,30C60,20.075,51.925,12,42,12z"/>
|
||||
<path fill="white" d="M35.707,37.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L41.586,46H18C9.178,46,2,38.822,2,30
|
||||
c0-3.783,1.359-7.46,3.828-10.354c0.358-0.421,0.309-1.052-0.111-1.41c-0.419-0.359-1.052-0.31-1.41,0.111
|
||||
C1.529,21.604,0,25.741,0,30c0,9.925,8.075,18,18,18h23.586l-7.293,7.293c-0.391,0.391-0.391,1.023,0,1.414
|
||||
C34.488,56.902,34.744,57,35,57s0.512-0.098,0.707-0.293l9-9c0.391-0.391,0.391-1.023,0-1.414L35.707,37.293z"/>
|
||||
</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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/web-remote/assets/search.svg
Normal file
1
src/web-remote/assets/search.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
||||
|
After Width: | Height: | Size: 618 B |
45
src/web-remote/assets/shuffle.svg
Normal file
45
src/web-remote/assets/shuffle.svg
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<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"
|
||||
viewBox="0 0 230.055 230.055" style="enable-background:new 0 0 230.055 230.055;" xml:space="preserve">
|
||||
<path fill="white" d="M199.419,124.497c-3.516-3.515-9.213-3.515-12.729,0c-3.515,3.515-3.515,9.213,0,12.728l12.637,12.636h-8.406
|
||||
c-8.177,0-16.151-2.871-22.453-8.083l-32.346-26.751l32.345-26.751c6.303-5.212,14.277-8.083,22.454-8.083h8.406L186.69,92.83
|
||||
c-3.515,3.515-3.515,9.213,0,12.728c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l28-28
|
||||
c3.515-3.515,3.515-9.213,0-12.728l-28-28c-3.516-3.515-9.213-3.515-12.729,0c-3.515,3.515-3.515,9.213,0,12.728l12.637,12.636
|
||||
h-8.406c-12.354,0-24.403,4.337-33.926,12.211L122,103.348L82.564,70.733c-6.658-5.507-15.084-8.54-23.724-8.54H9
|
||||
c-4.971,0-9,4.029-9,9s4.029,9,9,9h49.841c4.462,0,8.813,1.566,12.252,4.411l36.786,30.423L71.094,145.45
|
||||
c-3.439,2.844-7.791,4.411-12.253,4.411H9c-4.971,0-9,4.029-9,9s4.029,9,9,9h49.841c8.64,0,17.065-3.033,23.725-8.54L122,126.707
|
||||
l34.996,28.943c9.521,7.875,21.57,12.211,33.925,12.211h8.406l-12.637,12.636c-3.515,3.515-3.515,9.213,0,12.728
|
||||
c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l28-28c3.515-3.515,3.515-9.213,0-12.728L199.419,124.497z"/>
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/web-remote/assets/volume-down.svg
Normal file
1
src/web-remote/assets/volume-down.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"/></svg>
|
||||
|
After Width: | Height: | Size: 710 B |
1
src/web-remote/assets/volume-up.svg
Normal file
1
src/web-remote/assets/volume-up.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1044
src/web-remote/ciderframework.css
Normal file
1044
src/web-remote/ciderframework.css
Normal file
File diff suppressed because it is too large
Load diff
BIN
src/web-remote/icon-192x192.png
Normal file
BIN
src/web-remote/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/web-remote/icon-256x256.png
Normal file
BIN
src/web-remote/icon-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/web-remote/icon-384x384.png
Normal file
BIN
src/web-remote/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/web-remote/icon-512x512.png
Normal file
BIN
src/web-remote/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -1 +1,860 @@
|
|||
Web Remote
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<title>Web Remote</title>
|
||||
<link rel="stylesheet" href="style.css?v=2">
|
||||
<script src="vue.js"></script>
|
||||
<script src="sortable.min.js"></script>
|
||||
<script src="vuedraggable.umd.min.js"></script>
|
||||
<link rel="manifest" href="./manifest.json?v=2">
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
<div id="app" :style="{'--artwork': getAlbumArtUrl()}">
|
||||
<!-- App view when connected -->
|
||||
<template v-if="connectedState == 1">
|
||||
<!-- Streamer Overlay -->
|
||||
<template></template>
|
||||
<!-- Mini Player -->
|
||||
<template v-if="screen == 'miniplayer'">
|
||||
<div class="miniplayer-main">
|
||||
<div class="media-artwork--miniplayer" :class="artworkPlaying()"
|
||||
:style="{'--artwork': getAlbumArtUrl()}">
|
||||
</div>
|
||||
<div class="miniplayer-draggable">
|
||||
|
||||
</div>
|
||||
<div class="miniplayer-controls">
|
||||
<button class="md-btn playback-button--small repeat" @click="repeat()"
|
||||
v-if="player.currentMediaItem.repeatMode == 0"></button>
|
||||
<button class="md-btn playback-button--small repeat active" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
||||
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
||||
<button class="md-btn playback-button previous" @click="previous()"></button>
|
||||
<button class="md-btn playback-button pause" @click="pause()"
|
||||
v-if="player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button play" @click="play()" v-else></button>
|
||||
<button class="md-btn playback-button next" @click="next()"></button>
|
||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
||||
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()"
|
||||
v-else></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Player -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel player-panel" v-if="screen == 'player'">
|
||||
<div class="player_top">
|
||||
<div class="md-body player-artwork-container">
|
||||
<div class="media-artwork" :class="artworkPlaying()"
|
||||
:style="{'--artwork': getAlbumArtUrl()}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player_bottom" v-if="player.lowerPanelState == 'lyrics'">
|
||||
<div class="md-header" style="width:100%;">
|
||||
<div class="list-entry" v-if="false">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" :style="{'--artwork': getAlbumArtUrl()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ player.currentMediaItem.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ player.currentMediaItem.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-body lyric-body" style="width:100%;">
|
||||
<template v-if="player.lyrics">
|
||||
<template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'">
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"
|
||||
:class="getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
{{ lyric.line }}
|
||||
</h3>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"
|
||||
:class="getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
<div class="lyricWaiting">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</h3>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No Lyrics Available
|
||||
</template>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics active"
|
||||
@click="player.lowerPanelState = 'controls'"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player_bottom" v-if="player.lowerPanelState == 'controls'">
|
||||
<div class="md-footer">
|
||||
<div class="row player-track-info">
|
||||
<div class="col nopadding text-overflow-elipsis">
|
||||
<div class="player-song-title text-overflow-elipsis">
|
||||
{{ player.currentMediaItem.name }}
|
||||
</div>
|
||||
<div class="player-song-artist text-overflow-elipsis" @click="searchArtist()">
|
||||
{{ player.currentMediaItem.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto nopadding player-more-container" v-if="false" style="">
|
||||
<button @click="player.songActions = true;" class="player-more-button">...</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<input type="range" min="0"
|
||||
:value="player.currentMediaItem.durationInMillis - player.currentMediaItem.remainingTime"
|
||||
:max="player.currentMediaItem.durationInMillis" class="web-slider playback-slider"
|
||||
@input="seekTo($event.target.value)">
|
||||
<div class="row nopadding player-duration-container" style="width: 90%;margin: 0 auto;">
|
||||
<div class="col nopadding player-duration-time" style="text-align:left">
|
||||
{{ parseTime(player.currentMediaItem.durationInMillis -
|
||||
player.currentMediaItem.remainingTime) }}
|
||||
</div>
|
||||
<div class="col nopadding player-duration-time" style="text-align:right">
|
||||
-{{ parseTime(player.currentMediaItem.remainingTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer playback-buttons">
|
||||
<button class="md-btn playback-button--small repeat" @click="repeat()"
|
||||
v-if="player.currentMediaItem.repeatMode == 0"></button>
|
||||
<button class="md-btn playback-button--small repeat active" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 2"></button>
|
||||
<button class="md-btn playback-button--small repeat repeatOne" @click="repeat()"
|
||||
v-else-if="player.currentMediaItem.repeatMode == 1"></button>
|
||||
<button class="md-btn playback-button previous" @click="previous()"></button>
|
||||
<button class="md-btn playback-button pause" @click="pause()"
|
||||
v-if="player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button play" @click="play()" v-else></button>
|
||||
<button class="md-btn playback-button next" @click="next()"></button>
|
||||
<button class="md-btn playback-button--small shuffle" @click="shuffle()"
|
||||
v-if="player.currentMediaItem.shuffleMode == 0"></button>
|
||||
<button class="md-btn playback-button--small shuffle active" @click="shuffle()"
|
||||
v-else></button>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div class="row volume-slider-container">
|
||||
<div class="col-auto">
|
||||
<div class="player-volume-glyph decrease"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="range" class="web-slider volume-slider" max="1" min="0" step="0.01"
|
||||
@input="setVolume($event.target.value)" :value="player.currentMediaItem.volume">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="player-volume-glyph increase"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||
@click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics"
|
||||
v-if="checkOrientation() == 'landscape'" @click="showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small queue" @click="showQueue()"></button>
|
||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Search -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel search-panel" v-if="screen == 'search'">
|
||||
<div class="search-header">
|
||||
<div class="md-header">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<button class="back-button" @click="screen = 'player'"></button>
|
||||
</div>
|
||||
<div class="col" style="display: flex;align-items: center;">
|
||||
<div class="col">
|
||||
<input type="text" placeholder="Artists, Songs, Lyrics, and More"
|
||||
spellcheck="false" v-model="search.query" @change="searchQuery()"
|
||||
v-on:keyup.enter="searchQuery()" class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-header search-type-container">
|
||||
<button class="search-type-button" @click="search.searchType = 'applemusic';searchQuery()"
|
||||
:class="searchTypeClass('applemusic')" style="width:100%;">Apple Music
|
||||
</button>
|
||||
<button class="search-type-button" @click="search.searchType = 'library';searchQuery()"
|
||||
:class="searchTypeClass('library')" style="width:100%;">Library
|
||||
</button>
|
||||
</div>
|
||||
<div class="md-header search-tab-container" v-if="search.state == 2">
|
||||
<button class="search-tab" @click="search.tab = 'all'" :class="searchTabClass('all')">All
|
||||
Results
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'songs'"
|
||||
:class="searchTabClass('songs')">Songs
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'albums'"
|
||||
:class="searchTabClass('albums')">Albums
|
||||
</button>
|
||||
<button class="search-tab" @click="search.tab = 'artists'"
|
||||
:class="searchTabClass('artists')">Artists
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-body-container">
|
||||
<transition name="wpfade">
|
||||
<div class="md-body search-body" v-if="search.state == 0">
|
||||
<div
|
||||
style="font-size: 17px;display:flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<img src="./assets/search.svg" style="width: 40px;margin: 32px;opacity: 0.85">
|
||||
Search by song, album, artist, or lyrics.
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<div class="md-body search-body" v-if="search.state == 1">
|
||||
<!-- loading state -->
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<div class="md-body search-body"
|
||||
ref="searchBody"
|
||||
@scroll="searchScroll"
|
||||
style="overflow-y:auto;" v-if="search.state == 2">
|
||||
<template v-if="canShowSearchTab('songs')">
|
||||
<div class="list-entry-header">Songs</div>
|
||||
|
||||
<div class="list-entry" v-for="song in search.results.songs"
|
||||
@click="trackSelect(song)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="song.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ song.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ song.artistName }}
|
||||
<span class="lossless-badge" v-if="song.audioTraits.includes('lossless')">Lossless</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-entry" v-for="song in search.results['library-songs']"
|
||||
@click="trackSelect(song)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="song.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ song.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ song.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template v-if="canShowSearchTab('albums')">
|
||||
<div class="list-entry-header">Albums</div>
|
||||
|
||||
<div class="list-entry" v-for="album in search.results.albums"
|
||||
@click="showAlbum(album.id)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="album.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(album.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ album.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ album.artistName }}
|
||||
<span class="lossless-badge" v-if="album.audioTraits.includes('lossless')">Lossless</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-entry" v-for="album in search.results['library-albums']">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="album.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(album.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ album.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ album.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template v-if="canShowSearchTab('artists')">
|
||||
<div class="list-entry-header">Artists</div>
|
||||
|
||||
<div class="list-entry"
|
||||
@click="showArtist(artist.id)"
|
||||
v-for="artist in search.results.artists"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image artist" v-if="artist.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artist.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ artist.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-entry" v-for="artist in search.results['library-artists']">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image artist" v-if="artist.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artist.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ artist.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<footer-player></footer-player>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Track Select Actions -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" style="overflow-y:auto;"
|
||||
v-if="search.trackSelect">
|
||||
<div class="md-body context-menu-body">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center" v-if="search.selected.artwork"
|
||||
style="display:flex;align-items: center;">
|
||||
<div class="list-entry-image"
|
||||
:style="{'--artwork': getAlbumArtUrlList(search.selected.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center" style="display:flex;align-items: center;">
|
||||
<div style="width:100%;font-size: 18px;">
|
||||
{{ search.selected.name }}
|
||||
</div>
|
||||
<div style="width:100%;font-size: 16px;">
|
||||
{{ search.selected.artistName }}
|
||||
</div>
|
||||
<div style="width:100%;font-size: 14px;">
|
||||
{{ parseTime(search.selected.durationInMillis) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="md-body context-menu-body" style="height: auto;">
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playMediaItemById(search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
▶️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playNext('song', search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Next
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
⏭️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left"
|
||||
@click="playLater('song', search.selected.id);clearSelectedTrack()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Play Later
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
⌛
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left" v-if="false">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Open in {{ musicAppVariant() }}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
🎵
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="context-menu-item" @click="clearSelectedTrack()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Song Actions -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" v-if="player.songActions">
|
||||
<div class="md-header">
|
||||
|
||||
</div>
|
||||
<div class="md-body context-menu-body">
|
||||
<button class="context-menu-item context-menu-item--left" v-if="false">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Add To Library
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
➕
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left" v-if="false">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Love
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
❤️
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Share
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
🌐
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="context-menu-item context-menu-item--left">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Open in {{ musicAppVariant() }}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
🎵
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="context-menu-item" @click="player.songActions = false">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Artist Page -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel" v-if="screen == 'artist-page'" v-if="artistPage.data['name']">
|
||||
<div class="md-header">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<button class="back-button" @click="showSearch(true)"></button>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
{{ artistPage.data["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-body-container" :style="getMediaPalette(artistPage.data)">
|
||||
<div class="artist-header" v-if="artistPage.data['artwork']"
|
||||
:style="getMediaPalette(artistPage.data)">
|
||||
<div class="artist-header-portrait"
|
||||
:style="{'--artwork': getAlbumArtUrlList(artistPage.data['artwork']['url'], 600)}"></div>
|
||||
<h2>{{ artistPage.data["name"] }}</h2>
|
||||
</div>
|
||||
<div class="md-body artist-body">
|
||||
<h2>Songs</h2>
|
||||
<div class="song-scroller-horizontal">
|
||||
<button v-for="song in artistPage.data['songs']" class="song-placeholder"
|
||||
@click="trackSelect(song)">
|
||||
{{ song.name }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>Albums</h2>
|
||||
<div class="mediaitem-scroller-horizontal">
|
||||
<button v-for="album in artistPage.data['albums']" class="album-placeholder"
|
||||
@click="showAlbum(album.id)">
|
||||
{{ album.name }}
|
||||
</button>
|
||||
</div>
|
||||
<h2>Playlists</h2>
|
||||
<div class="mediaitem-scroller-horizontal">
|
||||
<button v-for="playlist in artistPage.data['playlists']" class="album-placeholder">
|
||||
{{ playlist.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer-player></footer-player>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Queue -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel" v-if="screen == 'queue'">
|
||||
<div class="md-header">
|
||||
<div class="list-entry" @click="screen = 'player'">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" :style="{'--artwork': getAlbumArtUrl()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ player.currentMediaItem.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ player.currentMediaItem.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-header" style="text-align: right;padding: 5px 16px;">
|
||||
<button
|
||||
class="md-btn playback-button--small autoplay"
|
||||
v-if="!player.currentMediaItem.autoplayEnabled"
|
||||
@click="setAutoplay(true)"
|
||||
></button>
|
||||
<button
|
||||
class="md-btn playback-button--small autoplay activeColor"
|
||||
v-else
|
||||
@click="setAutoplay(false)"
|
||||
></button>
|
||||
</div>
|
||||
<div class="md-body queue-body" v-if="!player.queue['_queueItems']">
|
||||
Empty
|
||||
</div>
|
||||
<div class="md-body queue-body" style="overflow-y:auto;" id="list-queue" v-else>
|
||||
<draggable
|
||||
v-model="queue.temp"
|
||||
handle=".handle"
|
||||
filter=".passed"
|
||||
@change="queueMove">
|
||||
<template
|
||||
v-for="(song, position) in queue.temp"
|
||||
v-if="position > player.queue['_position']"
|
||||
>
|
||||
<div class="list-entry" :class="getQueuePositionClass(position)">
|
||||
<div class="row" style="width:100%;">
|
||||
<div class="col-auto">
|
||||
<div class="handle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="song.item.attributes.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(song.item.attributes.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ song.item.attributes.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ song.item.attributes.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center" style="text-align:right;">
|
||||
<div v-if="position == player.queue['_position']">▶️</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics" v-if="checkOrientation() == 'portrait'"
|
||||
@click="showLyrics()"></button>
|
||||
<button class="md-btn playback-button--small lyrics"
|
||||
v-if="checkOrientation() == 'landscape'"
|
||||
@click="screen = 'player';showLyricsInline()"></button>
|
||||
<button class="md-btn playback-button--small queue active" @click="screen = 'player'"></button>
|
||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Lyrics -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel" v-if="screen == 'lyrics'">
|
||||
<div class="md-header">
|
||||
<div class="list-entry" @click="screen = 'player'">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" :style="{'--artwork': getAlbumArtUrl()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ player.currentMediaItem.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ player.currentMediaItem.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-body lyric-body">
|
||||
<template v-if="player.lyrics">
|
||||
<template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'">
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"
|
||||
:class="getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
{{ lyric.line }}
|
||||
</h3>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"
|
||||
:class="getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
<div class="lyricWaiting">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</h3>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No Lyrics Available
|
||||
</template>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<button class="md-btn playback-button--small lyrics active" @click="screen = 'player'"></button>
|
||||
<button class="md-btn playback-button--small queue" @click="showQueue()"></button>
|
||||
<button class="md-btn playback-button--small search" @click="showSearch()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Album Page -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel md-container_album"
|
||||
v-if="screen == 'album-page' && albumPage.data['name']"
|
||||
>
|
||||
<div class="md-header">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<button class="back-button" @click="showSearch(true)"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-body-container">
|
||||
<div class="md-header">
|
||||
<div class="albumpage-artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(albumPage.data['artwork']['url'], 300)}">
|
||||
</div>
|
||||
<div class="albumpage-album-name">
|
||||
{{ albumPage.data["name"] }}
|
||||
</div>
|
||||
<div class="albumpage-artist-name" @click="showArtist(albumPage.data['artists'][0]['id'])">
|
||||
{{ albumPage.data["artistName"] }}
|
||||
</div>
|
||||
<div class="albumpage-misc-info">
|
||||
{{ albumPage.data.genreNames[0] }} ∙ {{ new Date(albumPage.data.releaseDate).getFullYear()
|
||||
}}
|
||||
</div>
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col">
|
||||
<button class="wr-btn"
|
||||
@click="playAlbum(albumPage.data.id, false)"
|
||||
style="width:100%;">Play
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="wr-btn" style="width:100%;"
|
||||
@click="playAlbum(albumPage.data.id, true)"
|
||||
>Shuffle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="albumpage-album-notes" v-if="albumPage.data['editorialNotes']">
|
||||
<div class="notes-preview" v-html="albumPage.data['editorialNotes']['standard']">
|
||||
</div>
|
||||
<button @click="albumPage.editorsNotes = true" class="notes-more">More</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md-body artist-body">
|
||||
<div class="list-entry-header">Tracks</div>
|
||||
<div class="list-entry" v-for="song in albumPage.data['tracks']"
|
||||
@click="trackSelect(song)">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div class="list-entry-image" v-if="song.artwork"
|
||||
:style="{'--artwork': getAlbumArtUrlList(song.artwork.url)}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center">
|
||||
<div class="list-entry-name">
|
||||
{{ song.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist">
|
||||
{{ song.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
<div>{{ albumPage.data['tracks'].length }} Tracks</div>
|
||||
<div>
|
||||
{{ albumPage.data['copyright'] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer-player></footer-player>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Album Page - Editorial Notes -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel context-menu" v-if="albumPage.editorsNotes"
|
||||
style="padding-top: 42px;">
|
||||
<div class="md-header"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="font-size: 18px;background:var(--bgColor);color:var(--textColor1);text-align: center;border-radius: 10px 10px 0 0;border-top: 1px solid #ffffff1f;"
|
||||
>
|
||||
{{ albumPage.data["name"] }}
|
||||
</div>
|
||||
<div class="md-body album-page-fullnotes-body"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="background:var(--bgColor);color:var(--textColor1);"
|
||||
v-html="albumPage.data['editorialNotes']['standard']">
|
||||
</div>
|
||||
<div class="md-footer"
|
||||
:style="getMediaPalette(albumPage.data)"
|
||||
style="background:var(--bgColor);color:var(--textColor1);"
|
||||
>
|
||||
<button class="context-menu-item" @click="albumPage.editorsNotes = false">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<!-- Loading -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel connection-error-panel" v-if="connectedState != 1">
|
||||
<div class="md-header">
|
||||
|
||||
</div>
|
||||
<div class="md-body" style="display:flex;justify-content: center;align-items: center;">
|
||||
<div v-if="connectedState == 0">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else>
|
||||
<h3 style="text-align:center;">Connection Interrupted</h3>
|
||||
<button class="md-btn md-btn-primary"
|
||||
style="font-weight:500;width: 120px;border-radius: 50px;display:block;margin: 0 auto;"
|
||||
@click="connect()">Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- Template -->
|
||||
<transition name="wpfade">
|
||||
<div class="md-container md-container_panel" v-if="false">
|
||||
<div class="md-header">
|
||||
|
||||
</div>
|
||||
<div class="md-body">
|
||||
|
||||
</div>
|
||||
<div class="md-footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<script type="text/x-template" id="footer-player">
|
||||
<div class="footer-player" v-show="$parent.player.currentMediaItem['name']">
|
||||
<div class="row" style="width:100%;margin:0px;">
|
||||
<div class="col-auto flex-center" style="padding:0 6px;" @click="$parent.screen = 'player'">
|
||||
<div class="list-entry-image" :style="{'--artwork': $parent.getAlbumArtUrl()}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center text-overflow-elipsis" @click="$parent.screen = 'player'">
|
||||
<div class="list-entry-name text-overflow-elipsis">
|
||||
{{ $parent.player.currentMediaItem.name }}
|
||||
</div>
|
||||
<div class="list-entry-artist text-overflow-elipsis">
|
||||
{{ $parent.player.currentMediaItem.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="md-btn playback-button pause" @click="$parent.pause()"
|
||||
v-if="$parent.player.currentMediaItem.status"></button>
|
||||
<button class="md-btn playback-button play" @click="$parent.play()" v-else></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="index.js?v=1"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
619
src/web-remote/index.js
Normal file
619
src/web-remote/index.js
Normal file
|
|
@ -0,0 +1,619 @@
|
|||
var socket;
|
||||
|
||||
Vue.component('footer-player', {
|
||||
template: '#footer-player'
|
||||
});
|
||||
|
||||
// vue instance
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
screen: "player",
|
||||
player: {
|
||||
currentMediaItem: {},
|
||||
songActions: false,
|
||||
lyrics: {},
|
||||
lyricsMediaItem: {},
|
||||
lyricsDebug: {
|
||||
current: 0,
|
||||
start: 0,
|
||||
end: 0
|
||||
},
|
||||
queue: {},
|
||||
lowerPanelState: "controls",
|
||||
userInteraction: false
|
||||
},
|
||||
queue: {
|
||||
temp: []
|
||||
},
|
||||
artistPage: {
|
||||
data: {},
|
||||
editorsNotes: false
|
||||
},
|
||||
albumPage: {
|
||||
data: {},
|
||||
editorsNotes: false
|
||||
},
|
||||
search: {
|
||||
query: "",
|
||||
results: [],
|
||||
state: 0,
|
||||
tab: "all",
|
||||
searchType: "applemusic",
|
||||
trackSelect: false,
|
||||
selected: {},
|
||||
queue: {},
|
||||
lastPage: "search",
|
||||
lastY: 0
|
||||
},
|
||||
lastPage: "player",
|
||||
connectedState: 0,
|
||||
url: window.location.hostname,
|
||||
mode: "default",
|
||||
// url: "localhost",
|
||||
},
|
||||
methods: {
|
||||
searchScroll(e) {
|
||||
this.search.lastY = e.target.scrollTop;
|
||||
},
|
||||
musicKitAPI(method, id, params) {
|
||||
socket.send(
|
||||
JSON.stringify({
|
||||
action: "musickit-api",
|
||||
method: method,
|
||||
id: id,
|
||||
params: params
|
||||
})
|
||||
)
|
||||
},
|
||||
resetPlayerUI() {
|
||||
this.player.lowerPanelState = "controls";
|
||||
},
|
||||
musicAppVariant() {
|
||||
if (navigator.userAgent.match(/Android/i)) {
|
||||
return "Apple Music";
|
||||
} else if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
return "Music";
|
||||
} else {
|
||||
if (navigator.userAgent.indexOf('Mac') > 0) {
|
||||
return 'Music';
|
||||
} else if (navigator.userAgent.indexOf('Win') > 0) {
|
||||
return 'Apple Music Electron';
|
||||
} else {
|
||||
return 'Apple Music Electron';
|
||||
}
|
||||
}
|
||||
},
|
||||
checkOrientation() {
|
||||
// check orientation of device
|
||||
if (window.innerHeight > window.innerWidth) {
|
||||
return 'portrait'
|
||||
} else {
|
||||
return 'landscape';
|
||||
}
|
||||
},
|
||||
checkPlatformMD() {
|
||||
// check if platfom is desktop or mobile
|
||||
if (navigator.userAgent.match(/Android/i)) {
|
||||
return "mobile";
|
||||
} else if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
return "mobile";
|
||||
} else {
|
||||
if (navigator.userAgent.indexOf('Mac') > 0) {
|
||||
return 'desktop';
|
||||
} else if (navigator.userAgent.indexOf('Win') > 0) {
|
||||
return 'desktop';
|
||||
} else {
|
||||
return 'desktop';
|
||||
}
|
||||
}
|
||||
},
|
||||
checkPlatform() {
|
||||
if (navigator.userAgent.match(/Android/i)) {
|
||||
return "android";
|
||||
} else if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
|
||||
return "ios";
|
||||
} else {
|
||||
if (navigator.userAgent.indexOf('Mac') > 0) {
|
||||
return 'mac';
|
||||
} else if (navigator.userAgent.indexOf('Win') > 0) {
|
||||
return 'win';
|
||||
} else {
|
||||
return 'linux';
|
||||
}
|
||||
}
|
||||
},
|
||||
artworkPlaying() {
|
||||
if (this.player.currentMediaItem.status) {
|
||||
return
|
||||
} else {
|
||||
return ["paused"]
|
||||
}
|
||||
},
|
||||
setAutoplay(value) {
|
||||
socket.send(JSON.stringify({
|
||||
"action": "set-autoplay",
|
||||
"autoplay": value
|
||||
}));
|
||||
this.getCurrentMediaItem()
|
||||
if (value) {
|
||||
setTimeout(() => {
|
||||
this.getQueue()
|
||||
}, 1000)
|
||||
} else {
|
||||
this.getQueue()
|
||||
}
|
||||
},
|
||||
seekTo(time, adjust = true) {
|
||||
if (adjust) {
|
||||
time = parseInt(time / 1000)
|
||||
}
|
||||
socket.send(JSON.stringify({
|
||||
action: "seek",
|
||||
time: time
|
||||
}));
|
||||
},
|
||||
setVolume(volume) {
|
||||
socket.send(JSON.stringify({
|
||||
action: "volume",
|
||||
volume: volume
|
||||
}));
|
||||
},
|
||||
getQueue() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "get-queue"
|
||||
}))
|
||||
},
|
||||
play() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "play"
|
||||
}))
|
||||
},
|
||||
pause() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "pause"
|
||||
}))
|
||||
},
|
||||
next() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "next"
|
||||
}))
|
||||
},
|
||||
previous() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "previous"
|
||||
}))
|
||||
},
|
||||
searchArtist() {
|
||||
this.search.query = this.player.currentMediaItem.artistName;
|
||||
this.screen = "search";
|
||||
this.searchQuery();
|
||||
},
|
||||
trackSelect(song) {
|
||||
this.search.selected = song;
|
||||
this.search.trackSelect = true
|
||||
},
|
||||
clearSelectedTrack() {
|
||||
this.search.selected = {}
|
||||
this.search.trackSelect = false
|
||||
},
|
||||
getArtworkColor(hex) {
|
||||
return `#${hex}`
|
||||
},
|
||||
playMediaItemById(id, kind = "song") {
|
||||
socket.send(JSON.stringify({
|
||||
action: "play-mediaitem",
|
||||
id: id,
|
||||
kind: kind
|
||||
}))
|
||||
this.screen = "player";
|
||||
},
|
||||
playNext(type, id) {
|
||||
socket.send(JSON.stringify({
|
||||
action: "play-next",
|
||||
type: type,
|
||||
id: id
|
||||
}))
|
||||
},
|
||||
playLater(type, id) {
|
||||
socket.send(JSON.stringify({
|
||||
action: "play-later",
|
||||
type: type,
|
||||
id: id
|
||||
}))
|
||||
},
|
||||
searchQuery() {
|
||||
if (this.search.query.length == 0) {
|
||||
this.search.state = 0;
|
||||
return;
|
||||
}
|
||||
this.search.state = 1;
|
||||
var actionType = "search"
|
||||
if (this.search.searchType == "library") {
|
||||
actionType = "library-search"
|
||||
}
|
||||
socket.send(JSON.stringify({
|
||||
"action": actionType,
|
||||
"term": this.search.query,
|
||||
"limit": 20
|
||||
}))
|
||||
},
|
||||
quickSearch() {
|
||||
var search = prompt("Search for a song", "")
|
||||
if (search == null || search == "") {
|
||||
return
|
||||
}
|
||||
|
||||
socket.send(JSON.stringify({
|
||||
action: "quick-play",
|
||||
term: search
|
||||
}))
|
||||
},
|
||||
parseTime(value) {
|
||||
var minutes = Math.floor(value / 60000);
|
||||
var seconds = ((value % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
parseTimeDecimal(value) {
|
||||
var minutes = Math.floor(value / 60000);
|
||||
var seconds = ((value % 60000) / 1000).toFixed(0);
|
||||
return minutes + "." + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
hmsToSecondsOnly(str) {
|
||||
var p = str.split(':'),
|
||||
s = 0,
|
||||
m = 1;
|
||||
|
||||
while (p.length > 0) {
|
||||
s += m * parseInt(p.pop(), 10);
|
||||
m *= 60;
|
||||
}
|
||||
|
||||
return s;
|
||||
},
|
||||
getCurrentTime() {
|
||||
return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.player.currentMediaItem.durationInMillis - this.player.currentMediaItem.remainingTime)));
|
||||
},
|
||||
percentage(partial, full) {
|
||||
return (100 * partial) / full
|
||||
},
|
||||
getLyricBGStyle(start, end) {
|
||||
var currentTime = this.getCurrentTime();
|
||||
var duration = this.player.currentMediaItem.durationInMillis
|
||||
var start2 = this.hmsToSecondsOnly(start)
|
||||
var end2 = this.hmsToSecondsOnly(end)
|
||||
var currentProgress = ((100 * (currentTime)) / (end2))
|
||||
// check if currenttime is between start and end
|
||||
this.player.lyricsDebug.start = start2
|
||||
this.player.lyricsDebug.end = end2
|
||||
this.player.lyricsDebug.current = currentTime
|
||||
if (currentTime >= start2 && currentTime <= end2) {
|
||||
return {
|
||||
"--bgSpeed": `${(end2 - start2)}s`
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
getLyricClass(start, end) {
|
||||
var currentTime = this.getCurrentTime();
|
||||
// check if currenttime is between start and end
|
||||
if (currentTime >= start && currentTime <= end) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".lyric-line.active")) {
|
||||
document.querySelector(".lyric-line.active").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
return "active"
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
getAlbumArtUrl(size = 600) {
|
||||
if (this.player.currentMediaItem.artwork) {
|
||||
return `url("${this.player.currentMediaItem.artwork.url.replace('{w}', size).replace('{h}', size)}")`;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getAlbumArtUrlList(url, size = 64) {
|
||||
return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
|
||||
},
|
||||
searchTabClass(tab) {
|
||||
if (tab == this.search.tab) {
|
||||
return "active";
|
||||
}
|
||||
},
|
||||
searchTypeClass(type) {
|
||||
if (type == this.search.searchType) {
|
||||
return "active";
|
||||
}
|
||||
},
|
||||
getQueuePositionClass(position) {
|
||||
if (this.player.queue["_position"] == position) {
|
||||
return ["playing", "passed"]
|
||||
} else if (this.player.queue["_position"] > position) {
|
||||
return ["passed"]
|
||||
}
|
||||
},
|
||||
showSearch(reset = false) {
|
||||
if(reset) {
|
||||
this.search.lastPage = "search"
|
||||
}
|
||||
switch(this.search.lastPage) {
|
||||
case "search":
|
||||
this.screen = "search"
|
||||
break;
|
||||
case "album":
|
||||
this.screen = "album-page"
|
||||
break;
|
||||
case "artist":
|
||||
this.screen = "artist-page"
|
||||
break;
|
||||
case "playlist":
|
||||
this.screen = "playlist-page"
|
||||
break;
|
||||
}
|
||||
},
|
||||
showArtistByName(name) {
|
||||
this.musicKitAPI("search", name, {types: "artists"})
|
||||
},
|
||||
showAlbum(id) {
|
||||
this.search.lastPage = "album"
|
||||
this.screen = "album-page"
|
||||
this.musicKitAPI("album", id, {})
|
||||
},
|
||||
showArtist(id) {
|
||||
this.search.lastPage = "artist"
|
||||
this.screen = "artist-page"
|
||||
this.musicKitAPI("artist", id, {include: "songs,playlists,albums"})
|
||||
},
|
||||
showQueue() {
|
||||
this.queue.temp = this.player["queue"]["_queueItems"]
|
||||
this.screen = "queue"
|
||||
this.getQueue()
|
||||
},
|
||||
queueMove(evt) {
|
||||
console.log(evt)
|
||||
console.log(`new: ${evt.moved.newIndex} old: ${evt.moved.oldIndex}`)
|
||||
this.queue.temp.splice(evt.moved.newIndex, 0, this.queue.temp.splice(evt.moved.oldIndex, 1)[0])
|
||||
socket.send(JSON.stringify({
|
||||
action: "queue-move",
|
||||
from: evt.moved.oldIndex,
|
||||
to: evt.moved.newIndex
|
||||
}))
|
||||
this.getQueue()
|
||||
return true
|
||||
},
|
||||
repeat() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "repeat"
|
||||
}))
|
||||
this.getCurrentMediaItem()
|
||||
},
|
||||
shuffle() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "shuffle"
|
||||
}))
|
||||
this.getCurrentMediaItem()
|
||||
},
|
||||
setShuffle(val) {
|
||||
socket.send(JSON.stringify({
|
||||
action: "set-shuffle",
|
||||
shuffle: val
|
||||
}))
|
||||
this.getCurrentMediaItem()
|
||||
},
|
||||
getMediaPalette(data) {
|
||||
var palette = {
|
||||
'--bgColor': `#${data['artwork']['bgColor']}`,
|
||||
'--textColor1': `#${data['artwork']['textColor1']}`,
|
||||
'--textColor2': `#${data['artwork']['textColor2']}`,
|
||||
'--textColor3': `#${data['artwork']['textColor3']}`,
|
||||
'--textColor4': `#${data['artwork']['textColor4']}`
|
||||
}
|
||||
return palette
|
||||
},
|
||||
playAlbum(id, shuffle = false) {
|
||||
if(shuffle) {
|
||||
this.setShuffle(true)
|
||||
}else{
|
||||
this.setShuffle(false)
|
||||
}
|
||||
this.playMediaItemById(id, 'album');
|
||||
},
|
||||
getLyrics() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "get-lyrics",
|
||||
}))
|
||||
},
|
||||
showLyrics() {
|
||||
this.getLyrics()
|
||||
this.screen = "lyrics"
|
||||
},
|
||||
showLyricsInline() {
|
||||
this.getLyrics()
|
||||
this.player.lowerPanelState = "lyrics"
|
||||
},
|
||||
parseLyrics() {
|
||||
var xml = this.stringToXml(this.player.lyricsMediaItem.ttml)
|
||||
var json = xmlToJson(xml);
|
||||
this.player.lyrics = json
|
||||
},
|
||||
stringToXml(st) {
|
||||
// string to xml
|
||||
var xml = (new DOMParser()).parseFromString(st, "text/xml");
|
||||
return xml;
|
||||
},
|
||||
canShowSearchTab(tab) {
|
||||
if (tab == this.search.tab || this.search.tab == "all") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getCurrentMediaItem() {
|
||||
socket.send(JSON.stringify({
|
||||
action: "get-currentmediaitem"
|
||||
}))
|
||||
},
|
||||
setStreamerOverlay() {
|
||||
document.body.classList.add("streamer-overlay")
|
||||
},
|
||||
setMode(mode) {
|
||||
switch(mode) {
|
||||
default:
|
||||
this.screen = "player"
|
||||
break;
|
||||
case "miniplayer":
|
||||
this.screen = "miniplayer"
|
||||
break;
|
||||
}
|
||||
},
|
||||
connect() {
|
||||
let self = this;
|
||||
this.connectedState = 0;
|
||||
if (this.url === "") {
|
||||
this.url = prompt("Host IP", "localhost")
|
||||
}
|
||||
socket = new WebSocket(`ws://${this.url}:26369`);
|
||||
socket.onopen = (e) => {
|
||||
console.log(e);
|
||||
console.log('connected');
|
||||
app.connectedState = 1;
|
||||
if(getParameterByName("mode")) {
|
||||
self.setMode(getParameterByName("mode"))
|
||||
}else{
|
||||
self.setMode("default")
|
||||
}
|
||||
self.clearSelectedTrack()
|
||||
}
|
||||
|
||||
socket.onclose = (e) => {
|
||||
console.log(e);
|
||||
console.log('disconnected');
|
||||
app.connectedState = 2;
|
||||
}
|
||||
|
||||
socket.onerror = (e) => {
|
||||
console.log(e);
|
||||
console.log('error');
|
||||
app.connectedState = 2;
|
||||
}
|
||||
|
||||
socket.onmessage = (e) => {
|
||||
const response = JSON.parse(e.data);
|
||||
switch (response.type) {
|
||||
default:
|
||||
console.log(response);
|
||||
break;
|
||||
case "musickitapi.search":
|
||||
self.showArtist(response.data["artists"][0]["id"]);
|
||||
break;
|
||||
case "musickitapi.album":
|
||||
if(self.screen == "album-page") {
|
||||
self.albumPage.data = response.data
|
||||
}
|
||||
break;
|
||||
case "musickitapi.artist":
|
||||
if(self.screen == "artist-page") {
|
||||
self.artistPage.data = response.data
|
||||
}
|
||||
break;
|
||||
case "queue":
|
||||
self.player.queue = response.data;
|
||||
self.queue.temp = response.data["_queueItems"];
|
||||
self.$forceUpdate()
|
||||
break;
|
||||
case "lyrics":
|
||||
self.player.lyrics = response.data;
|
||||
self.$forceUpdate()
|
||||
break;
|
||||
case "searchResultsLibrary":
|
||||
self.search.results = response.data;
|
||||
self.search.state = 2;
|
||||
break;
|
||||
case "searchResults":
|
||||
self.search.results = response.data;
|
||||
self.search.state = 2;
|
||||
break;
|
||||
case "playbackStateUpdate":
|
||||
if (!self.player.userInteraction) {
|
||||
self.updatePlaybackState(response.data)
|
||||
}
|
||||
break;
|
||||
}
|
||||
// console.log(e.data);
|
||||
}
|
||||
},
|
||||
updatePlaybackState(mediaitem) {
|
||||
var lyricsDisplayed = this.screen == "lyrics" || this.player.lowerPanelState == "lyrics"
|
||||
if (this.player.currentMediaItem["isrc"] != mediaitem["isrc"]) {
|
||||
if (lyricsDisplayed) {
|
||||
this.getLyrics()
|
||||
}
|
||||
if (this.screen == "queue") {
|
||||
this.getQueue()
|
||||
}
|
||||
}
|
||||
this.player.currentMediaItem = mediaitem
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, '\\$&');
|
||||
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
||||
}
|
||||
|
||||
function xmlToJson(xml) {
|
||||
|
||||
// Create the return object
|
||||
var obj = {};
|
||||
|
||||
if (xml.nodeType == 1) { // element
|
||||
// do attributes
|
||||
if (xml.attributes.length > 0) {
|
||||
obj["@attributes"] = {};
|
||||
for (var j = 0; j < xml.attributes.length; j++) {
|
||||
var attribute = xml.attributes.item(j);
|
||||
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
|
||||
}
|
||||
}
|
||||
} else if (xml.nodeType == 3) { // text
|
||||
obj = xml.nodeValue;
|
||||
}
|
||||
|
||||
// do children
|
||||
if (xml.hasChildNodes()) {
|
||||
for (var i = 0; i < xml.childNodes.length; i++) {
|
||||
var item = xml.childNodes.item(i);
|
||||
var nodeName = item.nodeName;
|
||||
if (typeof (obj[nodeName]) == "undefined") {
|
||||
obj[nodeName] = xmlToJson(item);
|
||||
} else {
|
||||
if (typeof (obj[nodeName].push) == "undefined") {
|
||||
var old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(xmlToJson(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
window.onresize = function () {
|
||||
app.resetPlayerUI()
|
||||
}
|
||||
|
||||
app.connect()
|
||||
32
src/web-remote/manifest.json
Normal file
32
src/web-remote/manifest.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#000000",
|
||||
"display": "standalone",
|
||||
"scope": "/",
|
||||
"start_url": "/",
|
||||
"name": "AME Remote",
|
||||
"short_name": "AME Remote",
|
||||
"description": "Apple Music Electron Remote",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icon-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
2
src/web-remote/sortable.min.js
vendored
Normal file
2
src/web-remote/sortable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1023
src/web-remote/style.css
Normal file
1023
src/web-remote/style.css
Normal file
File diff suppressed because it is too large
Load diff
6
src/web-remote/vue.js
Normal file
6
src/web-remote/vue.js
Normal file
File diff suppressed because one or more lines are too long
2
src/web-remote/vuedraggable.umd.min.js
vendored
Normal file
2
src/web-remote/vuedraggable.umd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue