HOW-TO:Add Time Remaining to Confluence: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(27 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{mininav| [[Skinning]] | [[Confluence]] }}
{{mininav| [[Skinning]] | [[Add-on:Confluence|Confluence]] }}
__FORCETOC__


This tutorial will show how to replace ''runtime'' with '''time remaining''' at the end of the progress bar on the ''Info screen'' {{keypress|I}} and ''OSD'' {{keypress|M}}, and add the ''runtime'' to the bottom of the progress bar on the ''Info screen''. This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/VideoFullScreen.xml VideoFullScreen.xml].
This tutorial will show how to replace ''runtime'' with '''time remaining''' at the end of the progress bar on the ''Info screen'' {{keypress|I}} and ''OSD'' {{keypress|M}}, and add the ''runtime'' to the bottom of the progress bar on the ''Info screen/OSD''. It'll also show how to modify the seekbar (PAUSE dialog) to show time remaining.


<gallery widths=500px heights=313px>
This is achieved by editing VideoFullScreen.xml and DialogSeekBar.xml. They are located in the system data folder.<br />
File:TRorg.png|Original ''Info screen''
Windows: %programfiles(x86)%\kodi\addons\skin.confluence\720p\
File:TRmod.png|MOD
 
File:TRosdorg.png|Original ''OSD''
==Add time remaining on the Info screen/OSD==
File:TRosdmod.png|MOD
<gallery widths=800px heights=127px>
File:TRinfoorg.png|Original ''Info screen''
File:TRinfomod.png|MOD
File:TROSDorgcrop.png|Original ''OSD''
File:TROSDmodcrop.png|MOD
</gallery>
</gallery>


1. Open the file ''VideoFullScreen.xml'', find the following line and comment it out. It will remove ''end time'' below the progress bar on the ''Info screen''.
A. Open the file VideoFullScreen.xml], find the following line and comment it out. It will remove ''end time'' below the progress bar on the ''Info screen''.
<syntaxhighlight lang="xml"><label>$LOCALIZE[31049] $INFO[Player.FinishTime]</label></syntaxhighlight>
<syntaxhighlight lang="xml"><label>$LOCALIZE[31049] $INFO[Player.FinishTime]</label></syntaxhighlight>


2. Add this after the above line. On the ''Info screen'' it will add ''runtime'' at the bottom of the progress bar and move ''end time'' into brackets.
B. Add this after the above line. On the ''Info screen'' it will add ''runtime'' at the bottom of the progress bar and move ''end time'' into brackets.
<syntaxhighlight lang="xml"><label>Runtime: $INFO[Player.Duration(hh:mm:ss)] (Ends $INFO[Player.FinishTime])</label></syntaxhighlight>
<syntaxhighlight lang="xml"><label>Runtime: $INFO[Player.Duration(hh:mm:ss)] (Ends $INFO[Player.FinishTime])</label></syntaxhighlight>


3. Find the following line and comment it out. It will remove ''runtime'' from the end of the progress bar.
C. Find the following line and comment it out. It will remove ''runtime'' from the end of the progress bar.
<syntaxhighlight lang="xml"><label>$INFO[Player.Duration(hh:mm:ss)]</label></syntaxhighlight>
<syntaxhighlight lang="xml"><label>$INFO[Player.Duration(hh:mm:ss)]</label></syntaxhighlight>


4. Add this after the above line. It will add ''time remaining'' to the end of the progress bar. The hyphen (‐) before $INFO just shows up as is in Kodi GUI, you don't need it.
D. Add this after the above line. It will add ''time remaining'' to the end of the progress bar. The hyphen (‐) before $INFO just shows up as is in Kodi GUI, you don't need it.
<syntaxhighlight lang="xml"><label>-$INFO[Player.TimeRemaining(hh:mm:ss)]</label></syntaxhighlight>
<syntaxhighlight lang="xml"><label>-$INFO[Player.TimeRemaining(hh:mm:ss)]</label></syntaxhighlight>


==A bit more modding==
==Change color and font size==
<gallery widths=800px heights=127px>
File:TRinfoorg.png|Original ''Info screen''
File:TRinfomod2.png|MOD incl. color and font change
</gallery>
 
