Difference between revisions of "Live Examples"

From MSX - Wiki
Jump to navigation Jump to search
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Example 1 (Lifetime) ==
 
== Example 1 (Lifetime) ==
 
=== Screenshot ===
 
=== Screenshot ===
−
[[File:live1.png|thumb|640px|none|Example Screenshot (Lifetime)]]
+
[[File:live1.png|thumb|640px|none|Example Screenshot (Live API Test - Lifetime)]]
  
 
=== Code===
 
=== Code===
Line 76: Line 76:
 
'''Note: For the resume feature, version 0.1.74 or higher is needed. A content can only be resumed if at least 10 seconds remain, otherwise it is started from the beginning.'''
 
'''Note: For the resume feature, version 0.1.74 or higher is needed. A content can only be resumed if at least 10 seconds remain, otherwise it is started from the beginning.'''
 
=== Screenshot ===
 
=== Screenshot ===
−
[[File:live2.png|thumb|640px|none|Example Screenshot (Playback & Resume)]]
+
[[File:live2.png|thumb|640px|none|Example Screenshot (Live API Test - Playback & Resume)]]
  
 
=== Code===
 
=== Code===
Line 91: Line 91:
 
         "progress": -1,
 
         "progress": -1,
 
         "live": {
 
         "live": {
−
             "type": "playback",          
+
             "type": "playback",
−
             "titleFooter": "{progress:time:hh:mm:ss}",
+
             "titleFooter": "",
 +
            "running": {
 +
                "titleFooter": "{progress:time:hh:mm:ss}"
 +
            },
 
             "action": "player:show"
 
             "action": "player:show"
 
         },
 
         },
Line 132: Line 135:
 
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json
 
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_2.json
  
−
== Example 3 (Channels) ==
+
== Example 3 (Extended Playback & Resume) ==
 +
'''Note: For this example, version 0.1.153 or higher is needed.'''
 +
=== Screenshot ===
 +
[[File:live3.png|thumb|640px|none|Example Screenshot (Live API Test - Extended Playback & Resume)]]
 +
 
 +
=== Code===
 +
<syntaxhighlight lang="json">
 +
{
 +
    "type": "pages",
 +
    "headline": "Live API Test (Extended Playback & Resume)",
 +
    "overlay": {
 +
        "items": [{
 +
                "id": "info",
 +
                "type": "space",
 +
                "layout": "0,4,12,2",
 +
                "headline": "",
 +
                "text": ""
 +
            }]
 +
    },
 +
    "template": {
 +
        "type": "separate",
 +
        "layout": "0,0,2,4",
 +
        "area": "0,0,12,4",
 +
        "icon": "msx-white-soft:movie",
 +
        "color": "msx-glass",
 +
        "badge": "",
 +
        "titleFooter": "",
 +
        "progress": -1,
 +
        "live": {
 +
            "type": "playback",
 +
            "coming": {
 +
                "badge": "Resumable",
 +
                "badgeColor": "msx-blue",
 +
                "complete": {
 +
                    "badge": "Completed",
 +
                    "badgeColor": "msx-red"
 +
                }
 +
            },
 +
            "running": {
 +
                "badge": "Running",
 +
                "badgeColor": "msx-yellow",
 +
                "titleFooter": "{progress:time:hh:mm:ss}"
 +
            },
 +
            "action": "player:show"
 +
        },
 +
        "selection": {
 +
            "action": "update:content:overlay:info",
 +
            "data": {
 +
                "headline": "{context:title}",
 +
                "live": {
 +
                    "type": "playback",
 +
                    "source": "resume:key:{context:resumeKey}",
 +
                    "over": {
 +
                        "text": "Not started yet"
 +
                    },
 +
                    "coming": {
 +
                        "text": "Remaining: {countdown:text:hms} ({countdown:percentage})",
 +
                        "complete": {
 +
                            "text": "Completed"
 +
                        }
 +
                    }
 +
                }
 +
            }
 +
        },
 +
        "properties": {
 +
            "resume:key": "{context:resumeKey}",
 +
            "resume:context": "live_test"
 +
        }
 +
    },
 +
    "items": [{
 +
            "resumeKey": "video1",
 +
            "title": "Video 1",
 +
            "action": "video:http://msx.benzac.de/media/video1.mp4"
 +
        }, {
 +
            "resumeKey": "video2",
 +
            "title": "Video 2",
 +
            "action": "video:http://msx.benzac.de/media/video2.mp4"
 +
        }, {
 +
            "resumeKey": "video3",
 +
            "title": "Video 3",
 +
            "action": "video:http://msx.benzac.de/media/video3.mp4"
 +
        }, {
 +
            "enumerate": false,
 +
            "type": "button",
 +
            "offset": "0,0,0,-1",
 +
            "icon": "highlight-off",
 +
            "label": "Clear Keys",
 +
            "action": "resume:clear:context:live_test",   
 +
            "selection": {
 +
                "action": "update:content:overlay:info",
 +
                "data": {
 +
                    "headline": "",
 +
                    "text": "{ico:msx-blue:info} Clear resumable keys for all videos in this example",
 +
                    "live": {}
 +
                }
 +
            }
 +
        }]
 +
}
 +
