@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

package/stat/BookReaderComponent/BookReaderComponent.js

@@ -0,0 +1,117 @@
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit-element';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+
+import '@internetarchive/ia-item-navigator';
+import '../BookNavigator/BookNavigator.js';
+
+export class BookReader extends LitElement {
+  static get properties() {
+    return {
+      base64Json: { type: String },
+      baseHost: { type: String },
+      sharedObserver: { type: Object }
+    };
+  }
+
+  constructor() {
+    super();
+    this.base64Json = '';
+    this.baseHost = 'https://archive.org';
+    this.sharedObserver = new SharedResizeObserver();
+  }
+
+  firstUpdated() {
+    this.fetchData();
+  }
+
+  /**
+   * Fetch metadata response from public metadata API
+   * convert response to base64 data
+   * set base64 data to props
+   */
+  async fetchData() {
+    const ocaid = new URLSearchParams(location.search).get('ocaid');
+    const response = await fetch(`${this.baseHost}/metadata/${ocaid}`);
+    const bookMetadata = await response.json();
+    const jsonBtoa = btoa(JSON.stringify(bookMetadata));
+    this.setBaseJSON(jsonBtoa);
+  }
+
+  /**
+   * Set base64 data to prop
+   * @param {string} value - base64 string format
+   */
+  setBaseJSON(value) {
+    this.base64Json = value;
+  }
+
+  render() {
+    return html`
+      <div class="ia-bookreader">
+        <ia-item-navigator
+          .itemType=${'bookreader'}
+          .basehost=${this.baseHost}
+          .item=${this.base64Json}>
+          .sharedObserver=${this.sharedObserver}
+          <div slot="theater-main">
+            <slot name="theater-main"></slot>
+          </div>
+        </ia-item-navigator>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --primaryBGColor: var(--black, #000);
+        --secondaryBGColor: #222;
+        --tertiaryBGColor: #333;
+        --primaryTextColor: var(--white, #fff);
+        --primaryCTAFill: #194880;
+        --primaryCTABorder: #c5d1df;
+        --secondaryCTAFill: #333;
+        --secondaryCTABorder: #999;
+        --primaryErrorCTAFill: #e51c26;
+        --primaryErrorCTABorder: #f8c6c8;
+      }
+
+      .ia-bookreader {
+        background-color: var(--primaryBGColor);
+        position: relative;
+        min-height: inherit;
+        height: inherit;
+      }
+
+      ia-item-navigator {
+        display: block;
+        width: 100%;
+        color: var(--primaryTextColor);
+        --menuButtonLabelDisplay: block;
+        --menuWidth: 320px;
+        --menuSliderBg: var(--secondaryBGColor);
+        --activeButtonBg: var(--tertiaryBGColor);
+        --subpanelRightBorderColor: var(--secondaryCTABorder);
+        --animationTiming: 100ms;
+        --iconFillColor: var(--primaryTextColor);
+        --iconStrokeColor: var(--primaryTextColor);
+        --menuSliderHeaderIconHeight: 2rem;
+        --menuSliderHeaderIconWidth: 2rem;
+        --iconWidth: 2.4rem;
+        --iconHeight: 2.4rem;
+        --shareLinkColor: var(--primaryTextColor);
+        --shareIconBorder: var(--primaryTextColor);
+        --shareIconBg: var(--secondaryBGColor);
+        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+      }
+    `;
+  }
+}
+
+window.customElements.define("ia-bookreader", BookReader);

package/stat/assets/icons/1up.svg

@@ -0,0 +1,12 @@
+<svg
+  width="11"
+  height="19"
+  viewBox="0 0 11 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="1upTitleID 1upDescID"
+>
+  <title id="1upTitleID">One-page mode</title>
+  <desc id="1upDescID">An illustration of a rectangle representing a book page</desc>
+  <path d="m9.77194068 1c.10796015 0 .19839954.08352773.2220361.19570997l.00602322.05822495v16.49213018c0 .1202095-.07501651.22091-.17576747.2472283l-.05229185.0067066h-8.54388136c-.10796015 0-.19839954-.0835277-.2220361-.19571l-.00602322-.0582249v-16.49213018c0-.12020948.07501651-.22091.17576747-.24722832l.05229185-.0067066z" fill="none" stroke="#fff" stroke-width="1.5" />
+</svg>

package/stat/assets/icons/2up.svg