A.
Find the following code (as is after the above changes):
Find the following code (as is after the above changes):
<syntaxhighlight lang="xml"><control type="label" id="1">
<syntaxhighlight lang="xml"><control type="label" id="1">
Line 34: Line 45:
     <aligny>center</aligny>
     <aligny>center</aligny>
     <font>font12</font>
     <font>font12</font>
     <textcolor>grey</textcolor>-->
     <textcolor>grey</textcolor>
     <scroll>true</scroll>
     <scroll>true</scroll>
     <visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible>
     <visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible>
Line 40: Line 51:
</control></syntaxhighlight>
</control></syntaxhighlight>


A. Change the color of "Runtime X (Ends Y)" to white by commenting out the following:
B. Change the color of "Runtime X (Ends Y)" to white by commenting out the following:
<syntaxhighlight lang="xml"><textcolor>grey</textcolor></syntaxhighlight>
<syntaxhighlight lang="xml"><textcolor>grey</textcolor></syntaxhighlight>
If you ''don't'' do B (if you do both the NEXT button and "Runtime" will overlap), you could also make the font size as e.g. time remaining.<br />
 
C. If you ''don't'' make ''runtime'' visible on the ''OSD'' too (if you do both the NEXT button and "Runtime" will overlap), you could also make the font size as e.g. time remaining.<br />
Change '''font12''' to '''font13'''
Change '''font12''' to '''font13'''


B. Want "Runtime X (Ends Y)" to be visible below the progress bar on the ''OSD'' too? Find the following line
D. Or you can do C and move the text a bit to the right. From the code section in A change<br>
<code><left>'''0'''</left></code> to <code><left>'''20'''</left></code>
 
==Make runtime/endtime visible on the OSD too==
<gallery widths=800px heights=127px>
File:TROSDorgcrop.png|Original ''OSD''
File:TRRosdmod.png|MOD
File:TRCFOSD-mod.png|MOD incl. color and font change
</gallery>
 
A. Find the following line and comment it out
<syntaxhighlight lang="xml"><visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible></syntaxhighlight>
<syntaxhighlight lang="xml"><visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible></syntaxhighlight>