</syntaxhighlight>
 +
 
 +
=== Demo ===
 +
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
 +
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
 +
 
 +
== Example 4 (Channels) ==
 
For this example, the <code>"setup"</code> and <code>"schedule"</code> type is used to create a list of channels with live programs in different appearance styles (i.e. list, grid, compact, overview, and preview). A corresponding live service creates test programs with random <code>from</code> and <code>to</code> values. The <code>execute:service:{URL}</code> with the <code>update:content:{ITEM_ID}</code> action is used to update each channel item with the current live program. Please have a look at following example links.
 
For this example, the <code>"setup"</code> and <code>"schedule"</code> type is used to create a list of channels with live programs in different appearance styles (i.e. list, grid, compact, overview, and preview). A corresponding live service creates test programs with random <code>from</code> and <code>to</code> values. The <code>execute:service:{URL}</code> with the <code>update:content:{ITEM_ID}</code> action is used to update each channel item with the current live program. Please have a look at following example links.
  
Line 147: Line 254:
 
'''Note: For the preview style, version 0.1.110 or higher is needed. For the TV guide, version 0.1.123 or higher is needed.'''
 
'''Note: For the preview style, version 0.1.110 or higher is needed. For the TV guide, version 0.1.123 or higher is needed.'''
 
=== Screenshot ===
 
=== Screenshot ===
−
[[File:live3.png|thumb|640px|none|Example Screenshot (Channels)]]
+
[[File:live4.png|thumb|640px|none|Example Screenshot (Live API Test - Channels)]]
  
 
=== Code===
 
=== Code===
Line 179: Line 286:
  
 
=== Demo ===
 
=== Demo ===
−
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
+
* Launch via App: https://msx.benzac.de/?start=menu:https://msx.benzac.de/info/xp/data/live_test_4.json
−
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/live_test_3.json
+
* Launch via Demo Page: https://msx.benzac.de/info/?start=menu:https://msx.benzac.de/info/xp/data/live_test_4.json
 +
 
 +
== See also ==
 +
* [[Live Object]]
 +
* [[Live Inline Expressions]]

Latest revision as of 11:17, 6 July 2023

Example 1 (Lifetime)[edit]

Screenshot[edit]

Example Screenshot (Live API Test - Lifetime)

Code[edit]

{
    "type": "pages",
    "headline": "Live API Test (Lifetime)",
    "template": {
        "type": "button",
        "layout": "0,0,6,3",
        "headline": "State: Init",
        "text": "...",
        "progress": -1,
        "action": "live",
        "live": {
            "type": "lifetime",
            "duration": 60000,
            "delay": 10000,
            "coming": {
                "headline": "State: Coming",
                "execute": {
                    "action": "info:Content is coming."
                }
            },
            "running": {
                "headline": "State: Running",
                "execute": {
                    "action": "info:Content is running."
                }
            },
            "over": {
                "headline": "State: Over",
                "execute": {
                    "action": "info:Content is over."
                }
            },
            "text": [
                "Creation: {creation:date:yyyy-mm-dd} {creation:time:hh:mm:ss}{br}",
                "From: {from:date:yyyy-mm-dd} {from:time:hh:mm:ss}{br}",
                "To: {to:date:yyyy-mm-dd} {to:time:hh:mm:ss}{br}",
                "Now:  {now:date:yyyy-mm-dd} {now:time:hh:mm:ss}{br}",
                "Duration: {duration:time:mm:ss}{br}",
                "Progress: {progress:time:mm:ss} ({progress:percentage}){br}",
                "Countdown: {countdown:time:mm:ss} ({countdown:percentage}){br}",
                "Overflow: {overflow:time:mm:ss}{br}"
            ]
        }
    },
    "items": [{
            "tag": "1"
        }, {
            "tag": "2"
        }, {
            "tag": "3"
        }, {
            "tag": "4"
        }, {
            "tag": "5"
        }, {
            "tag": "6"
        }, {
            "tag": "7"
        }, {
            "tag": "8"
        }]
}

Demo[edit]

Example 2 (Playback & Resume)[edit]

Note: For the resume feature, version 0.1.74 or higher is needed. A content can only be resumed if at least 10 seconds remain, otherwise it is started from the beginning.

Screenshot[edit]

Example Screenshot (Live API Test - Playback & Resume)

Code[edit]

