wplayer

Check-in [54a69f7fe7]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Seeing some layout problems on very small (KaiOS) screens. In particular, button size appears to change on click-down, triggering a relayout which moves the clicked button out from under your click, making it not succeed. Move to an SVG graphic, too.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | master | trunk
Files: files | file ages | folders
SHA3-256: 54a69f7fe7392ed4dfe4abf11bd9c2e7b5dd7e113413d6aa177fe5ee581a9bdf
User & Date: vandys 2020-05-23 14:25:02
Context
2020-05-23
14:25
Seeing some layout problems on very small (KaiOS) screens. In particular, button size appears to change on click-down, triggering a relayout which moves the clicked button out from under your click, making it not succeed. Move to an SVG graphic, too. Leaf check-in: 54a69f7fe7 user: vandys tags: master, trunk
14:02
Tighten up CSS factoring check-in: e87112e95c user: vandys tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/player.css.

10
11
12
13
14
15
16

17
18










19
20
21
22
23
24
25
 min-width: 50%;
 width: 95%;
}
button {
 font-size: 14px;
 min-width: 40px;
 min-height: 25px;

 background: #939393;
}










#trackdope {
 display: none;
 background: white;
 z-index: 999;
 position: absolute;
 top: 10vh;
 left: 10vw;







>


>
>
>
>
>
>
>
>
>
>







10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 min-width: 50%;
 width: 95%;
}
button {
 font-size: 14px;
 min-width: 40px;
 min-height: 25px;
 width: max-content;
 background: #939393;
}
#gobuts {
 display: flex;
}
#gobuts > * {
 margin-left: 2px;
 min-width: 20px;
}
#gobuts > img {
 border: 1px solid black;
}
#trackdope {
 display: none;
 background: white;
 z-index: 999;
 position: absolute;
 top: 10vh;
 left: 10vw;

Changes to html/top.html.

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


40
41
42
43
44
45


46
47
48
49
50
51
52
</head>
<body>
 <div id="trackdope" onclick="return noInfo();"></div>
 <textarea rows="8" readonly id="pqueue"></textarea><br>
 <img onclick="unplayart();" style="display: none;" id="playart">
 <hr>
 <span id="nowplaying"></span><br>
 <table>
  <tr>
   <td>
    <audio controls autoplay id="player" style="text-align: center;"></audio>
   </td>
  </tr>
  <tr>
   <td>


    <button onclick="return seek(-600);">-10m</button>
    <button onclick="return seek(-60);">-1m</button>
    <button onclick="return seek(-10);">-10s</button>
    <button onclick="return seek(10);">+10s</button>
    <button onclick="return seek(60);">+1m</button>
    <button onclick="return seek(600);">+10m</button>
    <button onclick="return playNext();">>next</button>
    <button onclick="return shuffle();">shufl</button>
    <button onclick="return loveit();" id="lovebtn">love</button>
    <button onclick="return showInfo();">info</button>
   </td>
   </td>
  </tr>
 </table>
 <hr>
 <button onclick="return go_up();">
  <img src="/imgs/player_eject.png" alt="Go Up" />
 </button>


 <button onclick="return go_top();">/</button>
 <button onclick="return dropFirst();">-First</button>
 <button onclick="return dropLast();">-Last</button>
 <button onclick="return addAll();">+All</button>
 <button onclick="return dropAll();">-All</button>
 <br>


 <textarea rows="1" cols="40" readonly id="trackname"></textarea><br>
 <div id="searchbar" style="display: none;">Search: <textarea rows="1" cols="40"
     id="searchval" onkeyup="srch();"></textarea></br></div>
 <span id="browser"></span>
 <script src="/js/player.js"></script>
</body>
</html>







<
<
<
|
<
<
<
<
>
>
|
|
|
|
|
|
|
|
|
|
|
<
<
<

<
<
<
>
>
|
|
|
|
|
<
>
>







7
8
9
10
11
12
13



14




15
16
17
18
19
20
21
22
23
24
25
26
27



28



29
30
31
32
33
34
35

36
37
38
39
40
41
42
43
44
</head>
<body>
 <div id="trackdope" onclick="return noInfo();"></div>
 <textarea rows="8" readonly id="pqueue"></textarea><br>
 <img onclick="unplayart();" style="display: none;" id="playart">
 <hr>
 <span id="nowplaying"></span><br>



 <audio controls autoplay id="player" style="text-align: center;"></audio>




 <br>
 <div id="seekbuts">
  <button onclick="return seek(-600);">-10m</button>
  <button onclick="return seek(-60);">-1m</button>
  <button onclick="return seek(-10);">-10s</button>
  <button onclick="return seek(10);">+10s</button>
  <button onclick="return seek(60);">+1m</button>
  <button onclick="return seek(600);">+10m</button>
  <button onclick="return playNext();">>next</button>
  <button onclick="return shuffle();">shufl</button>
  <button onclick="return loveit();" id="lovebtn">love</button>
  <button onclick="return showInfo();">info</button>
 </div>



 <hr>



 <div id="gobuts">
  <img onclick="go_up();" src="/imgs/go_up.svg" alt="Go Up">
  <button onclick="return go_top();">/</button>
  <button onclick="return dropFirst();">-First</button>
  <button onclick="return dropLast();">-Last</button>
  <button onclick="return addAll();">+All</button>
  <button onclick="return dropAll();">-All</button>

 </div>
 <hr>
 <textarea rows="1" cols="40" readonly id="trackname"></textarea><br>
 <div id="searchbar" style="display: none;">Search: <textarea rows="1" cols="40"
     id="searchval" onkeyup="srch();"></textarea></br></div>
 <span id="browser"></span>
 <script src="/js/player.js"></script>
</body>
</html>

Added imgs/go_up.svg.











































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC
 '-//W3C//DTD SVG 1.1//EN'
 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg
 enable-background="new 0 0 26 26"
 height="26px"
 id="Layer_1"
 version="1.1"
 viewBox="0 0 26 26"
 width="26px"
 xml:space="preserve"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <polygon
  fill="#231F20"
  points="0.046,24.418 2.13,26.502 12.967,15.666 23.803,26.502 25.887,24.418 12.967,11.498" />
 <polygon
  fill="#231F20"
  points="0.046,13.418 2.13,15.502 12.967,4.666 23.803,15.502 25.887,13.418 12.967,0.498" />
</svg>