Basic Mobile VR Station Link Generator

Use this to create basic links that will play in Mobile VR Station 2.0

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="box">

  <h2>
  Basic Link Generator
  </h2>

  <h3>
  2.0 Bug
  </h3>

  <p>
  Doesn't respect Playbacktype or Aspect Ratio, fixed in 2.1
  </p>

  <p>
    <label for="url">Media Url (UTF-8 Encoded, must contains ://):</label>
    <br/>
    <input type="input" name="url" id="url" value="http://urltomedia"/>
  </p>

  <p>
    <label for="type">Playback Type:</label>
    <br/>
    <select id="type">
      <option value="">Default (2d)</option>
      <optgroup label="2D">
      <option value="2d">2D</option>
      <option value="2d.180">2D 180 Dome</option>
      <option value="2d.360">2D 360</option>
      <option value="2d.ffd">2D Front Full Dome</option>
      </optgroup>
      <optgroup label="3D Side By Side">
      <option value="sbs">3D Side by Side</option>
      <option value="sbs.180">3D 180 Dome Side by Side</option>
      <option value="sbs.360">3D 360 Side by Side</option>
      <option value="sbs.ffd">3D Front Full Dome Side by Side</option>
      </optgroup>
      <optgroup label="3D Over Under">
      <option value="sbs">3D Over Under</option>
      <option value="sbs.360">3D 360 Over Under</option>
      </optgroup>
    </select>
  </p>

  <p>
    <label for="aspect">Aspect Ratio:</label>
    <br/>
    <select id="aspect">
      <option value="">Default (Source Ratio)</option>
      <option value="a3_2">3:2</option>
      <option value="a4_3">4:3</option>
      <option value="a16_9">16:9</option>
      <option value="a16_10">16:10</option>
      <option value="a1.43_1">1.43:1</option>
      <option value="a1.85_1">1.85:1</option>
      <option value="a2.35_1">2.35:1</option>
      <option value="a2.39_1">2.39:1</option>
      <option value="a1_1">1:1</option>
    </select>
  </p>

  <button id="gen">Generate</button>

   <p>
    <label for="result">Result:</label>
    <br/>
    <input type="input" name="result" id="result" readonly>
  </p>

</div>

CSS

#box {
  background: white;
  margin: 1em;
  padding: 1em;
}

#url,
#type,
#aspect,
#result {
  width: 50%;
}

JavaScript

$(function() {
  $('#gen').click(function() {
		 $('#result').val('');
    var media = $('#url').val();
    if (!media) {
      alert('Please enter a Media Url');
      return;
    } else if (!window.btoa){
    	alert('You\'re browser is missing a required function, stopping operation!');
    } else if (media.indexOf('://') <= 1) {
    	alert('Media Url does not contain a ://');
      return;
    }
    
    var prot = media.substr(0, media.indexOf('://'));
		media = media.substr(media.indexOf('://') + 3);
    
    var path = encodeURIComponent(window.btoa(media)),
      type = $('#type').val() || '',
      aspect = $('#aspect').val() || '';

    var pieces = [];
    pieces.push('https://webvr.mobilevrstation.com/qp');
    if (type || aspect) {
    	var attrs = [];
    	if (type) {
        attrs.push(type);
      }
      if (aspect) {
        attrs.push(aspect);
      }
      pieces.push('$' + attrs.join('~') + '$')
    }
    pieces.push(prot);
    pieces.push(media);
    $('#result').val(pieces.join('/')).focus().select();
  });
  $("#result").focus(function() { $(this).select(); } );
});