@@ -0,0 +1,15 @@
+<svg
+  width="20"
+  height="19"
+  viewBox="0 0 20 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="2upTitleID 2upDescID"
+>
+  <title id="2upTitleID">Two-page mode</title>
+  <desc id="2upDescID">An illustration of two rectangles in a row representing an open book</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="1.5">
+    <path d="m18.5438814 1c.2159203 0 .396799.08352773.4440722.19570997l.0120464.05822495v16.49213018c0 .1202095-.150033.22091-.3515349.2472283l-.1045837.0067066h-17.08776275c-.21592031 0-.3967991-.0835277-.44407221-.19571l-.01204644-.0582249v-16.49213018c0-.12020948.15003302-.22091.35153494-.24722832l.10458371-.0067066z" />
+    <path d="m10 2v15" stroke-linecap="square" />
+  </g>
+</svg>

package/stat/assets/icons/advance.svg

@@ -0,0 +1,26 @@
+<svg
+  width="21"
+  height="19"
+  viewBox="0 0 21 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="advanceTitleID advanceDescID"
+>
+  <title id="advanceTitleID">Advance icon</title>
+  <desc id="advanceDescID">An arrow pointing in a forward direction</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-200.000000, -15.000000)">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(144.000000, 10.000000)">
+          <g transform="translate(11.000000, 10.000000) scale(-1, 1) translate(-11.000000, -10.000000) translate(1.000000, 0.000000)">
+            <polyline stroke="#fff" stroke-width="2" stroke-linejoin="round" points="14.4444444 16.6666667 20 16.6666667 20 3.33333333 5.55555556 3.33333333"></polyline>
+            <polygon fill="#fff" points="5.55555556 0 5.55555556 6.66666667 1.11111111 3.33333333"></polygon>
+            <text transform="translate(6.666667, 13.333333) scale(-1, 1) translate(-6.666667, -13.333333) " font-family="HelveticaNeue, Helvetica Neue, sans-serif" font-size="10" font-weight="normal" fill="#fff">
+              <tspan x="0" y="17.3333333">10</tspan>
+            </text>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg height="8" viewBox="0 0 5 8" width="5" xmlns="http://www.w3.org/2000/svg"><path d="m.30238333.28352881c.36525795-.3556459.93280829-.37581056 1.32099799-.06558269l.09308988.0844372 3 3.08108108.08194437.09533317c.27484336.36339327.26799481.87009349-.01656959 1.22592581l-.08449101.09308363-3 2.91891892-.09533796.08189041c-.3633964.27465435-.86994721.2677153-1.22568389-.01679019l-.09305904-.08447119-.08189041-.09533796c-.27465435-.3633964-.2677153-.86994722.01679019-1.22568389l.0844712-.09305904 2.28335496-2.22227407-2.30247119-2.36338332-.08192523-.09530804c-.2997677-.39632298-.26447822-.96313393.10077973-1.31877983z" fill="#fff" fill-rule="evenodd"/></svg>

package/stat/assets/icons/close-circle-dark.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6 0c3.3137085 0 6 2.6862915 6 6s-2.6862915 6-6 6-6-2.6862915-6-6 2.6862915-6 6-6zm-2.3406945 2.96359116c-.19486814-.13499605-.46429254-.1157109-.63785889.05785545-.19526215.19526215-.19526215.51184463 0 .70710678l2.27155339 2.27144661-2.20567981 2.20557302-.05785545.06924789c-.13499605.19486814-.1157109.46429254.05785545.6378589.19526215.19526214.51184464.19526214.70710679 0l2.20557302-2.20567981 2.20557302 2.20567981.06924789.05785545c.19486814.13499605.46429254.1157109.6378589-.05785545.19526214-.19526215.19526214-.51184464 0-.70710679l-2.20567981-2.20557302 2.27155339-2.27144661.05785545-.06924789c.13499605-.19486814.1157109-.46429254-.05785545-.63785889-.19526215-.19526215-.51184463-.19526215-.70710678 0l-2.27144661 2.27155339-2.27144661-2.27155339z" fill="#222" fill-rule="evenodd"/></svg>

