[Addon] RuneUI Enhancement

R101

What is the right order? Alphabetical? As listed by mpc (e. g. mpc ls "NAS/Musik/Audiophile")?

Frank,

By the right order, I mean the track files in an album folder are in the same order they were on the CD, which is the order they are shown in when the album folder is added to the playlist, and also when the album folder is viewed in Firefox/Rune UIe.

In my case, the problem seems to be limited to the embedded browser supplied with Android 5.1.1, which is also what the remote control app uses.

There does not seem to be any way to update the browser on my cheap tablet, only to add an additional one, which is what I have done. There also does not seem to be a way to force the remote control app to use the new browser app, and I do not think it is worth pursuing. Most people who use the app will have it on a phone which has regular software upgrades, so I doubt if the problem will occur. I find everything works more smoothly in a browser, so I am happy with how things are.

I would be interested to know whether the enhanced UI will be included in the next version, rather than remain an addon?

Thanks,

R.

hondagx35

Hi R101,

By the right order, I mean the track files in an album folder are in the same order they were on the CD, which is the order they are shown in when the album folder is added to the playlist, and also when the album folder is viewed in Firefox/Rune UIe.

OK, so we think the same way.
Does it also happen with the unmodified (no Addons) version?

whether the enhanced UI will be included in the next version

Yes, kind of!
Version 2.0 is based on a brand new code base, a rewrite of the old system. It includes a renewed UI, and a lot of new features.

Frank

R101

Does it also happen with the unmodified (no Addons) version?

Hi Frank,

