shaka-player 4.7.7 → 4.7.9

package/lib/dash/dash_parser.js

@@ -1685,7 +1685,7 @@ shaka.dash.DashParser = class {
     // An attribute which is present and set to 0 should still result in
     // periodic updates.  For more, see:
     // https://github.com/Dash-Industry-Forum/Guidelines-TimingModel/issues/48
-    if (this.updatePeriod_ <= 0) {
+    if (this.updatePeriod_ < 0) {
       return;
     }
 

package/lib/hls/hls_parser.js

@@ -447,8 +447,9 @@ shaka.hls.HlsParser = class {
     const {segments, bandwidth} = this.createSegments_(
         playlist, stream, mediaSequenceToStartTime, mediaVariables,
         streamInfo.getUris);
-
-    stream.bandwidth = bandwidth;
+    if (bandwidth) {
+      stream.bandwidth = bandwidth;
+    }
 
     stream.segmentIndex.mergeAndEvict(
         segments, this.presentationTimeline_.getSegmentAvailabilityStart());
@@ -1383,7 +1384,7 @@ shaka.hls.HlsParser = class {
       videoLayout = videoLayout || 'CH-MONO';
 
       const streamInfos = this.createStreamInfosForVariantTags_(tags,
-          mediaTags, resolution, frameRate);
+          mediaTags, resolution, frameRate, bandwidth);
 
       goog.asserts.assert(streamInfos.audio.length ||
           streamInfos.video.length, 'We should have created a stream!');
@@ -1411,10 +1412,12 @@ shaka.hls.HlsParser = class {
    * @param {!Array.<!shaka.hls.Tag>} mediaTags
    * @param {?string} resolution
    * @param {?string} frameRate
+   * @param {number} bandwidth
    * @return {!shaka.hls.HlsParser.StreamInfos}
    * @private
    */
-  createStreamInfosForVariantTags_(tags, mediaTags, resolution, frameRate) {
+  createStreamInfosForVariantTags_(
+      tags, mediaTags, resolution, frameRate, bandwidth) {
     const ContentType = shaka.util.ManifestParserUtils.ContentType;
 
     /** @type {shaka.hls.HlsParser.StreamInfos} */
@@ -1549,6 +1552,9 @@ shaka.hls.HlsParser = class {
       if (globalGroupId) {
         streamInfo.stream.groupId = globalGroupId;
       }
+      if (!streamInfos.length) {
+        streamInfo.stream.bandwidth = bandwidth;
+      }
       res[streamInfo.stream.type] = [streamInfo];
     }
     return res;
@@ -2252,7 +2258,7 @@ shaka.hls.HlsParser = class {
       stream.drmInfos = realStream.drmInfos;
       stream.keyIds = realStream.keyIds;
       stream.mimeType = realStream.mimeType;
-      stream.bandwidth = realStream.bandwidth;
+      stream.bandwidth = stream.bandwidth || realStream.bandwidth;
       stream.codecs = stream.codecs || realStream.codecs;
 
       // Since we lazy-loaded this content, the player may need to create new
@@ -2531,7 +2537,9 @@ shaka.hls.HlsParser = class {
 
     const {segments, bandwidth} = this.createSegments_(
         playlist, stream, mediaSequenceToStartTime, mediaVariables, getUris);
-    stream.bandwidth = bandwidth;
+    if (bandwidth) {
+      stream.bandwidth = bandwidth;
+    }
 
     // This new calculation is necessary for Low Latency streams.
     if (this.isLive_()) {

package/lib/media/content_workarounds.js

@@ -69,6 +69,30 @@ shaka.media.ContentWorkarounds = class {
         })
         .fullBox('encv', onEncryptionMetadataBox)
         .fullBox('enca', onEncryptionMetadataBox)
+        .fullBox('dvav', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
+        .fullBox('dva1', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
+        .fullBox('dvh1', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
+        .fullBox('dvhe', (box) => {
+          boxesToModify.push({
+            box,
+            newType: ContentWorkarounds.BOX_TYPE_ENCV_,
+          });
+        })
         .fullBox('hev1', (box) => {
           boxesToModify.push({
             box,

package/lib/mss/mss_parser.js

@@ -661,6 +661,8 @@ shaka.mss.MssParser = class {
           videoNalus: videoNalus,
           audioConfig: new Uint8Array([]),
           videoConfig: new Uint8Array([]),
+          hSpacing: 0,
+          vSpacing: 0,
           data: null, // Data is not necessary for init segement.
           stream: stream,
         };

package/lib/player.js

@@ -723,6 +723,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
     if (shaka.Player.adManagerFactory_) {
       this.adManager_ = shaka.Player.adManagerFactory_();
+      this.adManager_.configure(this.config_.ads);
     }
 
     // If the browser comes back online after being offline, then try to play
@@ -1794,8 +1795,17 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
     this.drmEngine_.configure(this.config_.drm);
 
+    const tracksChanged = shaka.util.StreamUtils.applyRestrictions(
+        this.manifest_.variants, this.config_.restrictions, this.maxHwRes_);
+    if (tracksChanged && this.streamingEngine_) {
+      this.onTracksChanged_();
+    }
+
+    const playableVariants = shaka.util.StreamUtils.getPlayableVariants(
+        this.manifest_.variants);
+
     await this.drmEngine_.initForPlayback(
-        this.manifest_.variants,
+        playableVariants,
         this.manifest_.offlineSessionIds);
 
     await this.drmEngine_.attach(this.video_);
@@ -6924,7 +6934,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @export
  */
 // eslint-disable-next-line no-useless-concat
-shaka.Player.version = 'v4.7.7' + '-uncompiled';  // x-release-please-version
+shaka.Player.version = 'v4.7.9' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -191,10 +191,23 @@ shaka.polyfill.MediaCapabilities = class {
       const videoCapabilities = [];
 
       if (mediaCapkeySystemConfig.audio) {
-        const capability = {
+        let capability = {
           robustness: mediaCapkeySystemConfig.audio.robustness || '',
           contentType: mediaDecodingConfig.audio.contentType,
         };
+
+        // Some Tizen devices seem to misreport AC-3 support, but correctly
+        // report EC-3 support. So query EC-3 as a fallback for AC-3.
+        // See https://github.com/shaka-project/shaka-player/issues/2989 for
+        // details.
+        if (shaka.util.Platform.isTizen() &&
+          mediaDecodingConfig.audio.contentType.includes('codecs="ac-3"')) {
+          capability = {
+            robustness: capability.robustness,
+            contentType: 'audio/mp4; codecs="ec-3"',
+          };
+        }
+
         audioCapabilities.push(capability);
       }
 

package/lib/transmuxer/aac_transmuxer.js

@@ -195,6 +195,8 @@ shaka.transmuxer.AacTransmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,

package/lib/transmuxer/ac3_transmuxer.js

@@ -184,6 +184,8 @@ shaka.transmuxer.Ac3Transmuxer = class {
       videoNalus: [],
       audioConfig: audioConfig,
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,

package/lib/transmuxer/ec3_transmuxer.js

@@ -184,6 +184,8 @@ shaka.transmuxer.Ec3Transmuxer = class {
       videoNalus: [],
       audioConfig: audioConfig,
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,

package/lib/transmuxer/h264.js

@@ -20,7 +20,8 @@ shaka.transmuxer.H264 = class {
    * describes the properties of upcoming video frames.
    *
    * @param {!Array.<shaka.extern.VideoNalu>} nalus
-   * @return {?{height: number, width: number, videoConfig: !Uint8Array}}
+   * @return {?{height: number, width: number, videoConfig: !Uint8Array,
+   *            hSpacing: number, vSpacing: number}}
    */
   static parseInfo(nalus) {
     const H264 = shaka.transmuxer.H264;
@@ -129,6 +130,30 @@ shaka.transmuxer.H264 = class {
       frameCropBottomOffset = expGolombDecoder.readUnsignedExpGolomb();
     }
 
+    let hSpacing = 1;
+    let vSpacing = 1;
+
+    // vui_parameters_present_flag
+    if (expGolombDecoder.readBoolean()) {
+      // aspect_ratio_info_present_flag
+      if (expGolombDecoder.readBoolean()) {
+        const aspectRatioIdc = expGolombDecoder.readUnsignedByte();
+        const hSpacingTable = [
+          1, 12, 10, 16, 40, 24, 20, 32, 80, 18, 15, 64, 160, 4, 3, 2,
+        ];
+        const vSpacingTable = [
+          1, 11, 11, 11, 33, 11, 11, 11, 33, 11, 11, 33, 99, 3, 2, 1,
+        ];
+        if (aspectRatioIdc > 0 && aspectRatioIdc < 16) {
+          hSpacing = hSpacingTable[aspectRatioIdc - 1];
+          vSpacing = vSpacingTable[aspectRatioIdc - 1];
+        } else if (aspectRatioIdc === 255) {
+          hSpacing = expGolombDecoder.readBits(16);
+          vSpacing = expGolombDecoder.readBits(16);
+        }
+      }
+    }
+
     const height = ((2 - frameMbsOnlyFlag) *
         (picHeightInMapUnitsMinus1 + 1) * 16) - (frameCropTopOffset * 2) -
         (frameCropBottomOffset * 2);
@@ -165,6 +190,8 @@ shaka.transmuxer.H264 = class {
       height,
       width,
       videoConfig,
+      hSpacing,
+      vSpacing,
     };
   }
 

package/lib/transmuxer/h265.js

@@ -20,7 +20,8 @@ shaka.transmuxer.H265 = class {
    * describes the properties of upcoming video frames.
    *
    * @param {!Array.<shaka.extern.VideoNalu>} nalus
-   * @return {?{height: number, width: number, videoConfig: !Uint8Array}}
+   * @return {?{height: number, width: number, videoConfig: !Uint8Array,
+   *            hSpacing: number, vSpacing: number}}
    */
   static parseInfo(nalus) {
     const H265 = shaka.transmuxer.H265;
@@ -87,6 +88,8 @@ shaka.transmuxer.H265 = class {
       height: spsConfiguration.height,
       width: spsConfiguration.width,
       videoConfig,
+      hSpacing: spsConfiguration.sarWidth,
+      vSpacing: spsConfiguration.sarHeight,
     };
   }
 
@@ -298,6 +301,8 @@ shaka.transmuxer.H265 = class {
       }
     }
     let defaultDisplayWindowFlag = false; // for calc offset
+    let sarWidth = 1;
+    let sarHeight = 1;
     let minSpatialSegmentationIdc = 0; // for hvcC
     gb.readBoolean(); // sps_temporal_mvp_enabled_flag
     gb.readBoolean(); // strong_intra_smoothing_enabled_flag
@@ -306,9 +311,18 @@ shaka.transmuxer.H265 = class {
       const aspectRatioInfoPresentFlag = gb.readBoolean();
       if (aspectRatioInfoPresentFlag) {
         const aspectRatioIdc = gb.readUnsignedByte();
-        if (aspectRatioIdc === 255) {
-          gb.readBits(16); // sar_width
-          gb.readBits(16); // sar_height
+        const sarWidthTable = [
+          1, 12, 10, 16, 40, 24, 20, 32, 80, 18, 15, 64, 160, 4, 3, 2,
+        ];
+        const sarHeightTable = [
+          1, 11, 11, 11, 33, 11, 11, 11, 33, 11, 11, 33, 99, 3, 2, 1,
+        ];
+        if (aspectRatioIdc > 0 && aspectRatioIdc < 16) {
+          sarWidth = sarWidthTable[aspectRatioIdc - 1];
+          sarHeight = sarHeightTable[aspectRatioIdc - 1];
+        } else if (aspectRatioIdc === 255) {
+          sarWidth = gb.readBits(16);
+          sarHeight = gb.readBits(16);
         }
       }
       const overscanInfoPresentFlag = gb.readBoolean();
@@ -459,6 +473,8 @@ shaka.transmuxer.H265 = class {
       bitDepthChromaMinus8,
       width: codecWidth,
       height: codecHeight,
+      sarWidth: sarWidth,
+      sarHeight: sarHeight,
     };
   }
 
@@ -773,7 +789,9 @@ shaka.transmuxer.H265.VPSConfiguration;
  *  bitDepthLumaMinus8: number,
  *  bitDepthChromaMinus8: number,
  *  width: number,
- *  height: number
+ *  height: number,
+ *  sarWidth: number,
+ *  sarHeight: number
  * }}
  *
  * @property {number} generalProfileSpace
@@ -797,6 +815,8 @@ shaka.transmuxer.H265.VPSConfiguration;
  * @property {number} bitDepthChromaMinus8
  * @property {number} width
  * @property {number} height
+ * @property {number} sarWidth
+ * @property {number} sarHeight
  */
 shaka.transmuxer.H265.SPSConfiguration;
 

package/lib/transmuxer/mp3_transmuxer.js

@@ -176,6 +176,8 @@ shaka.transmuxer.Mp3Transmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,

package/lib/transmuxer/ts_transmuxer.js

@@ -409,6 +409,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,
@@ -500,6 +502,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: audioConfig,
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,
@@ -591,6 +595,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: audioConfig,
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,
@@ -677,6 +683,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: new Uint8Array([]),
+      hSpacing: 0,
+      vSpacing: 0,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,
@@ -769,6 +777,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: info.videoConfig,
+      hSpacing: info.hSpacing,
+      vSpacing: info.vSpacing,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,
@@ -861,6 +871,8 @@ shaka.transmuxer.TsTransmuxer = class {
       videoNalus: [],
       audioConfig: new Uint8Array([]),
       videoConfig: info.videoConfig,
+      hSpacing: info.hSpacing,
+      vSpacing: info.vSpacing,
       data: {
         sequenceNumber: this.frameIndex_,
         baseMediaDecodeTime: baseMediaDecodeTime,

package/lib/util/cmcd_manager.js

@@ -27,13 +27,6 @@ shaka.util.CmcdManager = class {
     /** @private {?shaka.extern.CmcdConfiguration} */
     this.config_ = config;
 
-    /**
-     * Session ID
-     *
-     * @private {string}
-     */
-    this.sid_ = '';
-
     /**
      * Streaming format
      *
@@ -292,13 +285,13 @@ shaka.util.CmcdManager = class {
    * @private
    */
   createData_() {
-    if (!this.sid_) {
-      this.sid_ = this.config_.sessionId || window.crypto.randomUUID();
+    if (!this.config_.sessionId) {
+      this.config_.sessionId = window.crypto.randomUUID();
     }
     return {
       v: shaka.util.CmcdManager.Version,
       sf: this.sf_,
-      sid: this.sid_,
+      sid: this.config_.sessionId,
       cid: this.config_.contentId,
       mtp: this.playerInterface_.getBandwidthEstimate() / 1000,
     };
@@ -407,6 +400,15 @@ shaka.util.CmcdManager = class {
    */
   getObjectTypeFromMimeType_(mimeType) {
     switch (mimeType.toLowerCase()) {
+      case 'audio/mp4':
+      case 'audio/webm':
+      case 'audio/ogg':
+      case 'audio/mpeg':
+      case 'audio/aac':
+      case 'audio/flac':
+      case 'audio/wav':
+        return shaka.util.CmcdManager.ObjectType.AUDIO;
+
       case 'video/webm':
       case 'video/mp4':
       case 'video/mpeg':
@@ -417,6 +419,7 @@ shaka.util.CmcdManager = class {
       case 'application/vnd.apple.mpegurl':
       case 'application/dash+xml':
       case 'video/vnd.mpeg.dash.mpd':
+      case 'application/vnd.ms-sstr+xml':
         return shaka.util.CmcdManager.ObjectType.MANIFEST;
 
       default:

package/lib/util/manifest_parser_utils.js

@@ -179,6 +179,8 @@ shaka.util.ManifestParserUtils.VIDEO_CODEC_REGEXPS_ = [
   /^avc/,
   /^hev/,
   /^hvc/,
+  /^vvc/,
+  /^vvi/,
   /^vp0?[89]/,
   /^av01/,
   /^dvh/,

package/lib/util/mp4_generator.js

@@ -371,12 +371,13 @@ shaka.util.Mp4Generator = class {
     ]);
 
     let boxName = 'avc1';
+    const paspBox = this.pasp_(streamInfo);
     let sinfBox = new Uint8Array([]);
     if (streamInfo.encrypted) {
       sinfBox = this.sinf_(streamInfo);
       boxName = 'encv';
     }
-    return Mp4Generator.box(boxName, avc1Bytes, avcCBox, sinfBox);
+    return Mp4Generator.box(boxName, avc1Bytes, avcCBox, paspBox, sinfBox);
   }
 
   /**
@@ -500,12 +501,34 @@ shaka.util.Mp4Generator = class {
     ]);
 
     let boxName = 'hvc1';
+    const paspBox = this.pasp_(streamInfo);
     let sinfBox = new Uint8Array([]);
     if (streamInfo.encrypted) {
       sinfBox = this.sinf_(streamInfo);
       boxName = 'encv';
     }
-    return Mp4Generator.box(boxName, hvc1Bytes, hvcCBox, sinfBox);
+    return Mp4Generator.box(boxName, hvc1Bytes, hvcCBox, paspBox, sinfBox);
+  }
+
+  /**
+   * Generate a PASP box
+   *
+   * @param {shaka.util.Mp4Generator.StreamInfo} streamInfo
+   * @return {!Uint8Array}
+   * @private
+   */
+  pasp_(streamInfo) {
+    if (!streamInfo.hSpacing && !streamInfo.vSpacing) {
+      return new Uint8Array([]);
+    }
+    const Mp4Generator = shaka.util.Mp4Generator;
+    const hSpacing = streamInfo.hSpacing;
+    const vSpacing = streamInfo.vSpacing;
+    const bytes = new Uint8Array([
+      ...this.breakNumberIntoBytes_(hSpacing, 4), // hSpacing
+      ...this.breakNumberIntoBytes_(vSpacing, 4), // vSpacing
+    ]);
+    return Mp4Generator.box('pasp', bytes);
   }
 
   /**
@@ -1301,6 +1324,8 @@ shaka.util.Mp4Generator.DINF_ = new Uint8Array([]);
  *    videoNalus: !Array.<string>,
  *    audioConfig: !Uint8Array,
  *    videoConfig: !Uint8Array,
+ *    hSpacing: number,
+ *    vSpacing: number,
  *    data: ?shaka.util.Mp4Generator.Data,
  *    stream: !shaka.extern.Stream
  * }}
@@ -1325,6 +1350,10 @@ shaka.util.Mp4Generator.DINF_ = new Uint8Array([]);
  *   The stream's audio config.
  * @property {!Uint8Array} videoConfig
  *   The stream's video config.
+ * @property {number} hSpacing
+ *   The stream's video horizontal spacing of pixels.
+ * @property {number} vSpacing
+ *   The stream's video vertial spacing of pixels.
  * @property {?shaka.util.Mp4Generator.Data} data
  *   The stream's data.
  * @property {!shaka.extern.Stream} stream

package/lib/util/stream_utils.js

@@ -162,7 +162,7 @@ shaka.util.StreamUtils = class {
           const currentCodec =
             MimeUtils.getNormalizedCodec(stream.codecs);
           if (previousCodec == currentCodec) {
-            if (stream.bandwidth < previousStream.bandwidth) {
+            if (stream.bandwidth > previousStream.bandwidth) {
               validVideoStreams.push(stream);
               validVideoIds.push(stream.id);
             }
@@ -917,15 +917,7 @@ shaka.util.StreamUtils = class {
       return 'opus';
     }
 
-    // Some Tizen devices seem to misreport AC-3 support, but correctly
-    // report EC-3 support.  So query EC-3 as a fallback for AC-3.
-    // See https://github.com/shaka-project/shaka-player/issues/2989 for
-    // details.
-    if (shaka.util.Platform.isTizen()) {
-      return codecs.toLowerCase() == 'ac-3' ? 'ec-3' : codecs;
-    } else {
-      return codecs;
-    }
+    return codecs;
   }
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "4.7.7",
+  "version": "4.7.9",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [

package/ui/externs/ui.js

@@ -21,9 +21,7 @@ shaka.extern = {};
  *   base: string,
  *   buffered: string,
  *   played: string,
- *   adBreaks: string,
- *   chapterMarks: string,
- *   chapterLabels: string
+ *   adBreaks: string
  * }}
  *
  * @property {string} base
@@ -38,13 +36,6 @@ shaka.extern = {};
  * @property {string} adBreaks
  *   The CSS background color applied to the portion of the seek bar showing
  *   when the ad breaks are scheduled to occur on the timeline.
- * @property {string} chapterMarks
- *   The CSS border color applied to sections of the seek bar showing
- *   when the chapters start and end on the timeline.
- *   Defaults to dark grey rgb(27, 27, 27).
- * @property {string} chapterLabels
- *   The CSS text color applied to the chapter labels that appear above the
- *   seek bar on hover. Defaults to white rgb(255, 255, 255).
  * @exportDoc
  */
 shaka.extern.UISeekBarColors;

package/ui/less/range_elements.less

@@ -154,36 +154,3 @@
 .shaka-ad-markers {
   .overlay-child();
 }
-
-#shaka-player-ui-chapters-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  z-index: 0;
-}
-
-.shaka-chapter {
-  height: 100%;
-  position: relative;
-}
-
-.shaka-chapter-label {
-  position: relative;
-  top: -2.5em;
-  width: 100%;
-  text-align: center;
-  text-shadow: 1px 1px gray;
-  line-height: normal;
-}
-
-.shaka-chapter > div:first-child {
-  width: 100%;
-  height: 100%;
-  border-right: 1px solid;
-  position: absolute;
-}
-
-.shaka-chapter:last-child > div:first-child {
-  border-right: none;
-}