Merge pull request #47 from bitmovin/feature/untracked/update-demos

Updating all demos to latest version as seen on bitmovin.com/demos

README.md

@@ -1,92 +1,123 @@
-**Don't create PRs for this project, demos are not in [demo-framework](https://github.com/bitmovin/demo-framework)**
-
 # Bitmovin Demos
 [![bitmovin](http://bitmovin-a.akamaihd.net/webpages/bitmovin-logo-github.png)](http://www.bitmovin.com)
 
-## How to write a demo
+# Introduction
+Welcome to Bitmovin demos. Our demo page is hosted at [bitmovin.com/demos](https://bitmovin.com/demos/).
+This repository is meant to be used as a reference when integrating our player into your products.
+
+## Testing a demo
+
+If you wish to test a demo, you can either browse one of our demos hosted on our [demo page](https://bitmovin.com/demos/) or 
+navigate to a demo inside one of our products, for example [player/4k](./player/4k) and follow these steps:
+  1. Copy the `index.html`
+  1. Replace the`${code:setup.js}` (depending on the demo name may vary) with the contents, wrapping it with a `<script>` tag
+  1. Open your custom webpage
+
+## Creating a demo
+In order to create a new demo, you need to create a new folder (with new demo name) in either the
+[demos/encoding](./demos/analytics), [demos/encoding](./demos/encoding) or [demos/player](./demos/player) folder,
+depending on the category of the demo, with the following contents:
+
+- `info.yaml` (required) - Demo configuration
+- `index.html` (optional) - Entry point of the demo
+- `icon.svg` (optional) - The demo icon
+- `css/` (optional) - Add custom `.css` files withing this folder
+- `js/` (optional) - Add custom `.js` files within this folder
 
-In order to create a new demo you need to create a new folder in either the encoding,
-analytics, or player folder with the following contents:
+## Demo `yaml.info` file structure
 
-  - `info.yaml` (required) - Demo configuration
-  - `index.html` (optional) - Entry point of the demo
-  - `icon.svg` (optional) - The demo icon
-  - `css/` (optional) - Add custom `.css` files withing this folder
-  - `js/` (optional) - Add custom `.js` files within this folder
+This section will explain what information in your YAML file will be processed and how to create your own
+Take an example xml like this one [player/drm/info.xml](./demos/player/drm/info.yaml)
 
+### Minimal YAML File Example
+
+```yaml
+title: Hello World
+executable:
+  executable: false
+  indexfile: index.html
+```
 
-## YAML File Structure
-This section will explain what information in your YAML file will be processed and how
+### YAML keys:
 
 #### `title` (string, required)
+
 The title is used to display the demo in the overview and is rendered in the detail view as a header
 
 #### `description` (string, required)
+
 An optional short description which will be displayed in the overview. In the detail view this description will only be rendered if there is no `<div class="description">` in the demo's `index.html` file
 
 #### `executable` (list, optional)
+
 A mandatory section defining the contents of the demo detail page
-  - `executable`: `true` or `false`  
-    Specifies if the files should be rendered in native html and contain code
-  - `indexfile`: e.g. `index.html`  
-    Sets the root file which is used to be rendered as the content of the demo
-
+
+- `executable`: `true` or `false`  
+  Specifies if the files should be rendered in native html and contain code that will be replaced during compilation
+- `indexfile`: e.g. `index.html`  
+  Sets the root file which is rendered as the content of the demo
+
 #### `code` (list, optional)
+
 An optional section giving information about the code snippets which will be displayed on the demo detail page.
-  - `show_code`: `true`  or `false`  
-    Should code snippets be included
-  - `language`: e.g., `js`, `java`, `c`  
-    The default language of the code snippets which will be used for the markup, supported languages can be found here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
-  - `files`  
-    a list of files which should be included as code snippets (**not** actually executed, but displayed in raw text. JavaScript code to be executed must go into `js/`).
-    These snippets will be displayed automatically at the end of the demo page, unless not specified elsewhere (see [Template Patterns](#template-patterns)).
+
+- `show_code`: `true` or `false`  
+  Should code snippets be included
+- `language`: e.g., `js`, `java`, `c`  
+  The default language of the code snippets which will be used for the markup, supported languages can be found here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
+- `files`  
+  a list of files which should be included as code snippets (**not** actually executed, but displayed in raw text. JavaScript code to be executed must go into `js/`).
+  These snippets will be displayed automatically at the end of the demo page, unless not specified elsewhere (see [Template Patterns](#demo-html-template-placeholders)).
 
 #### `tags` (list, optional)
-  An optional list of tags which are used to filter the overview. Categories will be automatically added as tag.
+
+An optional list of tags which are used to filter the overview. Categories will be automatically added as tag.
 
 #### `additionalCategories` (list, optional)
-  If your demo should show up in more than one category in the overview you can add the additional categories here.
-  The original category (the folder the demo lies in) is always included automatically.
-  Possible values are `analytics`, `encoding`, and `player`
+
+If your demo should show up in more than one category in the overview you can add the additional categories here.
+The original category (the folder the demo lies in) is always included automatically.
+Possible values are `analytics`, `encoding`, and `player`
 
 #### `priority` (number, optional)
-  Optional configuration that affects sorting. Defaults to `0`.
+
+The optional configuration that affects sorting. Defaults to `0`.
 
 #### `hide_github_link` (boolean, optional)
-  Remove the link to the GitHub repository by setting this to `true`. Defaults to `false`.
+
+Remove the link to the GitHub repository by setting this to `true`. Defaults to `false`.
 
 #### `buttons` (list, optional)
+
 Add a list of buttons, where each entry should have the following data:
-  - `name`  
-    A unique identifier
-  - `text`  
-    Display text
-  - `url`  
-    Go there on button click
-  - `name`  
-    An icon name
 
-## Minimal YAML File Example
+- `name`  
+  A unique identifier
+- `text`  
+  Display text
+- `url`  
+  Go there on button click
+- `name`  
+  An icon name
 
-```yaml
-title: Hello World
-executable:
-  executable: false
-  indexfile: index.html
-```
+## Demo HTML Template placeholders
+
+The following placeholders will be replaced in the demo's `index.html` page:
 
-## Template Patterns
-The following patterns will be replaced in the demo's index page:
+### `${code:filename.ending:language}`
 
-#### `${code:filename.ending:language}`
 To specify the location of code snippets (defined in `code.files` of `info.yaml`) to be displayed, use the following:
+
 ```
 ${code:myFile.css:css}
 ```
+
 > While the `:css` part may be omitted, it can be used to overwrite the default, set in `code.language` of `info.yaml`.
 
-#### `<h1 class="demo-title">`
+### `<h1 class="demo-title">`
+
 If the demo template contains this element for the title, it will overwrite `title` from `info.yaml`
 
-#### `<div class="description">`
+### `<div class="description">`
+
 Also `description` of `info.yaml` may be overwritten with a custom element.

analytics/analytics-bitrate-ladder-validator/info.json

@@ -0,0 +1,31 @@
+{
+  "title": "Bitrate Ladder Validator",
+  "description": "Build and customize graphs exactly the way your team needs it",
+  "long_description": "Build and customize graphs exactly the way your team needs it to help troubleshoot, optimize and plan your development efforts.",
+  "executable": {
+    "executable": true,
+    "indexfile": "index.html"
+  },
+  "code": {
+    "show_code": true,
+    "language": "js",
+    "files": [
+      "available-bitrates.js",
+      "available-bandwidth.js",
+      "playback-bitrate.js"
+    ]
+  },
+  "tags": [
+    "experimental",
+    "dashboard",
+    "analytics",
+    "bitrate",
+    "ladder validator",
+    "monitor",
+    "REST",
+    "AB",
+    "testing",
+    "QOE"
+  ],
+  "hide_github_link": true
+}

analytics/analytics-impressions/info.json

@@ -0,0 +1,16 @@
+{
+  "title": "Impression Count",
+  "description": "Query the Analytics Impressions that occurred in the last 24 hours, grouped by hour",
+  "long_description": "Querying the analytics engine to send specific metrics to your dashboard is what the Bitmovin Analytics system is all about. See the new Bitmovin Analytics demo.",
+  "code": {
+    "show_code": true,
+    "language": "js",
+    "files": [
+      "impressions.js"
+    ]
+  },
+  "tags": [
+    "basic",
+    "impression"
+  ]
+}

analytics/cost-of-errors/index.html

@@ -0,0 +1,166 @@
+<p class="text-justify">
+  Errors and any other interruptions are one of the major sources of frustration for customers.
+  Vimeo recently released data that says that 6% of SVOD users churn due to technical reasons. So in
+  essence there is a real cost to every error that a viewer on your platform experiences. We made
+  the effort to calculate how costly an error is.
+</p>
+
+
+<h2 class="my-3">AVOD<a href="#avodFootnote" target="_self" class="btm-footnote"></a></h2>
+<p class="text-justify">
+  <a
+    href="https://www.researchgate.net/publication/261045256_Video_Stream_Quality_Impacts_Viewer_Behavior_Inferring_Causality_Using_Quasi-Experimental_Designs"
+    target="_blank" style="font-size: 18px">S. Shunmuga Krishnan and Ramesh K. Sitaraman</a> have
+  calculated that “a viewer
+  who experienced failure is 2.32% less likely to revisit the same site within a week”. Based on
+  this research we created the following calculator:
+</p>
+<div class="container">
+  <div class="row align-items-end">
+    <div class="col-md-5">
+      <form id="avod-form" novalidate>
+        <div class="form-group">
+          <label class="form-control-label" for="averageCPMInput">Average CPM</label>
+          <div class="input-group mb-3">
+            <input id="averageCPMInput"
+                   class="form-control"
+                   type="number"
+                   min="0"
+                   step="0.01"
+                   disabled
+                   aria-label="Average CPM">
+            <div class="input-group-append"><span class="input-group-text">$</span></div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="weeklyRecurringViewersInput">Weekly recurring viewers</label>
+          <div class="input-group mb-3">
+            <input id="weeklyRecurringViewersInput"
+                   class="form-control"
+                   type="number"
+                   min="0"
+                   step="0.01"
+                   disabled
+                   aria-label="Weekly recurring viewers">
+            <div class="input-group-append"><span class="input-group-text">%</span></div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="playsPerUniquePerWeekInput">Plays per unique per week</label>
+          <input id="playsPerUniquePerWeekInput"
+                 class="form-control"
+                 type="number"
+                 min="0"
+                 step="0.01"
+                 disabled
+                 aria-label="Plays per unique per week">
+        </div>
+
+        <div class="form-group">
+          <label for="adsPerPlayInput">Ads per play</label>
+          <input id="adsPerPlayInput"
+                 class="form-control"
+                 type="number"
+                 min="0"
+                 step="0.01"
+                 disabled
+                 aria-label="Ads per play">
+        </div>
+      </form>
+    </div> <!--col-->
+    <div class="col-md-7">
+      <div class="p-3 mb-2 bg-light">
+        <div>The cost of 1000 errors based on your inputs is</div>
+        <div id="avod-costs" class="font-weight-bold" style="font-size: 24px">--</div>
+      </div>
+    </div> <!--col-->
+  </div><!--row-->
+</div><!--container-->
+
+
+<h2 class="my-3">SVOD<a href="#svodFootnote" target="_self" class="btm-footnote"></a></h2>
+<p class="text-justify">
+  Using Vimeo’s “Technical Churn Rate” of 6% we calculate how much a decrease in errors can prolong
+  the customer lifetime value for this particular churn reason.
+</p>
+<div class="container">
+  <div class="row align-items-end">
+    <div class="col-md-5">
+      <form id="svod-form" novalidate>
+        <div class="form-group">
+          <label class="form-control-label" for="playsPerSubscriberInput">Plays per
+            subscriber</label>
+          <input id="playsPerSubscriberInput"
+                 class="form-control"
+                 type="number"
+                 min="0"
+                 step="0.01"
+                 disabled
+                 aria-label="Plays per subscriber">
+        </div>
+
+        <div class="form-group">
+          <label class="form-control-label" for="currentErrorPercentageInput">Current error
+            percentage</label>
+          <div class="input-group mb-3">
+            <input id="currentErrorPercentageInput"
+                   class="form-control"
+                   type="number"
+                   min="0"
+                   step="0.01"
+                   disabled
+                   aria-label="Current error percentage">
+            <div class="input-group-append"><span class="input-group-text">%</span></div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="form-control-label" for="targetErrorDecreaseInput">Target error
+            decrease</label>
+          <div class="input-group mb-3">
+            <input id="targetErrorDecreaseInput"
+                   class="form-control"
+                   type="number"
+                   min="0"
+                   step="0.01"
+                   disabled
+                   aria-label="Target error decrease">
+            <div class="input-group-append"><span class="input-group-text">%</span></div>
+          </div>
+        </div>
+      </form>
+    </div><!--col-->
+    <div class="col-md-7">
+      <div class="p-3 mb-2 bg-light">
+        <div>Based on the inputs you provided, the lifetime value for the technical churn reason viewer segment can be prolonged by</div>
+        <div id="svod-rate" class="font-weight-bold" style="font-size: 24px">--</div>
+      </div>
+    </div><!--col-->
+  </div><!--row-->
+</div><!--container-->
+
+
+<div class="mt-5">
+  <ol>
+    <li class="mb-2" style="font-size: 12px;">
+      <span id="avodFootnote">Formula Cost per AVOD Error: [Plays per Unique] x [CPM] x [Ads per play] x [Recurring viewers] x [% less likely to return]</span>
+    </li>
+    <li class="mb-2" style="font-size: 12px;">
+      <span id="svodFootnote">Formula SVOD rate: ( [# of errors over LTV] - ( [# of errors over LTV] x (1 - [Target error decrease] ))) x [Errors per day] / [LTV]</span>
+    </li>
+  </ol>
+</div>
+
+
+<div class="mt-5">
+  <small class="d-inline-block font-weight-bold">Disclaimer</small>
+  <small class="d-inline-block text-justify">The Bitmovin Analytics Demo is provided on an ‘AS IS’
+    and ‘AS AVAILABLE’ basis, and to the fullest extent permitted by mandatory law, Bitmovin will
+    not be liable for any damages whatsoever, including and not limited to, loss of business or
+    profits or any direct, indirect or consequential loss arising from reliance and use of these
+    models where any action taken on such basis is strictly at the user's own risk.</small>
+</div>
+
+