Center overlays according to viewport/container width

app/assets/javascripts/player/abstract_player.js.coffee

@@ -14,6 +14,7 @@ class AsciiIo.AbstractPlayer
       hud: @options.hud
       rendererClass: @options.rendererClass
       snapshot: @options.snapshot
+      containerWidth: @options.containerWidth
 
   createVT: ->
     throw 'not implemented'

app/assets/javascripts/player/views/player_view.js.coffee

@@ -4,6 +4,7 @@ class AsciiIo.PlayerView extends Backbone.View
 
   initialize: (options) ->
     @createRendererView()
+    @setupClipping()
     @createHudView() if options.hud
     @showLoadingOverlay()
 
@@ -17,6 +18,14 @@ class AsciiIo.PlayerView extends Backbone.View
     @rendererView.afterInsertedToDom()
     @rendererView.renderSnapshot @options.snapshot
 
+  setupClipping: ->
+    if @options.containerWidth
+      rendererWidth = @rendererView.$el.outerWidth()
+      min = Math.min(@options.containerWidth, rendererWidth)
+      @rightClipWidth = rendererWidth - min
+    else
+      @rightClipWidth = 0
+
   createHudView: ->
     @hudView = new AsciiIo.HudView(cols: @options.cols)
 
@@ -39,14 +48,19 @@ class AsciiIo.PlayerView extends Backbone.View
   onSeekClicked: (percent) ->
     @trigger 'seek-clicked', percent
 
+  showOverlay: (html) ->
+    element = $(html)
+    element.css('margin-right': "#{@rightClipWidth}px") if @rightClipWidth
+    @$el.append(element)
+
   showLoadingOverlay: ->
-    @$el.append('<div class="loading">')
+    @showOverlay('<div class="loading">')
 
   hideLoadingOverlay: ->
     @$('.loading').remove()
 
   showPlayOverlay: ->
-    @$el.append('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
+    @showOverlay('<div class="start-prompt"><div class="play-button"><div class="arrow">►</div></div></div>')
 
   hidePlayOverlay: ->
     @$('.start-prompt').remove()

app/helpers/asciicasts_helper.rb

@@ -20,6 +20,7 @@ module AsciicastsHelper
       speed: (options[:speed] || params[:speed] || 1).to_f,
       benchmark: !!params[:bm],
       asciicast_id: asciicast.id,
+      container_width: params[:container_width],
       renderer_class: renderer_class,
       auto_play: options.key?(:auto_play) ? !!options[:auto_play] : false,
       hud: options.key?(:hud) ? !!options[:hud] : true,

app/views/asciicasts/_player.html.erb

@@ -9,6 +9,7 @@
       speed: <%= speed %>,
       benchmark: <%= benchmark %>,
       model: new AsciiIo.Asciicast({ id: <%= asciicast_id %> }),
+      containerWidth: <%= container_width || 'null' %>,
       rendererClass: <%= renderer_class.html_safe %>,
       autoPlay: <%= auto_play %>,
       hud: <%= hud %>,

app/views/asciicasts/show.js.erb

@@ -19,16 +19,18 @@
     referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
   }
 
-  window.addEventListener("message", receiveSize, false);
-
   var scriptTag = document.getElementById("asciicast-<%= @asciicast.id %>");
+
   if (scriptTag) {
+    window.addEventListener("message", receiveSize, false);
     var container = document.createElement('div');
     container.className = 'asciicast';
     container.style.display = 'block';
     container.style.float = 'none';
     container.style.overflow = 'hidden';
-    container.innerHTML = '<iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw" name="asciicast-iframe-<%= @asciicast.id %>" id="asciicast-iframe-<%= @asciicast.id %>" width="600" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="display: block; float: none; visibility: hidden;" onload="this.style.visibility=\'visible\';"></iframe>';
+    container.style.padding = '0';
     insertAfter(scriptTag, container);
+    var containerWidth = container.offsetWidth;
+    container.innerHTML = '<iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw?container_width=' + containerWidth + '" name="asciicast-iframe-<%= @asciicast.id %>" id="asciicast-iframe-<%= @asciicast.id %>" width="600" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="display: block; float: none; visibility: hidden;" onload="this.style.visibility=\'visible\';"></iframe>';
   }
 })();