package/stat/assets/icons/close-circle.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6 0c3.3137085 0 6 2.6862915 6 6s-2.6862915 6-6 6-6-2.6862915-6-6 2.6862915-6 6-6zm-2.3406945 2.96359116c-.19486814-.13499605-.46429254-.1157109-.63785889.05785545-.19526215.19526215-.19526215.51184463 0 .70710678l2.27155339 2.27144661-2.20567981 2.20557302-.05785545.06924789c-.13499605.19486814-.1157109.46429254.05785545.6378589.19526215.19526214.51184464.19526214.70710679 0l2.20557302-2.20567981 2.20557302 2.20567981.06924789.05785545c.19486814.13499605.46429254.1157109.6378589-.05785545.19526214-.19526215.19526214-.51184464 0-.70710679l-2.20567981-2.20557302 2.27155339-2.27144661.05785545-.06924789c.13499605-.19486814.1157109-.46429254-.05785545-.63785889-.19526215-.19526215-.51184463-.19526215-.70710678 0l-2.27144661 2.27155339-2.27144661-2.27155339z" fill="#fff" fill-rule="evenodd"/></svg>

package/stat/assets/icons/fullscreen.svg

@@ -0,0 +1,17 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="fullscreenTitleID fullscreenDescID"
+>
+  <title id="fullscreenTitleID">Fullscreen</title>
+  <desc id="fullscreenDescID">An illustration of a square</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" stroke-width="1.5">
+    <path d="m12 1h5v5" />
+    <path d="m12 12h5v5" transform="matrix(1 0 0 -1 0 29)" />
+    <path d="m1 1h5v5" transform="matrix(-1 0 0 1 7 0)" />
+    <path d="m1 12h5v5" transform="matrix(-1 0 0 -1 7 29)" />
+  </g>
+</svg>

package/stat/assets/icons/fullscreen_exit.svg

@@ -0,0 +1,17 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="fullscreen-exitTitleID fullscreen-exitDescID"
+>
+  <title id="fullscreen-exitTitleID">Exit fullscreen</title>
+  <desc id="fullscreen-exitDescID">An illustration of a crosshair</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-linejoin="round" stroke-width="1.5">
+    <path d="m12 1h5v5" transform="matrix(-1 0 0 -1 29 7)" />
+    <path d="m12 12h5v5" transform="matrix(-1 0 0 1 29 0)" />
+    <path d="m1 1h5v5" transform="matrix(1 0 0 -1 0 7)" />
+    <path d="m1 12h5v5" />
+  </g>
+</svg>

package/stat/assets/icons/hamburger.svg

@@ -0,0 +1,15 @@
+<svg
+  width="30px"
+  height="24px"
+  viewBox="0 0 30 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="hamburgerTitle hamburgerDescription">
+  <title id="hamburgerTitle">Menu icon</title>
+  <desc id="hamburgerDescription">Three parallel horizontal lines in a vertical column</desc>
+  <g stroke="none" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round">
+    <path d="M2,2 L28,2" stroke="#fff"></path>
+    <path d="M2,12 L28,12" stroke="#fff"></path>
+    <path d="M2,22 L28,22" stroke="#fff"></path>
+  </g>
+</svg>

package/stat/assets/icons/left-arrow.svg

@@ -0,0 +1,12 @@
+<svg
+  width="12"
+  height="14"
+  viewBox="0 0 12 14"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="leftArrowTitleID leftArrowDescID"
+>
+  <title id="leftArrowTitleID">Left arrow</title>
+  <desc id="leftArrowDescID">An arrow pointing left</desc>
+  <polygon transform="translate(6.000000, 7.500000) scale(-1, 1) rotate(90.000000) translate(-6.000000, -7.500000) " points="6 2 13 13 -1 13" stroke="none" stroke-width="1" fill-rule="evenodd" fill="#fff"></polygon>
+</svg>

package/stat/assets/icons/magnify-minus.svg

@@ -0,0 +1,16 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="magnify-minusTitleID magnify-minusDescID"
+>
+  <title id="magnify-minusTitleID">Zoom out</title>
+  <desc id="magnify-minusDescID">An icon of a minus symbol</desc>
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
+    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
+    <path d="m10 7.75v-1.5h-6v1.5z" fill="#fff" fill-rule="nonzero" />
+  </g>
+</svg>

package/stat/assets/icons/magnify-plus.svg

@@ -0,0 +1,17 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="magnify-plusTitleID magnify-plusDescID"
+>
+  <title id="magnify-plusTitleID">Zoom in</title>
+  <desc id="magnify-plusDescID">An icon of a plus symbol</desc>
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
+    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
+    <path d="m7.75 4v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z" fill="#fff" fill-rule="nonzero" />
+  </g>
+
+</svg>

package/stat/assets/icons/magnify.svg