{
    "type": "pages",
    "headline": "Live API Test (Playback & Resume)",
    "template": {
        "type": "separate",
        "layout": "0,0,2,4",
        "icon": "msx-white-soft:movie",
        "color": "msx-glass",       
        "titleFooter": "",
        "progress": -1,
        "live": {
            "type": "playback",
            "titleFooter": "",
            "running": {
                "titleFooter": "{progress:time:hh:mm:ss}"  
            },
            "action": "player:show"
        },
        "properties": {
            "resume:key": "url"
        }
    },
    "items": [{
            "title": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4"
        }, {
            "title": "Video 2",
            "action": "video:http://msx.benzac.de/media/video2.mp4"
        }, {
            "title": "Video 3",
            "action": "video:http://msx.benzac.de/media/video3.mp4"
        }, {
            "enumerate": false,
            "type": "button",
            "offset": "0,0,0,-1",
            "icon": "highlight-off",
            "label": "Clear Keys",
            "action": "data",
            "data": {
                "actions": [{
                        "action": "resume:clear:http://msx.benzac.de/media/video1.mp4"
                    }, {
                        "action": "resume:clear:http://msx.benzac.de/media/video2.mp4"
                    }, {
                        "action": "resume:clear:http://msx.benzac.de/media/video3.mp4"
                    }]
            }
        }]
}

Demo[edit]

Example 3 (Extended Playback & Resume)[edit]

Note: For this example, version 0.1.153 or higher is needed.

Screenshot[edit]

Example Screenshot (Live API Test - Extended Playback & Resume)

Code[edit]

{
    "type": "pages",
    "headline": "Live API Test (Extended Playback & Resume)",
    "overlay": {
        "items": [{
                "id": "info",
                "type": "space",
                "layout": "0,4,12,2",
                "headline": "",
                "text": ""
            }]
    },
    "template": {
        "type": "separate",
        "layout": "0,0,2,4",
        "area": "0,0,12,4",
        "icon": "msx-white-soft:movie",
        "color": "msx-glass",
        "badge": "",
        "titleFooter": "",
        "progress": -1,
        "live": {
            "type": "playback",
            "coming": {
                "badge": "Resumable",
                "badgeColor": "msx-blue",
                "complete": {
                    "badge": "Completed",
                    "badgeColor": "msx-red"
                }
            },
            "running": {
                "badge": "Running",
                "badgeColor": "msx-yellow",
                "titleFooter": "{progress:time:hh:mm:ss}"
            },
            "action": "player:show"
        },
        "selection": {
            "action": "update:content:overlay:info",
            "data": {
                "headline": "{context:title}",
                "live": {
                    "type": "playback",
                    "source": "resume:key:{context:resumeKey}",
                    "over": {
                        "text": "Not started yet"
                    },
                    "coming": {
                        "text": "Remaining: {countdown:text:hms} ({countdown:percentage})",
                        "complete": {
                            "text": "Completed"
                        }
                    }
                }
            }
        },
        "properties": {
            "resume:key": "{context:resumeKey}",
            "resume:context": "live_test"
        }
    },
    "items": [{
            "resumeKey": "video1",
            "title": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4"
        }, {
            "resumeKey": "video2",
            "title": "Video 2",
            "action": "video:http://msx.benzac.de/media/video2.mp4"
        }, {
            "resumeKey": "video3",
            "title": "Video 3",
            "action": "video:http://msx.benzac.de/media/video3.mp4"
        }, {
            "enumerate": false,
            "type": "button",
            "offset": "0,0,0,-1",
            "icon": "highlight-off",
            "label": "Clear Keys",
            "action": "resume:clear:context:live_test",     
            "selection": {
                "action": "update:content:overlay:info",
                "data": {
                    "headline": "",
                    "text": "{ico:msx-blue:info} Clear resumable keys for all videos in this example",
                    "live": {}
                }
            }
        }]
}

Demo[edit]

Example 4 (Channels)[edit]

For this example, the "setup" and "schedule" type is used to create a list of channels with live programs in different appearance styles (i.e. list, grid, compact, overview, and preview). A corresponding live service creates test programs with random from and to values. The execute:service:{URL} with the update:content:{ITEM_ID} action is used to update each channel item with the current live program. Please have a look at following example links.

A more complex example is the TV guide, which shows how you can display channel programs as classic EPG (Electronic Program Guide) timeline. For this purpose, the from and to values of a program are mapped to the layout and offset values of a content item. Please have a look at the following example link.

Note: For the preview style, version 0.1.110 or higher is needed. For the TV guide, version 0.1.123 or higher is needed.

Screenshot[edit]

Example Screenshot (Live API Test - Channels)

Code[edit]

{
    "headline": "Live API Test (Channels)",
    "extension": "{ico:msx-white:event} {now:date:D, M d, yyyy}{tb}{ico:msx-white:access-time} {now:time:hh:mm}",
    "menu": [{
            "label": "List",
            "data": "http://msx.benzac.de/services/live.php?type=list"
        }, {
            "label": "Grid",
            "data": "http://msx.benzac.de/services/live.php?type=grid"
        }, {
            "label": "Compact",
            "data": "http://msx.benzac.de/services/live.php?type=compact"
        }, {
            "label": "Overview",
            "data": "http://msx.benzac.de/services/live.php?type=overview"
        }, {
            "label": "Preview",
            "data": "http://msx.benzac.de/services/live.php?type=preview"
        }, {
            "type": "separator"
        }, {
            "label": "TV Guide",
            "data": "user:http://msx.benzac.de/services/guide.php"
        }]
}

Demo[edit]

See also[edit]

Retrieved from "https://msx.benzac.de/wiki/index.php?title=Live_Examples&oldid=3070"