Remove '''!Window.IsVisible(VideoOSD) +''' and change it to the following:
B. Add the following code, which ''doesn't'' contain '''!Window.IsVisible(VideoOSD) +'''
<syntaxhighlight lang="xml"><visible>!VideoPlayer.Content(LiveTV)</visible></syntaxhighlight>
<syntaxhighlight lang="xml"><visible>!VideoPlayer.Content(LiveTV)</visible></syntaxhighlight>
==Modify the seekbar (PAUSE dialog) to show time remaining==
<gallery widths=562px heights=98px>
File:Trmodorgseekbar.png|Original seekbar
File:Trmodseekbarmod1.png|MOD 1
File:Trmodseekbarmod2.png|MOD 2
File:Trmodseekbarmod3.png|MOD 3
</gallery>
A. Open the file DialogSeekBar.xml and find the following code:
<syntaxhighlight lang="xml">
<control type="label">
<description>Elapsed Time Label</description>
<left>20</left>
<top>23</top>
<width>240</width>
<height>20</height>
<font>font13_title</font>
<textcolor>white</textcolor>
<align>left</align>
<aligny>center</aligny>
<label>$INFO[Player.Time] - $INFO[Player.Duration]</label>
<visible>!Player.Seeking</visible>
</control></syntaxhighlight>
B. Comment out the following line: <br />
<syntaxhighlight lang="xml"><label>$INFO[Player.Time] - $INFO[Player.Duration]</label></syntaxhighlight>
C. Add the following line after it, this replaces ''runtime'' with ''time remaining''. <br/>
<syntaxhighlight lang="xml"><label>$INFO[Player.Time] | $INFO[Player.TimeRemaining(hh:mm:ss)] left</label></syntaxhighlight>
<br/>
You don't have to use '''|''' (vertical bar) or "left", though using "remaining" instead of "left" won't fit. But you can always make the seekbar longer. Other examples from the forums are:<br/><br/>
MOD 2<br/>
<syntaxhighlight lang="xml"><label>at $INFO[Player.Time], $INFO[Player.TimeRemaining(hh:mm:ss)] left</label></syntaxhighlight><br/>
MOD 3<br/>
<syntaxhighlight lang="xml"><label>$INFO[Player.Time] (-$INFO[Player.TimeRemaining(hh:mm:ss)])</label></syntaxhighlight>
[[Category:How-to]]
[[Category:How-to]]
[[Category:Skin_development]]

Latest revision as of 06:05, 29 August 2020

Home icon grey.png   ▶ Skinning ▶ Confluence ▶ HOW-TO:Add Time Remaining to Confluence


This tutorial will show how to replace runtime with time remaining at the end of the progress bar on the Info screen I and OSD M, and add the runtime to the bottom of the progress bar on the Info screen/OSD. It'll also show how to modify the seekbar (PAUSE dialog) to show time remaining.

This is achieved by editing VideoFullScreen.xml and DialogSeekBar.xml. They are located in the system data folder.
Windows: %programfiles(x86)%\kodi\addons\skin.confluence\720p\

Add time remaining on the Info screen/OSD

A. Open the file VideoFullScreen.xml], find the following line and comment it out. It will remove end time below the progress bar on the Info screen.

<label>$LOCALIZE[31049] $INFO[Player.FinishTime]</label>

B. Add this after the above line. On the Info screen it will add runtime at the bottom of the progress bar and move end time into brackets.

<label>Runtime: $INFO[Player.Duration(hh:mm:ss)] (Ends $INFO[Player.FinishTime])</label>

C. Find the following line and comment it out. It will remove runtime from the end of the progress bar.

<label>$INFO[Player.Duration(hh:mm:ss)]</label>

D. Add this after the above line. It will add time remaining to the end of the progress bar. The hyphen (‐) before $INFO just shows up as is in Kodi GUI, you don't need it.

<label>-$INFO[Player.TimeRemaining(hh:mm:ss)]</label>

Change color and font size

A. Find the following code (as is after the above changes):

<control type="label" id="1">
     <left>0</left>
     <top>120</top>
     <width>910</width>
     <height>25</height>
     <!--<label>$LOCALIZE[31049] $INFO[Player.FinishTime]</label>-->
     <label>Runtime: $INFO[Player.Duration(hh:mm:ss)] (Ends $INFO[Player.FinishTime])</label>
     <align>center</align>
     <aligny>center</aligny>
     <font>font12</font>
     <textcolor>grey</textcolor>
     <scroll>true</scroll>
     <visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible>
     <animation effect="fade" time="150">VisibleChange</animation>
</control>

B. Change the color of "Runtime X (Ends Y)" to white by commenting out the following:

<textcolor>grey</textcolor>

C. If you don't make runtime visible on the OSD too (if you do both the NEXT button and "Runtime" will overlap), you could also make the font size as e.g. time remaining.
Change font12 to font13

D. Or you can do C and move the text a bit to the right. From the code section in A change
<left>0</left> to <left>20</left>

Make runtime/endtime visible on the OSD too

A. Find the following line and comment it out

<visible>!Window.IsVisible(VideoOSD) + !VideoPlayer.Content(LiveTV)</visible>

B. Add the following code, which doesn't contain !Window.IsVisible(VideoOSD) +

<visible>!VideoPlayer.Content(LiveTV)</visible>


Modify the seekbar (PAUSE dialog) to show time remaining

A. Open the file DialogSeekBar.xml and find the following code:

<control type="label">
	<description>Elapsed Time Label</description>
	<left>20</left>
	<top>23</top>
	<width>240</width>
	<height>20</height>
	<font>font13_title</font>
	<textcolor>white</textcolor>
	<align>left</align>
	<aligny>center</aligny>
	<label>$INFO[Player.Time] - $INFO[Player.Duration]</label>
	<visible>!Player.Seeking</visible>
</control>

B. Comment out the following line:

<label>$INFO[Player.Time] - $INFO[Player.Duration]</label>

C. Add the following line after it, this replaces runtime with time remaining.

<label>$INFO[Player.Time] | $INFO[Player.TimeRemaining(hh:mm:ss)] left</label>


You don't have to use | (vertical bar) or "left", though using "remaining" instead of "left" won't fit. But you can always make the seekbar longer. Other examples from the forums are:

MOD 2

<label>at $INFO[Player.Time], $INFO[Player.TimeRemaining(hh:mm:ss)] left</label>


MOD 3

<label>$INFO[Player.Time] (-$INFO[Player.TimeRemaining(hh:mm:ss)])</label>