@@ -0,0 +1,15 @@
+<svg
+  width="17"
+  height="17"
+  viewBox="0 0 17 17"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="magnifyTitleID magnifyDescID"
+>
+  <title>Magnifying glass</title>
+  <desc>An icon of a magnifying glass</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <circle stroke="#fff" stroke-width="2" cx="6.12427268" cy="7.12454189" r="5"></circle>
+    <line x1="10.9914602" y1="11.5959661" x2="15.3266728" y2="15.9311788" stroke="#fff" stroke-width="2" stroke-linecap="square"></line>
+  </g>
+</svg>

package/stat/assets/icons/pause.svg

@@ -0,0 +1,23 @@
+<svg
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="pauseTitleID pauseDescID"
+>
+  <title id="pauseTitleID">Pause button</title>
+  <desc id="pauseDescID">A circle with two rectangles in its center</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-141.000000, -5.000000)">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(84.000000, 0.000000)">
+          <circle fill="#fff" cx="20" cy="20" r="20"></circle>
+          <g transform="translate(14.666667, 12.000000)" fill="#333">
+            <path d="M10.6666667,0 L10.6666667,16.6666667 L6.66666667,16.6666667 L6.66666667,0 L10.6666667,0 Z M4,0 L4,16.6666667 L0,16.6666667 L0,0 L4,0 Z"></path>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/play.svg

@@ -0,0 +1,22 @@
+<svg
+  width="40"
+  height="40"
+  viewBox="0 0 40 40"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="playTitleID playDescID"
+>
+  <title id="playTitleID">Play button</title>
+  <desc id="playDescID">A circle with a triangle in its center</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-141.000000, -5.000000)">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(84.000000, 0.000000)">
+          <circle fill="#fff" cx="20" cy="20" r="20"></circle>
+          <g transform="translate(14.666667, 12.000000)"></g>
+          <polygon fill="#333" transform="translate(23.000000, 20.333333) rotate(90.000000) translate(-23.000000, -20.333333) " points="23 12 31.3333333 28.6666667 14.6666667 28.6666667"></polygon>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/playback-speed.svg

@@ -0,0 +1,34 @@
+<svg
+  width="24"
+  height="32"
+  viewBox="0 0 24 32"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="playbackSpeedTitleID playbackSpeedDescID"
+>
+  <title>Playback speed</title>
+  <desc>An illustration of a speedometer</desc>
+  <g stroke="#fff" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-56.000000, -14.000000)">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(0.000000, 4.000000)">
+          <g transform="translate(0.000000, 5.000000)">
+            <g transform="translate(1.000000, 1.000000)">
+              <g transform="translate(2.000000, 2.521739)" stroke-linecap="round">
+                  <line x1="8.5" y1="9.97826087" x2="15.5" y2="2.97826087" transform="translate(12.000000, 6.478261) rotate(180.000000) translate(-12.000000, -6.478261) "></line>
+                  <line x1="15.5" y1="11.2695652" x2="15.5" y2="8.26956522" transform="translate(15.500000, 9.769565) rotate(90.000000) translate(-15.500000, -9.769565) "></line>
+                  <line x1="16.1555266" y1="5.77496471" x2="16.1480288" y2="4.77499282" transform="translate(16.151778, 5.274979) rotate(240.000000) translate(-16.151778, -5.274979) "></line>
+                  <line x1="12.9236091" y1="2.48093451" x2="12.9161756" y2="1.48096213" transform="translate(12.919892, 1.980948) rotate(210.000000) translate(-12.919892, -1.980948) "></line>
+                  <line x1="8.5" y1="3.47826087" x2="8.5" y2="0.47826087" transform="translate(8.500000, 1.978261) rotate(180.000000) translate(-8.500000, -1.978261) "></line>
+                  <line x1="4.07639089" y1="2.48093451" x2="4.08382438" y2="1.48096213" transform="translate(4.080108, 1.980948) rotate(150.000000) translate(-4.080108, -1.980948) "></line>
+                  <line x1="0.844473378" y1="5.77496471" x2="0.851971223" y2="4.77499282" transform="translate(0.848222, 5.274979) rotate(120.000000) translate(-0.848222, -5.274979) "></line>
+                  <line x1="1.5" y1="11.2695652" x2="1.5" y2="8.26956522" transform="translate(1.500000, 9.769565) rotate(90.000000) translate(-1.500000, -9.769565) "></line>
+              </g>
+              <path d="M10.5,14.9867607 C22.0227273,14.9867607 20.9752066,15.5091468 20.9752066,9.99117383 C20.9752066,4.47320089 16.2852969,0 10.5,0 C4.71470314,0 0.0247933884,4.47320089 0.0247933884,9.99117383 C0.0247933884,15.5091468 -1.02272727,14.9867607 10.5,14.9867607 Z" stroke-width="2"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/read-aloud.svg

