The VideoLAN Forums

Posted: **13 Jun 2013 01:58**

I tried to make a Youtube-like skin for VLC. I called it YoutubeStyle. It's version 0.1 since I couldn't do all I wanted to.

You can download it here :
http://www.filedropper.com/youtube-style_1

You can comment anything you like/dislike except "Why would you want to make VLC look like Youtube ? It's better the way it is..."

I found several flaws in skins2 and I'd like your feedback on those :
- art="true" seems not to work on 2.0.6 and 2.0.7. The covers never show for me but they show fine in the FileInfo dialog.
- tooltipfont never recognize any font I try. I would really like to customize the tooltips.
- The full-screen controller can't really be full-screen since we cannot use slider with percentages and nested panels don't behave like they should with the position attribute.

For this reason the full-screen controller is not fully operational (no time slider) but I wanted to show what I could accomplish with the latest development of percentages.
If you'd like a customized version of this skin (like an ugly re-sizable but fully operational full-screen controller) maybe I can do it for you, if i find time.

PS: Do not try to open it with the editor, it can break the skin because of some bug that delete the space before the art attribute.

Posted: **21 Jun 2013 01:42**

The link is dead.
This one should work :
http://www.mediafire.com/download/8sot1 ... -style.vlt

Posted: **21 Jun 2013 15:24**

.
Thanks for this nice skin. Some skins2 bugs are fixed in the next major version (vlc2.1.0) about to be released. You may be interested in testing it. nightly builds are available at http://nightlies.videolan.org/build/source/

- art="true" seems not to work on 2.0.6 and 2.0.7. The covers never show for me but they show fine in the FileInfo dialog.

There is a known issue with art files stored without extension. When displayed with Qt (e.g the FileInfo dialog), they display well because a content-based image detection is performed. When displayed with the vlc core image functions, only extension-based image detection works (.png, .jpeg, ....). Depending where you get the art from, vlc may or may not add extension. Just add the right extension and it will work (I tested it successfully with your skin)

The bad news is that the patch to correct this issue is still in my local rep and my attempts to submit it were not granted a big approval ... So this won't be solved with the next version.

- tooltipfont never recognize any font I try. I would really like to customize the tooltips.

I need to check. Probably not implemented

- The full-screen controller can't really be full-screen since we cannot use slider with percentages and nested panels don't behave like they should with the position attribute.

Yes, slider with percentages would be great. If I get some time, I may add this feature in the next release since it's not a big change.

nested panels don't behave like they should with the position attribute.

Probably, they don't. Can you elaborate a bit more what they do wrong and what they should do ....
.

Posted: **22 Jun 2013 03:15**

For art pictures, I didn't know how to use local files so I hadn't tested, so I was talking about automatically downloaded art which doesn't show.

There's also an error in the doc for Layout testing, it says LayoutID.isVisible which doesn't work instead of LayoutID.isActive which works. It took me a while to figure this one out.

For nested panels, I did some testing.
If I want this for example :
http://mc.rack.free.fr/vlc-skins/nested-panels-0.png

I would wright something like that :

Code: Select all

  <Window id="fullscreenController" visible="vlc.isFullscreen" dragdrop="false" playondrop="false" position="NorthWest">
    <Layout id="fsLayout" width="100%" height="100%" maxwidth="99999" maxheight="99999">
      <Panel id="fsBottom" width="100%" height="50" position="South">
        <Image id="fsBottomBg" image="white50" width="100%" height="100%"/>
        <Panel id="fsBottomLeft" width="50%" height="20" position="SouthWest">
          <Image id="fsBottomLeftBg" image="green20" width="100%" height="100%"/>
        </Panel>
        <Panel id="fsBottomRight" width="50%" height="20" position="SouthEast">
          <Image id="fsBottomRightBg" image="red20" width="100%" height="100%"/>
        </Panel>
      </Panel>
    </Layout>
  </Window>

But here's the result :
http://mc.rack.free.fr/vlc-skins/nested-panels-1.png

By inversing first and second child like that :