I updated the enhanced UI yesterday, and all files now show in the right order on the old Android browser. I reinstalled the remote control app, and that shows the correct file order too. I don't know if the update was responsible for this - there is nothing in rern's fix list about it. The only problem remaining in the app is that the alphabetical selection bar does not scale correctly. It is OK in the old browser, so I assume this is due to the larger display area in the app not being reported correctly. (This is on a 7" tablet.)

rern

R101 wrote ...
I updated the enhanced UI yesterday, and all files now show in the right order on the old Android browser. I reinstalled the remote control app, and that shows the correct file order too. I don't know if the update was responsible for this - there is nothing in rern's fix list about it. ...

It’s there.

(For those who may not know it.)
Moving around Addons Menu:
Elements or area with ▼ or ▲ for toggle or shortcut

- Click a blue date/version next to an addon title - Show/hide update info
- Click an addon in the top list - Jump to the addon
- Click addon title - Jump back to the list

R101

Thanks rern, I didn't know about that!

rern

(from Addons Menu thread)

clriis wrote ...
I do not get "second & third (child) layer filtering" when I browse my library. Before when I selected Artists and then selected a specific artist by clicking on the Artist Name I would the Albums of that Artist and when clicking on the Album I would get the tracks of the Album. Same goes with Genre.
...

Fixed.
Please update and report.

cmh714

theres a small leftover bracket close (-->)on the page that is visible in the top right corner as well as 2 gears showing to get to the Add-ons.

Keep up the great work rern!!

rern

cmh714 wrotetheres a small leftover bracket close (-->)on the page that is visible in the top right corner as well as 2 gears showing to get to the Add-ons.

Please post your /srv/http/app/templates/header.php
I can use it for a clean up code in the next update.

cmh714

cat /srv/http/app/templates/header.php

<head>
    <meta charset="utf-8">
    <title>RuneUIe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="stylesheet" href="<?=$this->asset('/css/runeui.css')?>">
    <link rel="stylesheet" href="<?=$this->asset('/css/custom.css')?>">
    <link rel="stylesheet" href="<?=$this->asset('/css/addonsinfo.css')?>">
    <?php if (is_localhost()): ?>
        <link rel="stylesheet" href="<?=$this->asset('/css/onScreenKeyboard.css')?>">
    <?php endif ?>
    <link rel="shortcut icon" href="<?=$this->asset('/img/favicon.ico')?>">
    <link rel="apple-touch-icon" sizes="57x57" href="<?=$this->asset('/img/apple-touch-icon-57x57.png')?>">
    <link rel="apple-touch-icon" sizes="114x114" href="<?=$this->asset('/img/apple-touch-icon-114x114.png')?>">
    <link rel="apple-touch-icon" sizes="72x72" href="<?=$this->asset('/img/apple-touch-icon-72x72.png')?>">
    <link rel="apple-touch-icon" sizes="144x144" href="<?=$this->asset('/img/apple-touch-icon-144x144.png')?>">
    <link rel="apple-touch-icon" sizes="60x60" href="<?=$this->asset('/img/apple-touch-icon-60x60.png')?>">
    <link rel="apple-touch-icon" sizes="120x120" href="<?=$this->asset('/img/apple-touch-icon-120x120.png')?>">
    <link rel="apple-touch-icon" sizes="76x76" href="<?=$this->asset('/img/apple-touch-icon-76x76.png')?>">
    <link rel="apple-touch-icon" sizes="152x152" href="<?=$this->asset('/img/apple-touch-icon-152x152.png')?>">
    <link rel="apple-touch-icon" sizes="180x180" href="<?=$this->asset('/img/apple-touch-icon-180x180.png')?>">
    <meta name="apple-mobile-web-app-title" content="RuneAudio">
    <link rel="icon" type="image/png" href="<?=$this->asset('/img/favicon-192x192.png')?>" sizes="192x192">
    <link rel="icon" type="image/png" href="<?=$this->asset('/img/favicon-160x160.png')?>" sizes="160x160">
    <link rel="icon" type="image/png" href="<?=$this->asset('/img/favicon-96x96.png')?>" sizes="96x96">
    <link rel="icon" type="image/png" href="<?=$this->asset('/img/favicon-16x16.png')?>" sizes="16x16">
    <link rel="icon" type="image/png" href="<?=$this->asset('/img/favicon-32x32.png')?>" sizes="32x32">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage" content="/img/mstile-144x144.png">
    <meta name="msapplication-config" content="/img/browserconfig.xml">
    <meta name="application-name" content="RuneAudio">
</head>
<?php if (empty($this->uri(1)) OR ($this->uri(1) == 'playback')): ?>
<body id="section-index">
<?php else: ?>
<body id="section-<?=$this->section?>">
<?php endif ?>
<!--
 /*
 * Copyright (C) 2013-2014 RuneAudio Team
 * http://www.runeaudio.com
 *
 * RuneUI
 * copyright (C) 2013-2014 - Andrea Coiutti (aka ACX) & Simone De Gregori (aka Orion)
 *
 * RuneOS
 * copyright (C) 2013-2014 - Simone De Gregori (aka Orion) & Carmelo San Giovanni (aka Um3ggh1U)
 *
 * RuneAudio website and logo
 * copyright (C) 2013-2014 - ACX webdesign (Andrea Coiutti)
 *
 * This Program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3, or (at your option)
 * any later version.
 *
 * This Program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with RuneAudio; see the file COPYING.  If not, see
 * <http://www.gnu.org/licenses/gpl-3.0.txt>.
 *
 * RuneUI version: 1.3
 * RuneOS version: 0.3-beta
 *
 */
-->


<div id="bartop"></div>
<div id="barbottom"></div>
<div id="menu-top">
    <div class="dropdown">
        <button id="menu-settings" class="dropdown-toggle btn-default" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="fa fa-gear"></i></button>
<!--        <!--- <a id="menu-settings" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#"><?=$this->hostname ?> MENU <i class="fa fa-bars dx"></i></a>-->-->
        <button id="menu-settings" class="dropdown-toggle btn-default" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="fa fa-gear"></i></button>
<!--        <a id="menu-settings" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">MENU <i class="fa fa-bars dx"></i></a>-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu-settings">
            <li id="dropdownbg"></li> <!-- box-shadow -->
<?php /*            <li class="<?=$this->uri(1, '', 'active')?>"><a href="/"><i class="fa fa-play"></i> Playback</a></li>*/?>
            <li class="<?=$this->uri(1, 'sources', 'active')?>"><a href="/sources/"><i class="fa fa-folder-open"></i> Sources</a></li>
            <li class="<?=$this->uri(1, 'mpd', 'active')?>"><a href="/mpd/"><i class="fa fa-cogs"></i> MPD</a></li>
            <li class="<?=$this->uri(1, 'settings', 'active')?>"><a href="/settings/"><i class="fa fa-wrench"></i> Settings</a></li>
            <li class="<?=$this->uri(1, 'network', 'active')?>"><a href="/network/"><i class="fa fa-sitemap"></i> Network</a></li>
            <li class="<?=$this->uri(1, 'debug', 'active')?>"><a href="/debug/"><i class="fa fa-bug"></i> Debug</a></li>
            <li class="<?=$this->uri(1, 'credits', 'active')?>"><a href="/credits/"><i class="fa fa-trophy"></i> Credits</a></li>
            <li class="<?=$this->uri(1, 'dev', 'active')?>"><a href="/dev/"><i class="fa fa-code"></i> Development</a></li>
            <li style="cursor: pointer;"><a id="addons"><i class="fa fa-cubes"></i> Addons</a></li>
            <li><a href="#poweroff-modal" data-toggle="modal"><i class="fa fa-power-off"></i> Turn off</a></li>
            <?php if ($this->pwd_protection):?>
              <li><a href="/logout.php"><i class="fa fa-sign-out"></i> Logout</a></li>
            <?php endif ?>
        </ul>
    </div>
    <div class="playback-controls">
        <button id="previous" class="btn btn-default btn-cmd" title="Previous" data-cmd="previous"><i class="fa fa-step-backward"></i></button>
        <button id="stop" class="btn btn-default btn-cmd" title="Stop" data-cmd="stop"><i class="fa fa-stop"></i></button>
        <button id="play" class="btn btn-default btn-cmd" title="Play/Pause" data-cmd="play"><i class="fa fa-play"></i></button>
        <button id="next" class="btn btn-default btn-cmd" title="Next" data-cmd="next"><i class="fa fa-step-forward"></i></button>
    </div>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio">
        </a>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio">
        </a>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio">
        </a>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio">
        </a>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio">
        </a>
    <a href="http://www.runeaudio.com/forum/raspberry-pi-f7.html" target="_blank" alt="RuneAudio Forum">
        <img class="logo" src="<?=$this->asset('/img/runelogo.svg')?>">
    </a>
<?php /*    <a id="clock-display" class="home" href="/"><img src="<?=$this->asset('/img/logo.png')?>" class="logo" alt="RuneAudio"></a>*/?>
</div>
<div id="menu-bottom">
    <ul>
        <li id="open-panel-sx"><a <?=$this->uri(1, '', ' class="open-panel-sx" data-toggle="tab"')?>><i class="fa fa-folder-open"></i></a></li>
        <li id="open-playback"<?=$this->uri(1, '', ' class="active"')?>><a <?=$this->uri(1, '', ' data-toggle="tab"')?>><i class="fa fa-play-circle"></i></a></li>
        <li id="open-panel-dx"><a <?=$this->uri(1, '', ' class="open-panel-dx" data-toggle="tab"')?>><i class="fa fa-list"></i></a></li>
    </ul>
</div>

rern

cmh714 wrotetheres a small leftover bracket close (-->)on the page that is visible in the top right corner as well as 2 gears showing to get to the Add-ons.

Fixed.
Please update and report.

cmh714

rern wrote
cmh714 wrotetheres a small leftover bracket close (-->)on the page that is visible in the top right corner as well as 2 gears showing to get to the Add-ons.
Fixed.
Please update and report.

Thanks!! All good again.

rern

(from another thread)

R101 wrote I have discovered some problems using this enhancement with my 1024x600 Android tablet. I am not sure if they are all caused by this enhancement, as I do not normally hide the top/bottom menus.

With 3 button display selected, the "next track" button floats below the other 4 when the tablet is in portrait mode. Landscape mode looks the same until the browser is refreshed, and then the top/bottom menus disappear. The top/bottom menu item in the show/hide menu is greyed out and set to hidden in landscape mode, even when ticked. Problem is that swiping to the top edge does not now make the t/b menus appear in landscape mode, or in portrait mode when the t/b menus are hidden.

The Android app behaves in the same way.

This is probably not the place to mention it, but when using the Android app with UIe there is a problem swiping left to right, as this action is already used for a function in the app.

Next button misaligned
Give me:
- Your browser screen size ( You can get it from http://viewportsizes.com/mine/ )
- Your browser screen with the floating button

Top-bottom menu
- Try swipe vertically on the left / right of screen

R101

Give me:
- Your browser screen size ( You can get it from http://viewportsizes.com/mine/ )

This reports as 600x847

- Your browser screen with the floating button

: Screenshot.jpg (28.87 KiB) Viewed 1852 times

- Try swipe vertically on the left / right of screen

Swiping vertically on the right of the screen does restore the hidden banners.

rern

@[deleted],

It's displayed correctly on desktop Chrome, Firefox, iOS and Android devices I have.
Anyway, your device may need a special treat.

Try:
1. Edit /srv/http/assets/css/enhance.css line 148-149:

#menu-top .playback-controls {
    left: 50%;
    width: 316px;          /* 316px to 330px */
    margin: 0 0 0 -158px;  /* 0 0 0 -158px to 0 0 0 -165px */
}

2. Menu > Development > PHP 5.5 OPcache = Off
3. If still not ok, raise width another 10 and margin another -5
4 if ok, lower them 2 and 1 at a time to find where it breaks and let me know.

R101

Thanks rern,

It is OK at width 318px and margin -159px

Is there any benefit to leaving the cache turned off?

R101

The forced hiding of the top/bottom menu bars when in landscape mode does not work too smoothly.

If the menu bars are displayed in portrait mode and the device is rotated, they are still displayed in landscape mode until a button is pressed or the page is refreshed - then they vanish. If the device is then rotated back to portrait mode, the menu bars remain hidden until the page is refreshed.

I think this behaviour might be a bit confusing.

rern

@[deleted],

An update is available.
Please try and report.

R101

Hi rern,

The top/bottom menu behaviour has not changed. The only difference now is that the repeat/random/etc buttons cannot be hidden.

rern

R101 wrote The top/bottom menu behaviour has not changed. The only difference now is that the repeat/random/etc buttons cannot be hidden.

There’s another update:

- Rewrite responsive code
- Add long-press left/right of screen toggle top-bottom menu
- Preserve scroll position in Library and Queue
- Fix Info button not working
- Fix hide buttons bug

Please try and report.

R101

Hi rern,

Using the Android browser, everything seems to work as it should in portrait mode.

If I refresh the browser in portrait mode, all is OK.

If I then rotate to landscape, there are no top/bottom menus.

If I then rotate back to portrait and then to landscape again, the t/b menus appear, but the top banner obscures the artist information.

If, instead of rotating back to portrait, I refresh the browser in landscape mode or swipe up, the t/b menus appear in the same way.

However, I do not think this is worth spending your time on, because everything now seems to work perfectly (after a long wait for connection) in the RuneAudio app. Even the left to right swipe works if it is made from middle to right edge.

Thanks for all your work.

« Previous Page Next Page »