@@ -0,0 +1,22 @@
+<svg
+  width="20"
+  height="16"
+  viewBox="0 0 20 16"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="readAloudTitleID readAloudDescriptionID"
+>
+  <title id="readAloudTitleID">Read aloud</title>
+  <desc id="readAloudDescriptionID">An illustration of headphones</desc>
+  <g transform="translate(-212.000000, -9.000000)" fill="#fff" stroke="none" stroke-width="1" fill-rule="evenodd">
+    <g transform="translate(146.000000, 0.000000)">
+      <g transform="translate(66.000000, 8.000000)">
+        <g transform="translate(10.000000, 8.200000) scale(-1, 1) rotate(-180.000000) translate(-10.000000, -8.200000) translate(0.000000, 0.200000)">
+          <polygon points="16.2 0 14.4 0 14.4 7 16.2 7"></polygon>
+          <path d="M9.98959325,15.0773216 C5.35414621,15.0773216 1.60303519,11.0610721 1.37018967,6.70460125 C0.697018953,6.32363105 0.0526829255,5.65267504 0.069376692,3.64950913 C0.10428184,-0.512919136 3.2882384,0.0489418427 3.2882384,0.0489418427 L3.2882384,6.93853032 C3.2882384,6.93853032 3.23533867,6.95081968 3.14428176,6.96138422 C3.40964761,10.550309 6.71913262,13.0575543 9.98959325,13.1368961 C13.1681298,13.2140819 16.6020592,10.5522494 16.8691595,6.96504947 C16.7575064,6.95383812 16.6909481,6.93853032 16.6909481,6.93853032 L16.6909481,0.0489418427 C16.6909481,0.0489418427 19.8749047,-0.512919136 19.909593,3.64950913 C19.92607,5.61688497 19.304715,6.29150623 18.644986,6.68368778 C18.4227638,11.0500763 14.6766392,15.0773216 9.98959325,15.0773216 Z"></path>
+          <polygon points="3.8 0 5.6 0 5.6 7 3.8 7"></polygon>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/review.svg

@@ -0,0 +1,22 @@
+<svg
+  width="21"
+  height="19"
+  viewBox="0 0 21 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="reviewTitleID reviewDescID"
+>
+  <title id="reviewTitleID">Review</title>
+  <desc id="reviewDescID">An arrow pointing in a backward direction</desc>
+  <g transform="translate(-100.000000, -15.000000)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(56.922243, 5.000000)">
+      <g transform="translate(43.000000, 10.000000)">
+        <polyline stroke="#fff" stroke-width="2" stroke-linejoin="round" points="14.4444444 16.6666667 20 16.6666667 20 3.33333333 5.55555556 3.33333333"></polyline>
+        <polygon fill="#fff" points="5.55555556 0 5.55555556 6.66666667 1.11111111 3.33333333"></polygon>
+        <text font-family="HelveticaNeue, Helvetica Neue, sans-serif" font-size="10" font-weight="normal" fill="#fff">
+          <tspan x="0" y="17.3333333">10</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>

package/stat/assets/icons/thumbnails.svg

@@ -0,0 +1,17 @@
+<svg
+  width="17"
+  height="19"
+  viewBox="0 0 17 19"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="thumbnailTitleID thumbnailDescID"
+>
+  <title id="thumbnailTitleID">Thumbnails</title>
+  <desc id="thumbnailDescID">An illustration of a grid of two squares per row and two squares per column</desc>
+  <g fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="1.5">
+    <rect height="7.25" rx="1" width="6" x="1.25" y=".75" />
+    <rect height="7.25" rx="1" width="6" x="1.25" y="10.75" />
+    <rect height="7.25" rx="1" width="6" x="10" y=".75" />
+    <rect height="7.25" rx="1" width="6" x="10" y="10.75" />
+  </g>
+</svg>

package/stat/assets/icons/voice.svg

