* VRFS-1081 - restyle share dialog

This commit is contained in:
Seth Call 2014-02-06 18:59:19 +00:00
parent 4c39e45708
commit caa565470d
11 changed files with 433 additions and 315 deletions

View File

@ -12,7 +12,7 @@
if(connected) {
// instantly return previous login info
//return loginStatusDeferred;
return loginStatusDeferred;
}
loginStatusDeferred = $.Deferred();
@ -26,6 +26,8 @@
function handle_fblogin_response(response) {
console.log("facebook login response: status=" + response.status)
if(response.status == "connected") {
connected = true;
}
@ -45,7 +47,7 @@
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow server to access the session?
xfbml : true, // parse XFBML tags on this page?
oauth : true, // enable OAuth 2.0
oauth : true // enable OAuth 2.0
});
// listen to see if the user is known/logged in

View File

@ -41,7 +41,8 @@
gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen)
gridPadding: 8, // Padding around grid cells. Added to outer margin.
animationDuration: 400,
allowBodyOverflow: false // Allow tests to disable the body-no-scroll policy
allowBodyOverflow: false, // Allow tests to disable the body-no-scroll policy
sizeOverlayToContent: false // if true, use the size of <body> tag to decide overlay size everytime overlay is shown. should be used in non-client settings
};
var width = $(context).width();
@ -522,6 +523,15 @@
function showDialog(dialog) {
if(!dialogEvent(dialog, 'beforeShow')) {return;}
var $overlay = $('.dialog-overlay')
if(opts.sizeOverlayToContent) {
var $body = $('body')
$('.dialog-overlay').css({
width: $body.width() + 'px',
height: $body.height() + 'px'
});
}
$overlay.show();
centerDialog(dialog);
var $dialog = $('[layout-id="' + dialog + '"]');
@ -532,6 +542,7 @@
function centerDialog(dialog) {
var $dialog = $('[layout-id="' + dialog + '"]');
console.log("$dialog.width, height", $dialog.width(), $dialog.height())
$dialog.css({
left: width/2 - ($dialog.width()/2) + "px",
top: height/2 - ($dialog.height()/2) + "px"

View File

@ -7,6 +7,7 @@
var rest = context.JK.Rest();
var facebookRest = context.JK.FacebookRest();
var facebookHelper = null;
var dialogId = '#share-dialog';
var textMap = {
LIVE_SESSION: "LIVE SESSION",
@ -16,15 +17,15 @@
};
function showSpinner() {
$('#share-dialog .dialog-inner').hide();
$(dialogId + ' .dialog-inner').hide();
var spinner = $('<div class="spinner spinner-large"></div>')
$('#share-dialog .content-head').after(spinner);
$(dialogId + ' .content-head').after(spinner);
}
function hideSpinner() {
$('#share-dialog .spinner').remove();
$('#share-dialog .dialog-inner').show();
$(dialogId + ' .spinner').remove();
$(dialogId + ' .dialog-inner').show();
}
@ -147,19 +148,24 @@
}
function socialShare() {
var shareWithFacebook = $('.share-with-facebook').is(':checked');
var shareWithGoogle = $('.share-with-google').is(':checked');
var shareWithTwitter = $('.share-with-twitter').is(':checked');
var facebookCheckbox = $(dialogId + ' .share-with-facebook input');
var shareWithFacebook = facebookCheckbox.is(':checked') && !facebookCheckbox.is(':disabled');
var googleCheckbox = $(dialogId + ' .share-with-google input');
var shareWithGoogle = googleCheckbox.is(':checked') && !googleCheckbox.is(':disabled');
var twitterCheckbox = $(dialogId + ' .share-with-twitter input');
var shareWithTwitter = twitterCheckbox.is(':checked') && !twitterCheckbox.is(':disabled');
if(!shareWithFacebook && !shareWithGoogle && !shareWithTwitter) {
$('.share-options').addClass('error')
$(dialogId + ' .share-options').addClass('error')
return;
}
else {
$('.share-options').removeClass('error')
$(dialogId + ' .share-options').removeClass('error')
}
var message = $('.share-message').val();
var message = $(dialogId + ' .share-message').val();
if(!message) { message = undefined; }
showSpinner();
@ -200,12 +206,38 @@
hideSpinner();
});
}
function registerEvents(onOff) {
$('.dialog-share-button').unbind('click').click(function(e){
function enableFacebook() {
$(dialogId + ' .share-with-facebook input').removeAttr('disabled')
$(dialogId + ' .share-with-facebook a').css('visibility', 'hidden');
}
function disableFacebook() {
$(dialogId + ' .share-with-facebook input').attr('disabled', 'disabled')
$(dialogId + ' .share-with-facebook a').css('visibility', 'visible');
}
function handleFbStateChange(response) {
if(response && response.status == "connected")
{
enableFacebook();
}
else
{
disableFacebook();
}
}
function registerEvents(onOff) {
$(dialogId + ' .dialog-share-button').unbind('click').click(function(e){
socialShare();
return false;
});
$(dialogId + ' .share-with-facebook a').unbind('click').click(function(e) {
facebookHelper.promptLogin();
return false;
})
}
function showDialog() {
@ -278,7 +310,7 @@
}
function beforeShow() {
$('.share-options').removeClass('error');
$(dialogId + ' .share-options').removeClass('error');
registerEvents(true);
}
@ -296,7 +328,12 @@
};
app.bindDialog('share-dialog', dialogBindings);
initDialog();
$(facebookHelper).on('fb.login_response', function(e, data) {
handleFbStateChange(data.response);
})
};
this.initialize = initialize;

View File

@ -41,6 +41,8 @@
var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session");
shareDialog.initialize(context.JK.FacebookHelperInstance);
// shareDialog.showDialog();
$("#btnShare").click(function(e) {
shareDialog.showDialog();
});

View File

@ -1,219 +1,259 @@
body.widgets {
background:#fff;
padding:20px;
}
#share-dialog {
h3 {
font-size:20px;
font-weight:normal;
}
width:500px;
.share-overlay {
.button-orange {
margin:0 2px 0 0;
}
}
body.widgets {
background: #fff;
padding: 20px;
}
td {
vertical-align:top !important;
}
h3 {
font-size: 20px;
font-weight: normal;
}
.widget {
width:430px;
height:180px;
background:#353535;
border:solid 1px;
text-align:left;
}
.share-overlay {
.widget.session {
border-color:#0b6672;
}
}
.widget.recording {
border-color:#ed3618;
}
.share-to-social-media {
margin-bottom: 20px;
padding-bottom: 20px;
.widget-header {
color:#fff;
font-size:17px;
padding:8px;
}
.share-button-holder {
float: right;
margin-top: 5px;
}
.widget-content {
width:100%;
color:#ccc;
position:relative;
}
.share-message {
width: 100%;
padding:0;
margin:0 0 10px 0;
}
}
.widget-avatar {
top:15px;
left:15px;
position:absolute;
padding:2px;
width:110px;
height:110px;
background-color:#ed3618;
-webkit-border-radius:57px;
-moz-border-radius:57px;
border-radius:57px;
margin-bottom:10px;
}
.widget {
width: 430px;
height: 180px;
background: #353535;
border: solid 1px;
text-align: left;
}
.widget-avatar img {
width:110px;
height:110px;
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
}
.widget.session {
border-color: #0b6672;
}
.widget-playbutton {
position:absolute;
top:55px;
left:55px;
width:35px;
height:31px;
background-image:url(../shared/play_button.png);
background-repeat:no-repeat;
}
.widget.recording {
border-color: #ed3618;
}
.widget-pausebutton {
position:absolute;
top:55px;
left:55px;
width:35px;
height:31px;
background-image:url(../shared/pause_button.png);
background-repeat:no-repeat;
}
.widget-header {
color: #fff;
font-size: 17px;
padding: 8px;
}
.widget-title {
font-size:18px;
position:absolute;
top:20px;
left:153px;
width:260px;
height:22px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.widget-content {
width: 100%;
color: #ccc;
position: relative;
}
.widget-description {
font-size:13px;
position:absolute;
top:15px;
left:153px;
width:260px;
height:32px;
overflow:hidden;
text-overflow:ellipsis;
}
.widget-avatar {
top: 15px;
left: 15px;
position: absolute;
padding: 2px;
width: 110px;
height: 110px;
background-color: #ed3618;
-webkit-border-radius: 57px;
-moz-border-radius: 57px;
border-radius: 57px;
margin-bottom: 10px;
}
.widget-controls {
position:absolute;
top:25px;
left:153px;
width:270px;
height:32px;
}
.widget-avatar img {
width: 110px;
height: 110px;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-radius: 55px;
}
.widget-members {
position:absolute;
left:153px;
top:60px;
width:280px;
height:38px;
overflow:hidden;
}
.widget-playbutton {
position: absolute;
top: 55px;
left: 55px;
width: 35px;
height: 31px;
background-image: url(../shared/play_button.png);
background-repeat: no-repeat;
}
.widget-social {
position:absolute;
top:75px;
left:153px;
width:270px;
height:20px;
font-size:13px;
}
.widget-pausebutton {
position: absolute;
top: 55px;
left: 55px;
width: 35px;
height: 31px;
background-image: url(../shared/pause_button.png);
background-repeat: no-repeat;
}
.widget-branding {
.widget-title {
font-size: 18px;
position: absolute;
top: 20px;
left: 153px;
width: 260px;
height: 22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-description {
font-size: 13px;
position: absolute;
top: 15px;
left: 153px;
width: 260px;
height: 32px;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-controls {
position: absolute;
top: 25px;
left: 153px;
width: 270px;
height: 32px;
}
.widget-members {
position: absolute;
left: 153px;
top: 60px;
width: 280px;
height: 38px;
overflow: hidden;
}
.widget-social {
position: absolute;
top: 75px;
left: 153px;
width: 270px;
height: 20px;
font-size: 13px;
}
.widget-branding {
position: absolute;
top: 110px;
right: 8px;
width: 270px;
height: 34px;
font-size: 13px;
text-align:right;
}
text-align: right;
}
.widget .recording-controls {
margin-top:0px;
height:22px;
padding:8px 5px;
}
.widget .recording-controls {
margin-top: 0px;
height: 22px;
padding: 8px 5px;
}
.widget .recording-playback {
width:65%;
}
.widget .recording-playback {
width: 65%;
}
.widget .recording-position {
margin-left:-30px;
width:95%;
}
.widget .recording-position {
margin-left: -30px;
width: 95%;
}
.widget .recording-current {
top:8px;
}
.widget .recording-current {
top: 8px;
}
.widget a {
color:#ccc;
text-decoration:none;
}
.widget a {
color: #ccc;
text-decoration: none;
}
img.space {
margin-left:28px;
}
img.space {
margin-left: 28px;
}
.widget a:hover {
color:#fff;
}
.widget a:hover {
color: #fff;
}
.widget-avatar-small {
float:left;
padding:1px;
width: 36px;
height:36px;
background-color:#ed3618;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
margin-right:15px;
}
.widget-avatar-small img {
.widget-avatar-small {
float: left;
padding: 1px;
width: 36px;
height: 36px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}
.share-options {
.error-msg {
display:none;
margin-top:10px;
text-align:center;
color:#F00;
font-size:11px;
background-color: #ed3618;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
margin-right: 15px;
}
}
.share-options.error {
.widget-avatar-small img {
width: 36px;
height: 36px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.share-options {
.error-msg {
display: none;
margin-top: 10px;
text-align: center;
color: #F00;
font-size: 11px;
}
img {
margin-right:1px;
}
a {
font-size:12px;
margin-right:15px;
}
}
.share-options.error {
background-color: #330000;
border: 1px solid #990000;
padding:4px;
padding: 4px;
.error-msg {
display:block;
.error-msg {
display: block;
}
}
}
.share-link {
h3 {
margin-bottom:20px;
}
.link-contents {
margin-bottom:20px;
}
}
}

View File

@ -1,18 +1,20 @@
html {
height:100%;
min-height:100%;
}
p, div {
white-space: normal;
}
body.web {
background-repeat: repeat-x;
margin:0 !important;
padding:0 !important;
position:relative !important;
overflow: visible !important;
overflow: auto !important;
width:auto !important;
min-height:100%;
div.wrapper {
width:1100px;

View File

@ -1,123 +1,55 @@
<!-- Share dialog -->
<div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" id="share-dialog" style="width:800px; height:auto;">
<div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
<div class="dialog-inner">
<div class="right"> <a class="button-orange" layout-action="close">X CLOSE</a></div>
<table class="w100">
<tr>
<td valign="top" width="45%" class="border-right"><h3 class="mb5">Share to Social Media:</h3>
<div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" id="share-dialog">
<div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
<div class="dialog-inner">
<textarea class="w95 share-message" rows="3" placeholder="Add a Message..."></textarea><br />
<div class="left share-options">
<input type="checkbox" class="share-with-facebook"/>
<%= image_tag "content/icon_facebook.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
<input type="checkbox" class="share-with-twitter" />
<%= image_tag "content/icon_twitter.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
<input type="checkbox" class="share-with-google" />
<%= image_tag "content/icon_google.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
<div class="error-msg">Please select at least one</div>
</div>
<div class=" right mr10 mt5"><a class="button-orange dialog-share-button">SHARE</a></div>
</td>
<td valign="top" width="48%">
<div class="ml10">
<h3>Share a Link:</h3><br />
<% unless true %>
<%= "#{root_url}" %>
<% end %><br/><br/>
<div class="right"><a class="button-orange">COPY LINK</a></div>
</div>
</td>
</tr>
<tr><td colspan=2 class="border-bottom"><br /><br /></td></tr>
</table><br /><br />
<table class="w100">
<tr>
<td valign="top" width="40%"><h3>Get a Widget:</h3>
<!-- ########## Javascript code for widget ########## -->
<textarea class="w95" rows="10">
<!-- widget -->
<div id="divWidgetCode" class="widget">
<!-- header -->
<div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
<!-- song title -->
<div class="widget-controls">
<!-- timeline and controls -->
<div class="w100">
<!-- recording play controls -->
<div class="recording-controls">
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background & slider -->
<div class="recording-playback">
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
</div>
<!-- end time -->
<div class="recording-time">4:59</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">1:23</div>
</div>
<!-- end recording play controls -->
</div>
</div>
<!-- band member avatars -->
<div class="widget-social">&nbsp;
<a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/>&nbsp;&nbsp;LIKE</a>
<a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/>&nbsp;&nbsp;COMMENT</a>
<a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/>&nbsp;&nbsp;SHARE</a>
</div>
<!-- jamkazam branding -->
<div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</textarea> <br /><br />
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
</td>
<td>
<div class="ml10">Preview:
<!-- recording widget -->
<div id="divWidgetPreview" class="widget">
<!-- header -->
<div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
<!-- song title -->
<div id="divWidgetPreviewTitle" class="widget-title"></div>
<!-- avatars -->
<div class="widget-members"></div>
<div class="right"><a class="button-orange" layout-action="close">X CLOSE</a></div>
<br clear="both" />
<!-- jamkazam branding -->
<div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
<a href=<%= "#{root_url}" %>>
<%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
</a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</div>
</td>
</tr>
</table>
<div class="share-to-social-media border-bottom">
<h3 class="mb5">Share to Social Media:</h3>
<textarea class="share-message" rows="4" placeholder="Add a Message..."></textarea><br/>
<div class="share-options left">
<span class="share-with-facebook">
<input type="checkbox" disabled="disabled"/>
<%= image_tag "content/icon_facebook.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
<a href="#" class="authorize">(sign in)</a>
</span>
<span class="share-with-twitter">
<input type="checkbox" disabled="disabled"/>
<%= image_tag "content/icon_twitter.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
<a href="#" class="authorize">(sign in)</a>
</span>
<!--
<div class="share-with-google">
<input type="checkbox" disabled="disabled" />
<%= image_tag "content/icon_google.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
</div>-->
<div class="error-msg">Please select at least one</div>
</div>
<div class="share-button-holder"><a class="button-orange dialog-share-button">SHARE</a></div>
<br clear="both" />
</div>
<div class="share-link">
<h3>Share a Link:</h3>
<div class="link-contents">
<% unless true %>
<%= "#{root_url}" %>
<% end %>
http://www.jamkazam.com/SOUt2Az
</div>
<div class="right"><a class="button-orange">COPY LINK</a></div>
</div>
<!-- contains syndication widget code -->
<% #render 'shareDialogUnused' %>
</div>
</div>

View File

@ -0,0 +1,87 @@
<table class="w100">
<tr>
<td valign="top" width="40%"><h3>Get a Widget:</h3>
<!-- ########## Javascript code for widget ########## -->
<textarea class="w95" rows="10">
<!-- widget -->
<div id="divWidgetCode" class="widget">
<!-- header -->
<div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
<!-- song title -->
<div class="widget-controls">
<!-- timeline and controls -->
<div class="w100">
<!-- recording play controls -->
<div class="recording-controls">
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background & slider -->
<div class="recording-playback">
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
</div>
<!-- end time -->
<div class="recording-time">4:59</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">1:23</div>
</div>
<!-- end recording play controls -->
</div>
</div>
<!-- band member avatars -->
<div class="widget-social">&nbsp;
<a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/>&nbsp;&nbsp;LIKE</a>
<a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/>&nbsp;&nbsp;COMMENT</a>
<a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/>&nbsp;&nbsp;SHARE</a>
</div>
<!-- jamkazam branding -->
<div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</textarea> <br /><br />
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
</td>
<td>
<div class="ml10">Preview:
<!-- recording widget -->
<div id="divWidgetPreview" class="widget">
<!-- header -->
<div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
<!-- song title -->
<div id="divWidgetPreviewTitle" class="widget-title"></div>
<!-- avatars -->
<div class="widget-members"></div>
<!-- jamkazam branding -->
<div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
<a href=<%= "#{root_url}" %>>
<%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
</a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</div>
</td>
</tr>
</table>

View File

@ -56,6 +56,7 @@
<%= render "clients/invitationDialog" %>
<%= render "users/signupDialog" %>
<%= render "users/signinDialog" %>
<%= yield(:extra_dialogs) %>
<script type="text/javascript">
$(function () {
@ -73,7 +74,7 @@
<% end %>
JK.app = JK.JamKazam();
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false, sizeOverlayToContent: true}});
var facebookHelper = new JK.FacebookHelper(JK.app);
JK.FacebookHelperInstance = facebookHelper;

View File

@ -89,7 +89,9 @@
<%= javascript_include_tag "web/sessions" %>
<%= render :partial => "clients/shareDialog", :locals => {:session => @music_session} %>
<% content_for :extra_dialogs do %>
<%= render :partial => "clients/shareDialog", :locals => {:session => @music_session} %>
<% end %>
<% content_for :extra_js do %>
<script type="text/javascript">

View File

@ -89,7 +89,9 @@
<%= javascript_include_tag "web/recordings" %>
<%= render :partial => "clients/shareDialog", :locals => {:recording => @claimed_recording, :share_token => @claimed_recording.share_token} %>
<% content_for :extra_dialogs do %>
<%= render :partial => "clients/shareDialog", :locals => {:recording => @claimed_recording, :share_token => @claimed_recording.share_token} %>
<% end %>
<% content_for :extra_js do %>
<script type="text/javascript">