Code: Select all

  <Window id="fullscreenController" visible="vlc.isFullscreen" dragdrop="false" playondrop="false" position="NorthWest">
    <Layout id="fsLayout" width="100%" height="100%" maxwidth="99999" maxheight="99999">
      <Panel id="fsBottom" width="100%" height="50" position="South">
        <Image id="fsBottomBg" image="white50" width="100%" height="100%"/>
        <Panel id="fsBottomRight" width="50%" height="20" position="SouthEast">
          <Image id="fsBottomRightBg" image="red20" width="100%" height="100%"/>
        </Panel>
        <Panel id="fsBottomLeft" width="50%" height="20" position="SouthWest">
          <Image id="fsBottomLeftBg" image="green20" width="100%" height="100%"/>
        </Panel>
      </Panel>
    </Layout>
  </Window>

We have a totally different result :
http://mc.rack.free.fr/vlc-skins/nested-panels-2.png

And when we try to add another blue child inside the green :

Code: Select all

  <Window id="fullscreenController" visible="vlc.isFullscreen" dragdrop="false" playondrop="false" position="NorthWest">
    <Layout id="fsLayout" width="100%" height="100%" maxwidth="99999" maxheight="99999">
      <Panel id="fsBottom" width="100%" height="50" position="South">
        <Image id="fsBottomBg" image="white50" width="100%" height="100%"/>
        <Panel id="fsBottomLeft" width="50%" height="20" position="SouthWest">
          <Image id="fsBottomLeftBg" image="green20" width="100%" height="100%"/>
          <Panel id="fsBottomLeftCenter" width="50%" height="10" position="Center">
            <Image id="fsBottomLeftCenterBg" image="blue10" width="100%" height="100%"/>
          </Panel>
        </Panel>
        <Panel id="fsBottomRight" width="50%" height="20" position="SouthEast">
          <Image id="fsBottomRightBg" image="red20" width="100%" height="100%"/>
        </Panel>
      </Panel>
    </Layout>
  </Window>

It's anarchy :
http://mc.rack.free.fr/vlc-skins/nested-panels-3.png

The first child of the fist child if the first child is well positioned with no bug.
But the second and plus children aren't positioned and sized relatively to their parent but to the last positioned panel (sibling or descendant of sibling).
At least that's what I understand.

If I may, since you're a developer, I have a few ideas :
I really would like an action for the "Adjustments and effects" dialog. I know we can access it through the pop-up dialog but it's really useful for audio and subtitles synchronization.
I think having 2 parameters for positioning simultaneously like x and xoffset could be really handy and even replace the position attribute :
width="100" x="50%" xoffset="-50"
This would center horizontally for instance. But it is much more powerful. And it could be even more powerful if percentages were relative to the parent's width for x and to the current element's width for xoffset.
x="50%" xoffset="-50%" would center
x="100%" xoffset="-100%" would put the element East etc...

You can forget the last part if you're too busy, I just build up a lot of frustration not getting exactly what I wanted and trying again and again.

If you want to test the examples I gave above, here is a skin modified with the last example :
mc.rack.free.fr/vlc-skins/nested-panels.vlt

It's good to see this forum is not dead.

Posted: **22 Jun 2013 16:32**

Thanks a lot for this thorough bug report. It was very helpful.

Patches have been applied to the dev branch for the following issues :

- Fix the nested panel positioning bug. Your bug description was 100% accurate !

- Implement xoffset and yoffset as you suggested for the case when position is not provided. For backward compatibility reason, xoffset and yoffset will still be computed the old way (against the upper container size) when position is given. Otherwise, since xoffset and yoffset were ignored, they will now be computed with percentage being construed as percentage of the current object size.

- Fix and update documentation

If you wish to test it, nightly builds should be available as soon as tomorrow (vlc2.1.0 branch only). Online documentation should also be updated some time soon hopefully.

I don't forget the other issues, .... need more time to think it over !

Posted: **22 Jun 2013 18:41**

A new patch has also been applied regarding 'percentage' sliders. Optional width/height parameters have been added to the Slider tag to allow this initial resizing.
For your use case, syntax would be <Slider width="100%" ......>

The VideoLAN Forums

YoutubeStyle

YoutubeStyle

Re: YoutubeStyle

Re: YoutubeStyle

Re: YoutubeStyle

Re: YoutubeStyle

Re: YoutubeStyle