@@ -0,0 +1 @@
+<svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="nonzero"><path d="m38.1709541 1.16927276c-19.3063792 2.35749181-30.77194642 17.49896974-28.52613175 35.69759164l.13778264.9919913c1.32289251 8.56612 5.97731071 16.3013047 12.66398421 21.5397034l.4377858.3337777-.8258922.2818912c-14.58776328 5.1516606-22.0584828 17.3847028-22.0584828 36.1118649 0 1.7258899 1.39911016 3.125 3.125 3.125h75c1.7258898 0 3.125-1.3991101 3.125-3.125l-.0091512-1.1274701c-.2805982-17.166151-7.012296-28.729242-19.9504605-34.1742942l-.7528883-.3076168.3448755-.2543479c4.6971412-3.6170055 8.2730972-8.807671 10.7017508-15.494037l.1033476-.3442854c.358088-1.4990563-.4382762-3.0639387-1.9085796-3.6353549l-12.6163943-2.9594748 15.5382502-5.2151308c1.4455508-.7155993 2.1089731-2.4138059 1.5313094-3.9197953l-.4286041-1.1171368c-7.4117992-18.89492742-19.4315183-27.95356137-35.6325014-26.40787614zm29.1727959 27.11931404-14.3051523 7.0850707-.3458164.1975825c-2.0674045 1.3537943-1.8055096 4.5808459.6002149 5.5158026l11.2601288 4.3765442-.0446544.1053935c-2.9998765 6.5205267-7.382434 10.7639749-13.2036694 12.8974938-2.9669838 1.087418-2.6299355 5.3880614.4702287 5.9999873l.9102021.1897523c14.1147108 3.1023497 21.4110943 12.2993394 22.233518 28.3448731h-68.59375l.06180046-.9883469c1.14099717-16.5385163 9.43185134-25.5919672 25.33818054-27.9334892 3.1343099-.4613921 3.6716909-4.7565726.7476649-5.9759387-8.9190789-3.7193999-15.42583-12.285691-16.6248777-22.0019293-1.8277808-14.8111472 7.2466638-26.79489813 22.9989376-28.71929813 12.5036466-1.191884 21.828781 5.37445053 28.2768952 20.37896473z"/><path d="m76.5037126 22.4247766c.9396111-1.4476971 2.8749067-1.8595821 4.3226037-.9199711 6.1870578 4.0156385 9.4236837 9.4774446 9.4236837 16.1212874s-3.2366259 12.105649-9.4236837 16.1212875c-1.447697.939611-3.3829926.527726-4.3226037-.9199711s-.527726-3.3829927.9199711-4.3226038c4.4796088-2.9074384 6.5763163-6.4456323 6.5763163-10.8787126 0-4.4330802-2.0967075-7.9712741-6.5763163-10.8787125-1.4476971-.9396111-1.8595822-2.8749067-.9199711-4.3226038z"/><path d="m86.6767674 19.1839853c1.0725964-1.3521215 3.0382187-1.5787214 4.3903402-.506125 6.0793735 4.82258 9.1828924 11.2235876 9.1828924 18.9482326 0 7.7246451-3.1035189 14.1256527-9.1828924 18.9482327-1.3521215 1.0725964-3.3177438.8459965-4.3903402-.506125-1.0725964-1.3521216-.8459966-3.3177439.506125-4.3903403 4.5872931-3.6389585 6.8171076-8.2379508 6.8171076-14.0517674 0-5.8138165-2.2298145-10.4128088-6.8171076-14.0517673-1.3521216-1.0725964-1.5787214-3.0382187-.506125-4.3903403z"/></g></svg>

package/stat/assets/icons/volume-full.svg

@@ -0,0 +1,22 @@
+<svg
+  width="23"
+  height="22"
+  viewBox="0 0 23 22"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="volume-fullTitleID volume-fullDescID"
+>
+  <title>button/volume - full</title>
+  <desc>Created with Sketch.</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-241.000000, -14.000000)" stroke="#fff" stroke-width="2">
+      <g transform="translate(56.922243, 5.000000)">
+        <g transform="translate(185.000000, 9.000000)">
+          <path d="M14,3 C16,5.05128205 17,7.71794872 17,11 C17,14.2820513 16,16.9487179 14,19" stroke-linecap="round"></path>
+          <path d="M18,1 C20,3.56410256 21,6.8974359 21,11 C21,15.1025641 20,18.4358974 18,21" stroke-linecap="round"></path>
+          <polygon fill="#fff" fill-rule="evenodd" stroke-linejoin="round" points="10 3.5 6 7.30952381 1 7.30952381 1 15.6904762 6 15.6904762 10 19.5"></polygon>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>