LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1006 from lbryio/yt-update

Browse source 
YouTube Sync redesign
This commit is contained in:
netop:// ウェッブ 2019-04-08 10:07:02 -05:00 • committed by GitHub
commit 9d09248bd0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
65 changed files with 1191 additions and 2983 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
controller/Controller.class.php
View file

@ -125,7 +125,6 @@ class Controller
$router->any('/dmca', 'ReportActions::executeDmca');
$router->any('/youtube/sub', 'AcquisitionActions::executeYouTubeSub');
$router->post('/youtube/edit', 'AcquisitionActions::executeYoutubeEdit');
$router->post('/youtube/token', 'AcquisitionActions::executeYoutubeToken');
$router->any('/youtube/status/{token}', 'AcquisitionActions::executeYoutubeStatus');

9
controller/Session.class.php
View file

@ -2,12 +2,9 @@
class Session
{
const KEY_DOWNLOAD_ACCESS_ERROR = 'download_error2',
KEY_DOWNLOAD_ALLOWED = 'beta_download_allowed2',
KEY_GITHUB_ACCESS_TOKEN = 'github_access_token',
KEY_LIST_SUB_ERROR = 'list_error',
KEY_USER_CULTURE = 'user_culture',
KEY_YOUTUBE_TEMPLATE = 'youtube_landing_template';
const KEY_LIST_SUB_ERROR = 'list_error',
KEY_YOUTUBE_SYNC_ERROR = 'youtube_sync_error',
KEY_USER_CULTURE = 'user_culture';
const NAMESPACE_DEFAULT = 'default',
NAMESPACE_FLASH = 'flash',

117
controller/action/AcquisitionActions.class.php
View file

@ -2,55 +2,11 @@
class AcquisitionActions extends Actions
{
public static function executeThanks()
{
return ['acquisition/thanks'];
}
public static function executeYouTubeSub()
{
if (!Request::isPost()) {
return Controller::redirect('/youtube');
}
$email = Request::getPostParam('email');
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
Session::setFlash('error', 'Please enter a valid email.');
return Controller::redirect('/youtube');
}
Salesforce::createContact($email, SalesForce::DEFAULT_LIST_ID, 'YouTube Campaign');
Mailgun::sendYouTubeWarmLead(['email' => $email]);
Session::setFlash('success', 'Thanks! We\'ll be in touch. The good kind of touch.');
return Controller::redirect(Request::getReferrer(), 303);
}
public static function executeYouTube(string $version = '')
{
if (isset($_GET['error_message'])) {
$error_message = Request::encodeStringFromUser($_GET['error_message']);
}
$baseTemplate = 'acquisition/youtube';
$versionedTemplate = $baseTemplate . '-' . $version;
$template = $version && View::exists($versionedTemplate) ? $versionedTemplate : $baseTemplate;
if ($version && View::exists($versionedTemplate)) {
Session::set(SESSION::KEY_YOUTUBE_TEMPLATE, $template);
}
$template = Session::get(SESSION::KEY_YOUTUBE_TEMPLATE) ?? $template;
if (!View::exists($template)) {
Session::unsetKey(SESSION::KEY_YOUTUBE_TEMPLATE);
$template = $baseTemplate;
}
return [$template, [
return ['acquisition/youtube', [
'reward' => LBRY::youtubeReward(),
'error_message' => $error_message ?? ''
'error_message' => Session::getFlash(Session::KEY_YOUTUBE_SYNC_ERROR)
]];
}
@ -66,39 +22,36 @@ class AcquisitionActions extends Actions
public static function executeYoutubeToken()
{
return ['acquisition/youtube_token', ['_no_layout' => true]];
$channelName = Request::encodeStringFromUser($_POST['desired_lbry_channel_name']);
if ($channelName && $channelName[0] !== "@") {
$channelName = '@' . $channelName;
}
$token = LBRY::connectYoutube($channelName);
if ($token['success'] && $token['data']) {
Controller::redirect($token['data']);
} else {
Session::setFlash(Session::KEY_YOUTUBE_SYNC_ERROR, $token['error'] ?? "An unknown error occured.");
Controller::redirect('/youtube');
}
}
public static function executeYoutubeStatus(string $token)
{
if (isset($_GET['error_message'])) {
$error_message = Request::encodeStringFromUser($_GET['error_message']);
$data = LBRY::statusYoutube($token);
if (!$data['success']) {
Session::setFlash(Session::KEY_YOUTUBE_SYNC_ERROR, $data['error'] ?? "Error fetching your sync status.");
Controller::redirect('/youtube');
}
$data = LBRY::statusYoutube($token);
if ($data['success'] == false) {
Controller::redirect('/youtube?error=true&error_message=' . $data['error']);
}
return ['acquisition/youtube_status', [
'token' => $token,
'status_token' => $data,
'error_message' => $error_message ?? ''
'error_message' => Session::getFlash(Session::KEY_YOUTUBE_SYNC_ERROR)
]];
}
public static function actionYoutubeToken(string $desired_lbry_channel_name)
{
$desired_lbry_channel_name_is_valid = static::lbry_channel_verification($desired_lbry_channel_name);
if ($desired_lbry_channel_name_is_valid) {
$token = LBRY::connectYoutube($desired_lbry_channel_name);
if ($token['success'] == false) {
Controller::redirect('/youtube?error=true&error_message=' . $token['error']);
} else {
Controller::redirect($token['data']);
}
}
}
public static function actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent)
{
$current_value = LBRY::statusYoutube($status_token);
@ -109,7 +62,8 @@ class AcquisitionActions extends Actions
}
if ($status['success'] == false) {
Controller::redirect("/youtube/status/". $status_token . "?error=true&error_message=" . $status['error']);
Session::setFlash(Session::KEY_YOUTUBE_SYNC_ERROR, $status['error']);
Controller::redirect("/youtube/status/". $status_token);
} else {
Controller::redirect("/youtube/status/" . $status_token);
}
@ -123,31 +77,4 @@ class AcquisitionActions extends Actions
{
return ['acquisition/youtube_status_redirect'];
}
protected static function email_verification($email)
{
if (preg_match('/\S+@\S+\.\S+/', $email)) {
return true;
} else {
return false;
}
}
protected static function youtube_channel_verification($youtube_channel_id)
{
if (preg_match('/^UC[A-Za-z0-9_-]{22}$/', $youtube_channel_id)) {
return true;
} else {
return false;
}
}
protected static function lbry_channel_verification($lbry_channel)
{
if (preg_match('/[1-z]+/', $lbry_channel)) {
return true;
} else {
return false;
}
}
}

14
lib/thirdparty/Mailgun.class.php vendored
View file

@ -23,20 +23,6 @@ class Mailgun
return $status == 200;
}
public static function sendYouTubeWarmLead($data)
{
list($status, $headers, $body) = static::post('/' . static::MAIL_DOMAIN . '/messages', [
'from' => 'LBRY <mail@' . static::MAIL_DOMAIN . '>',
'to' => 'reilly@lbry.com',
'subject' => 'Interested YouTuber',
'html' => '<pre>' . var_export($data, true) . '</pre>',
'o:tracking-clicks' => 'no',
'o:tracking-opens' => 'no'
]);
return $status == 200;
}
protected static function post($endpoint, $data)
{
return static::request(Curl::POST, $endpoint, $data);

3
view/View.class.php
View file

@ -131,9 +131,6 @@ class View
$all_css = $scssCompiler->compile(file_get_contents(self::SCSS_DIR . '/all.scss'));
file_put_contents(self::CSS_DIR . '/all.css', $all_css);
$youtube_css = $scssCompiler->compile(file_get_contents(self::SCSS_DIR . '/youtube.scss'));
file_put_contents(self::CSS_DIR . '/youtube.css', $youtube_css);
}
public static function gzipAssets()

15
view/template/acquisition/_youtube_header.php
View file

@ -1,15 +0,0 @@
<header class="header-yt">
<div class="inner">
<div class="left">
<div class="logo"></div>
<a href="/get">Get</a>
<a href="/learn">Learn</a>
</div>
<div class="right">
<a href="https://github.com/lbryio" class="github"></a>
<a href="https://www.reddit.com/r/lbry/" class="reddit"></a>
<a href="https://www.facebook.com/lbryio" class="facebook"></a>
<a href="https://twitter.com/lbryio" class="twitter"></a>
</div>
</div>
</header>

2
view/template/acquisition/auto-verify.php
View file

@ -57,7 +57,7 @@
<body>
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1 id="title">Almost Done!</h1>
</div>
</section>

2
view/template/acquisition/verify.php
View file

@ -33,7 +33,7 @@
<body>
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1 id="title">Almost Done!</h1>
</div>
</section>

195
view/template/acquisition/youtube-2.php
View file

@ -1,195 +0,0 @@
<?php
Response::setCssAssets(['/css/youtube.css']);
Response::addJsAsset('/js/yt2/TweenMax.min.js');
Response::addJsAsset('/js/yt2/ScrollToPlugin.min.js');
Response::addJsAsset('/js/yt2/app.js');
Response::addJsAsset('/js/yt2/FormValidation.js');
Response::addJsAsset('/js/yt2/SyncStatus.js');
Response::addJsAsset('/js/yt2/youtube_video.js');
Response::setMetaTitle("LBRY YouTube Partner Program");
Response::setMetaDescription("Put your content on the blockchain, experience true content freedom, and earn rewards.");
?>
<main>
<?php echo View::render('acquisition/_youtube_header') ?>
<section class="hero">
<div class="shape">
<svg style="width: 100%; height: 100%;">
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="-1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
</svg>
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="dot a"></div>
<div class="dot b"></div>
<div class="dot c"></div>
<div class="dot d"></div>
<div class="dot e"></div>
</div>
<div class="title">
<div class="overflow"><h1>Content Freedom.</h1></div>
<p>Put your content on the blockchain and earn rewards.</p>
<div class="button">Claim Your LBRY Channel</div>
</div>
</section>
<section class="sync section">
<div class="inner">
<div class="content">
<div class="zigzag"></div>
<h1>Sync &amp; Earn Crypto</h1>
<p>LBRY offers a single-click sync process<br>for existing YouTubers</p>
<form class="form" id="sync" method="post" action="/youtube">
<div class="form-inner">
<div class="block">
<div class="center">
<input type="text" hidden name="type" value="sync"/>
<input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
<label for="immediate-sync">I want to sync my content.</label></div>
</div>
</div>
<div class="block">
<div class="center">
<input type="submit" value="Sync Now"/>
</div>
</div>
</div>
</form>
<div class="meta">
By syncing, you agree to mirror your content to the LBRY network for 1 year, and acknowledge <a href="/faq/youtube-terms">these terms</a>.
</div>
</div>
</div>
</section>
<section class="join section">
<div class="inner">
<div class="content">
<h1>LBRY is more fun with friends</h1>
<p>Take your peers and your audience with you. Create without limits.</p>
<div class="boxes">
<div class="box">
<div class="image">
<div id="play-video1" class="to-play" onclick="playVideo('video1')"><span></span></div>
<video id="video1" width="100%" poster="/img/youtube/01@2x.jpg" src="https://spee.ch/1ac47b8b3def40a25850dc726a09ce23d09e7009/ever-wonder-how-bitcoin-and-other.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"/></video>
</div>
<div class="text">
<p>@3Blue1Brown</p>
</div>
</div>
<div class="box">
<div class="image">
<div id="play-video2" class="to-play" onclick="playVideo('video2')"><span></span></div>
<video id="video2" width="100%" poster="/img/youtube/02@2x.jpg" src="https://spee.ch/3c96f32de285db6c04e80bd6f5fad573250541e9/casually-successful.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}" /></video>
</div>
<div class="text">
<p>@CasuallyExplained</p>
</div>
</div>
<div class="box">
<div class="image" >
<div id="play-video3" class="to-play" onclick="playVideo('video3')"><span></span></div>
<video id="video3" width="100%" poster="/img/youtube/03@2x.jpg" src="https://spee.ch/8958c5d573d71f5c2d0c1bfdf752737ce39744cb/the-historical-elements-of-wolfenstein.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"></video>
</div>
<div class="text">
<p>@ColinsLastStand</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="how section">
<div class="inner">
<div class="content">
<h1>Migrating to LBRY</h1>
<p>We will automatically mirror your existing YouTube channel to the LBRY Network.</p>
<div class="steps">
<div class="path">
<div class="journey"></div>
</div>
<div class="step one enabled" data-enable="12">
<div class="circle">1</div>
<p class="text">Sync your channel</p>
</div>
<div class="step two enabled" data-enable="33">
<div class="circle">2</div>
<p class="text">Download the LBRY App</p>
</div>
<div class="step three enabled" data-enable="75">
<div class="circle">3</div>
<p class="text">Receive your LBRY Credits</p>
</div>
</div>
</div>
</div>
</section>
<section class="rewards section">
<div class="inner">
<div class="content">
<h1>LBRY Credits and Your Channel</h1>
<p>After you sync, receive LBRY Credits for one year based on your current subscriber count.<br/><br/>
The more you give to the network, the more it gives back.</p>
<div class="price">
<h3>Partner Programs</h3>
<p>LBC <span class="current-value"></span></p>
</div>
<div class="table">
<div class="head">
<p>Subscribers</p>
<p>Yearly</p>
<p>Amount</p>
</div>
<div class="line">
<p>1,000</p>
<p><?php echo $reward['data']['1000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>10,000</p>
<p><?php echo $reward['data']['10000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>100,000</p>
<p><?php echo $reward['data']['100000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>1,000,000</p>
<p><?php echo $reward['data']['1000000']; ?> <span></span></p>
<p></p>
</div>
</div>
</div>
</div>
</section>
<section class="contact section">
<div class="inner">
<div class="content">
<h1>Tell me more.</h1>
<p>We have a guy that elaborates on things. Apply directly to the forehead.</p>
<div class="v-card">
<div class="photo"><img src="/img/youtube/reilly-smith@2x.png"></div>
<div class="text">
<h3>Reilly Smith</h3>
<p>Head of Content</p>
<a href="mailto:reilly@lbry.com?subject=YouTube+Freedom">Contact</a>
</div>
</div>
</div>
</div>
</section>
<div class="to-top"><span>to top</span></div>
</main>

194
view/template/acquisition/youtube-3.php
View file

@ -1,194 +0,0 @@
<?php
Response::setCssAssets(['/css/youtube.css']);
Response::addJsAsset('/js/yt2/TweenMax.min.js');
Response::addJsAsset('/js/yt2/ScrollToPlugin.min.js');
Response::addJsAsset('/js/yt2/app.js');
Response::addJsAsset('/js/yt2/FormValidation.js');
Response::addJsAsset('/js/yt2/SyncStatus.js');
Response::addJsAsset('/js/yt2/youtube_video.js');
Response::setMetaTitle("LBRY YouTube Partner Program");
Response::setMetaDescription("Put your content on the blockchain, experience true content freedom, and earn rewards.");
Response::addMetaImage(Request::getHostAndProto() . '/img/lbry-partner.png');
?>
<main>
<?php echo View::render('acquisition/_youtube_header') ?>
<section class="hero">
<div class="shape">
<svg style="width: 100%; height: 100%;">
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="-1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
</svg>
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="dot a"></div>
<div class="dot b"></div>
<div class="dot c"></div>
<div class="dot d"></div>
<div class="dot e"></div>
</div>
<div class="title">
<div class="overflow"><h1>Content Freedom.</h1></div>
<p>Put your content on the blockchain and earn rewards.</p>
<div class="button">Claim Your LBRY Channel</div>
</div>
</section>
<section class="claim section">
<div class="inner">
<div class="content">
<?php
if ($error_message): echo "<div>" . "The following error occurred: ". $error_message . " For support please send an email to hello@lbry.com" . "</div>";
endif;?>
<div class="zigzag"></div>
<h1>Create on a stable platform. For real this time.</h1>
<div hidden id="sync-status" class="sync-status">
</div>
<form id="youtube_claim" method="post" action="/youtube/token">
<div class="form-inner" >
<div class="block">
<input id="lbry_channel_name" type="text" name="desired_lbry_channel_name" placeholder="Enter your channel name" />
<label>@</label>
<div hidden id="lbry_error" class="error">LBRY channel name is not valid or blank</div>
</div>
</form>
<div class="block">
<input type="submit" value="Claim now" onClick="return submitDetailsForm()"/>
</div>
<div class="meta">
This will verify you are an active YouTuber, then instructions and your welcome credits will be emailed to you.
<a href="/faq/youtube">Learn more</a>.
</div>
</div>
</div>
</section>
<section class="join section">
<div class="inner">
<div class="content">
<h1>LBRY is more fun with friends</h1>
<p>Take your peers and your audience with you. Create without limits.</p>
<div class="boxes">
<div class="box">
<div class="image">
<div id="play-video1" class="to-play" onclick="playVideo('video1')"><span></span></div>
<video id="video1" width="100%" poster="/img/youtube/01@2x.jpg" src="https://spee.ch/1ac47b8b3def40a25850dc726a09ce23d09e7009/ever-wonder-how-bitcoin-and-other.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"/></video>
</div>
<div class="text">
<p>@3Blue1Brown</p>
</div>
</div>
<div class="box">
<div class="image">
<div id="play-video2" class="to-play" onclick="playVideo('video2')"><span></span></div>
<video id="video2" width="100%" poster="/img/youtube/02@2x.jpg" src="https://spee.ch/3c96f32de285db6c04e80bd6f5fad573250541e9/casually-successful.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}" /></video>
</div>
<div class="text">
<p>@CasuallyExplained</p>
</div>
</div>
<div class="box">
<div class="image" >
<div id="play-video3" class="to-play" onclick="playVideo('video3')"><span></span></div>
<video id="video3" width="100%" poster="/img/youtube/03@2x.jpg" src="https://spee.ch/8958c5d573d71f5c2d0c1bfdf752737ce39744cb/the-historical-elements-of-wolfenstein.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"></video>
</div>
<div class="text">
<p>@ColinsLastStand</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="how section">
<div class="inner">
<div class="content">
<h1>Migrating to LBRY</h1>
<p>We will automatically mirror your most recent 1,000 YouTube videos to your channel on the LBRY Network.</p>
<div class="steps">
<div class="path">
<div class="journey"></div>
</div>
<div class="step one enabled" data-enable="12">
<div class="circle">1</div>
<p class="text">Sync your channel</p>
</div>
<div class="step two enabled" data-enable="33">
<div class="circle">2</div>
<p class="text">Download the LBRY App</p>
</div>
<div class="step three enabled" data-enable="75">
<div class="circle">3</div>
<p class="text">Receive your LBRY Credits</p>
</div>
</div>
</div>
</div>
</section>
<section class="rewards section">
<div class="inner">
<div class="content">
<h1>LBRY Credits and Your Channel</h1>
<p>After you sync, receive LBRY Credits for one year based on your current subscriber count.<br/><br/>
The more you give to the network, the more it gives back.</p>
<div class="price">
<h3>Partner Programs</h3>
<p>LBC <span class="current-value"></span></p>
</div>
<div class="table">
<div class="head">
<p>Subscribers</p>
<p>Yearly</p>
<p>Amount</p>
</div>
<div class="line">
<p>1,000</p>
<p><?php echo $reward['data']['1000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>10,000</p>
<p><?php echo $reward['data']['10000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>100,000</p>
<p><?php echo $reward['data']['100000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>1,000,000</p>
<p><?php echo $reward['data']['1000000']; ?> <span></span></p>
<p></p>
</div>
</div>
</div>
</div>
</section>
<section class="contact section">
<div class="inner">
<div class="content">
<h1>Tell me more.</h1>
<p>We have a guy that elaborates on things. Apply directly to the forehead.</p>
<div class="v-card">
<div class="photo"><img src="/img/youtube/reilly-smith@2x.png"></div>
<div class="text">
<h3>Reilly Smith</h3>
<p>Head of Content</p>
<a href="mailto:reilly@lbry.com?subject=YouTube+Freedom">Contact</a>
</div>
</div>
</div>
</div>
</section>
<div class="to-top"><span>to top</span></div>
</main>

352
view/template/acquisition/youtube.php
View file

@ -1,193 +1,245 @@
<?php
Response::setCssAssets(['/css/youtube.css']);
Response::addJsAsset('/js/yt2/TweenMax.min.js');
Response::addJsAsset('/js/yt2/ScrollToPlugin.min.js');
Response::addJsAsset('/js/yt2/app.js');
Response::addJsAsset('/js/yt2/FormValidation.js');
Response::addJsAsset('/js/yt2/SyncStatus.js');
Response::addJsAsset('/js/yt2/youtube_video.js');
Response::setMetaTitle("LBRY YouTube Partner Program");
Response::setMetaDescription("Put your content on the blockchain, experience true content freedom, and earn rewards.");
Response::addMetaImage(Request::getHostAndProto() . '/img/lbry-partner.png');
Response::addJsAsset('/js/yt2/TweenMax.min.js');
Response::addJsAsset('/js/yt2/app.js');
Response::addJsAsset('/js/yt2/FormValidation.js');
Response::addJsAsset('/js/yt2/SyncStatus.js');
Response::addJsAsset('/js/yt2/youtube_video.js');
Response::setMetaTitle("LBRY YouTube Partner Program");
Response::setMetaDescription("Put your content on the blockchain, experience true content freedom, and earn rewards.");
Response::addMetaImage(Request::getHostAndProto() . '/img/lbry-partner.png');
?>
<main>
<?php echo View::render('acquisition/_youtube_header') ?>
<section class="hero">
<div class="shape">
<svg style="width: 100%; height: 100%;">
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="-1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="0" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="1" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
<path d="M 0,0" stroke="#2F3C5C" stroke-width="0.3px" fill="none" data-from="2" />
</svg>
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="dot a"></div>
<div class="dot b"></div>
<div class="dot c"></div>
<div class="dot d"></div>
<div class="dot e"></div>
</div>
<div class="title">
<div class="overflow"><h1>Find New Fans</h1></div>
<p>Get your YouTube videos in front of the LBRY audience.</p>
<div class="button">Claim Your LBRY Channel Now</div>
</div>
</section>
<section class="claim section">
<div class="inner">
<div class="content">
<main class="ancillary youtube youtube--landing">
<section class="hero hero--youtube">
<div class="shape">
<svg>
<path d="M 0,0" data-from="-1"/>
<path d="M 0,0" data-from="0"/>
<path d="M 0,0" data-from="0"/>
<path d="M 0,0" data-from="1"/>
<path d="M 0,0" data-from="1"/>
<path d="M 0,0" data-from="2"/>
<path d="M 0,0" data-from="2"/>
<path d="M 0,0" data-from="2"/>
</svg>
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="dot a"></div>
<div class="dot b"></div>
<div class="dot c"></div>
<div class="dot d"></div>
<div class="dot e"></div>
</div>
<div class="inner-wrap inner-wrap--center-left">
<h1 class="weight-light">LBRY &times; YouTube Sync</h1>
<h2 class="weight-light">Get your YouTube videos in front of the LBRY audience</h2>
<button class="button button--inverse" data-id="scroll-to-claim" type="button">Claim your channel now</button>
</div>
</section>
<section class="align-text--center" id="claim-section">
<div class="inner-wrap">
<?php
if ($error_message): echo "<div>" . "The following error occurred: ". $error_message . " For support please send an email to hello@lbry.com" . "</div>";
if ($error_message): echo "<div>" . "The following error occurred: ". $error_message . " For support please send an email to hello@lbry.com" . "</div>";
endif;?>
<div class="zigzag"></div>
<h1>Connect with your fans while earning money and rewards.</h1>
<div hidden id="sync-status" class="sync-status">
</div>
<h2>Connect with your fans while earning money and rewards</h2>
<form id="youtube_claim" method="post" action="/youtube/token">
<div class="form-inner" >
<div class="block">
<input id="lbry_channel_name" type="text" name="desired_lbry_channel_name" placeholder="Enter your channel name" />
<label>@</label>
<div hidden id="lbry_error" class="error">LBRY channel name is not valid or blank</div>
</div>
<p hidden id="sync-status" class="sync-status"></p>
<input-submit>
<label class="symbol-prefix">@</label>
<input
id="lbry_channel_name"
name="desired_lbry_channel_name"
placeholder="Enter your channel name"
type="text"
/>
<input
onClick="return submitDetailsForm()"
type="submit"
value="Claim now"
/>
<div hidden id="lbry_error" class="error">LBRY channel name is either not valid or your input is blank</div>
</input-submit>
<br/>
<checkbox-element>
<input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
<label for="immediate-sync">I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a></label>
<checkbox-toggle/>
</checkbox-element>
<input type="text" hidden name="type" value="sync"/>
</form>
<div class="block">
<input type="submit" value="Claim now" onClick="return submitDetailsForm()"/>
</div>
<div class="meta">
<small class="meta">
This will verify you are an active YouTuber. Instructions about how to claim credits, and technical details about your channel, will be emailed to you after you are verified.
<a href="/faq/youtube">Learn more</a>.
<a href="/faq/youtube">Learn more</a>
</small>
</div>
</section>
<section>
<div class="join section inner-wrap">
<h3>Join the best creators already on LBRY</h3>
<p>Audiences range from 1,000+ to 10,000,000+ people. The videos below are from creators who have synced their content to LBRY.</p>
<div class="ytsync-previews">
<figure class="ytsync-preview">
<video
onclick="playVideo('video1')"
id="video1"
poster="/img/youtube/01@2x.jpg"
src="https://spee.ch/1ac47b8b3def40a25850dc726a09ce23d09e7009/ever-wonder-how-bitcoin-and-other.mp4"
></video>
<figcaption>@3Blue1Brown</figcaption>
</figure>
<figure class="ytsync-preview">
<video
onclick="playVideo('video2')"
id="video2"
poster="/img/youtube/02@2x.jpg"
src="https://spee.ch/3c96f32de285db6c04e80bd6f5fad573250541e9/casually-successful.mp4"
></video>
<figcaption>@CasuallyExplained</figcaption>
</figure>
<figure class="ytsync-preview">
<video
onclick="playVideo('video3')"
id="video3"
poster="/img/youtube/03@2x.jpg"
src="https://spee.ch/8958c5d573d71f5c2d0c1bfdf752737ce39744cb/the-historical-elements-of-wolfenstein.mp4"
></video>
<figcaption>@ColinsLastStand</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="join section">
<div class="inner">
<div class="content">
<h1>Join The Best Creators Already On LBRY</h1>
<p>With audiences ranging from 1,000+ to 10,000,000+</p>
<div class="boxes">
<div class="box">
<div class="image">
<div id="play-video1" class="to-play" onclick="playVideo('video1')"><span></span></div>
<video id="video1" width="100%" poster="/img/youtube/01@2x.jpg" src="https://spee.ch/1ac47b8b3def40a25850dc726a09ce23d09e7009/ever-wonder-how-bitcoin-and-other.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"/></video>
</div>
</section>
<div class="text">
<p>@3Blue1Brown</p>
</div>
</div>
<div class="box">
<div class="image">
<div id="play-video2" class="to-play" onclick="playVideo('video2')"><span></span></div>
<video id="video2" width="100%" poster="/img/youtube/02@2x.jpg" src="https://spee.ch/3c96f32de285db6c04e80bd6f5fad573250541e9/casually-successful.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}" /></video>
</div>
<section>
<div class="rewards section inner-wrap">
<h3>Getting credits for your channel</h3>
<p>Depending on the number of subscribers you have on YouTube when you claim your channel, you will qualify for different lump sums of LBC.</p>
<div class="text">
<p>@CasuallyExplained</p>
</div>
</div>
<div class="box">
<div class="image" >
<div id="play-video3" class="to-play" onclick="playVideo('video3')"><span></span></div>
<video id="video3" width="100%" poster="/img/youtube/03@2x.jpg" src="https://spee.ch/8958c5d573d71f5c2d0c1bfdf752737ce39744cb/the-historical-elements-of-wolfenstein.mp4" style="cursor: pointer" onclick="function(){this.paused ? this.play() : this.pause()}"></video>
</div>
<div class="text">
<p>@ColinsLastStand</p>
</div>
</div>
</div>
<h4>
Subscriber Levels
<small class="meta">LBC <span class="current-value"></span></small>
</h4>
<table>
<thead style="font-size: 80%;">
<tr>
<th>Your Current YouTube Subscribers</th>
<th>LBC Tokens</th>
<th>USD Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,000</td>
<td><?php echo $reward['data']['1000']; ?> <small class="meta">LBC</small></td>
<td data-id="amount-<?php echo $reward['data']['1000']; ?>"></td>
</tr>
<tr>
<td>10,000</td>
<td><?php echo $reward['data']['10000']; ?> <small class="meta">LBC</small></td>
<td data-id="amount-<?php echo $reward['data']['10000']; ?>"></td>
</tr>
<tr>
<td>100,000</td>
<td><?php echo $reward['data']['100000']; ?> <small class="meta">LBC</small></td>
<td data-id="amount-<?php echo $reward['data']['100000']; ?>"></td>
</tr>
<tr>
<td>1,000,000</td>
<td><?php echo $reward['data']['1000000']; ?> <small class="meta">LBC</small></td>
<td data-id="amount-<?php echo $reward['data']['1000000']; ?>"></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="how section">
<div class="inner">
<div class="content">
<h1>Getting On LBRY Is Easy</h1>
</section>
<section>
<div class="yt-how inner-wrap">
<h3>Getting on LBRY is easy</h3>
<p>When you claim your channel your most recent 1,000 YouTube videos will be automatically copied to your LBRY channel.</p>
<ol>
<li>Claim your channel</li>
<li>Authorize your content</li>
<li>Users watch your content on LBRY</li>
</ol>
<div class="steps">
<div class="path">
<div class="journey"></div>
</div>
<div class="step one enabled" data-enable="12">
<div class="circle">1</div>
<p class="text">Claim your channel</p>
</div>
<div class="step two enabled" data-enable="33">
<div class="circle">2</div>
<p class="text">Authorize your content</p>
</div>
<div class="step three enabled" data-enable="75">
<div class="circle">3</div>
<p class="text">Users watch your content on LBRY</p>
</div>
</div>
</div>
</div>
</section>
<section class="rewards section">
<div class="inner">
<div class="content">
<h1>Getting Credits For Your Channel</h1>
<p>Depending on the number of subscribers you have on YouTube when you claim your channel, you will qualify for different lump sums of LBC.<br/><br/>
</p>
<div class="price">
<h3>Subscriber Levels</h3>
<p>LBC <span class="current-value"></span></p>
</div>
<div class="table">
<div class="head">
<p>Your Current YouTube Subscribers</p>
<p>LBC Tokens</p>
<p>USD Value</p>
</div>
<div class="line">
<p>1,000</p>
<p><?php echo $reward['data']['1000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>10,000</p>
<p><?php echo $reward['data']['10000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>100,000</p>
<p><?php echo $reward['data']['100000']; ?> <span></span></p>
<p></p>
</div>
<div class="line">
<p>1,000,000</p>
<p><?php echo $reward['data']['1000000']; ?> <span></span></p>
<p></p>
</div>
</section>
<section class="align-text--center">
<div class="inner-wrap">
<h3>Sync &amp; Earn</h3>
<p>LBRY offers a single-click sync process for existing YouTubers.</p>
<br/>
<div>
<button class="button button--inverse" data-id="scroll-to-claim" type="button">Sync now</button>
</div>
</div>
</div>
</section>
<section class="contact section">
<div class="inner">
<div class="content">
<h1>Let’s Connect</h1>
</section>
<section>
<div class="inner-wrap">
<h3>Let's connect</h3>
<p>If you have any questions, reach out.</p>
<div class="v-card">
<div class="photo"><img src="https://spee.ch/7/rob-smith1.png"></div>
<div class="text">
<figure>
<img alt="Rob Smith, Head of Product Growth" src="https://spee.ch/7/rob-smith1.png"/>
</figure>
<info>
<h3>Rob Smith</h3>
<p>Head of Product Growth</p>
<a href="mailto:rob@lbry.com?subject=YouTube+Freedom">Contact</a>
</div>
</info>
</div>
</div>
</div>
</section>
<div class="to-top"><span>to top</span></div>
</section>
</main>

2
view/template/acquisition/youtube_edit.php
View file

@ -6,7 +6,7 @@ $sync_consent = isset($_POST['sync_consent']);
if ($channel_name !== "" && !preg_match("/@[A-Za-z0-9-]+$/", $channel_name)) {
$channel_name = "@" . $channel_name;
$channel_name = "@" . $channel_name;
}
AcquisitionActions::actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent);

299
view/template/acquisition/youtube_status.php
View file

@ -1,16 +1,17 @@
<?php Response::setMetaDescription('YouTuber? Take back control! LBRY allows publication on your terms. It\'s open-source, decentralized, and gives you 100% of the profit.') ?>
<?php Response::setMetaTitle(__('YouTubers! Take back control.')) ?>
<?php Response::setCssAssets(['/css/youtube.css']) ?>
<?php Response::addJsAsset('/js/yt2/FormValidation.js') ?>
<?php Response::addJsAsset('/js/yt2/youtube_status.js') ?>
<?php Response::addJsAsset('/js/yt2/youtube_video.js') ?>
<?php Response::addJsAsset('//www.googleadservices.com/pagead/conversion_async.js') ?>
<?php $statusData = $status_token['data'] ?>
<?php $isSyncAgreed = in_array($statusData['status'], ["syncing", "synced", "queued", "failed", "finalized"]) ?>
<?php $isRewardClaimed = $statusData['redeemed_reward'] > 0 ?>
<?php if (IS_PRODUCTION): ?>
<?php js_start() ?>
if (!localStorage.getItem('status_token')) {
<?php js_start() ?>
if (!localStorage.getItem('status_token')) {
ga('send', 'event', 'YT Sync', '<?php echo $isSyncAgreed ? "pending" : "queued" ?>', '');
fbq('track', 'Lead');
@ -20,142 +21,168 @@
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() { };
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
<?php js_end() ?>
opt.onload_callback = function() { };
if (typeof(conv_handler) === 'function')
conv_handler(opt);
}
<?php js_end() ?>
<?php endif ?>
<main class="channel-settings">
<?php echo View::render('acquisition/_youtube_header') ?>
<section class="section channel pad-top">
<div class="inner">
<div class="content">
<?php if (preg_match('/^[A-Za-z0-9._%+-]+@plusgoogle.com$/', $statusData['email'])): ?>
<div id="email-google-plus-error" class="error">Your email address is set
as <?php echo $statusData['email']; ?>.<br>If this is not your email address, please <span
id="scroll_email">change it below</span>.
</div>
<?php endif ?>
<div class="zigzag"></div>
<h1><?php echo $isSyncAgreed && $isRewardClaimed ? "You're all set!" : "Almost done!" ?></h1>
<div class="confirmation-steps">
<ul>
<li>
<span>✓</span>
<p>Confirm your channel</p>
</li>
<li class="<?php echo $isSyncAgreed ? "" : "disabled" ?>">
<span><?php echo $isSyncAgreed ? "✓" : "☐" ?></span>
<p>Agree to sync</p>
<p <?php echo $isSyncAgreed ? "hidden" : "" ?>>click <a id="scroll-sync" href="#">here</a>
to agree to sync your content</p>
</li>
<li class="<?php echo $isRewardClaimed && $isSyncAgreed ? "" : "disabled" ?>">
<span><?php echo $isRewardClaimed ? "✓" : "☐" ?></span>
<p>Claim your credits</p>
<p <?php echo ($isRewardClaimed === false && $isSyncAgreed === true) ? "" : "hidden" ?>>To
get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow
these instructions.</a></p>
</li>
</ul>
</div>
<main class="ancillary youtube">
<section class="section channel">
<div class="inner-wrap">
<?php if (preg_match('/^[A-Za-z0-9._%+-]+@plusgoogle.com$/', $statusData['email'])): ?>
<div id="email-google-plus-error" class="error">
Your email address is set as <?php echo $statusData['email']; ?>.<br>If this is not your email address, please <span id="scroll_email">change it below</span>.
</div>
<?php endif ?>
<div class="blocks">
<div class="block">
<p>Your Sync Status<br>
<span>
<?php switch ($statusData['status']) {
case "pending":
echo __("Pending Agreement");
break;
case "queued":
echo __("Queued");
break;
case "syncing":
echo __("Sync in Progress!");
break;
case "synced":
echo __("Content is Live!");
break;
case "failed":
echo __("Something went wrong, check back later!");
break;
case "finalized":
echo __("The content is in your control!");
break;
case "abandoned":
echo __("Cannot sync anymore!");
break;
} ?>
</span>
</p>
</div>
<div class="block">
<p>Subscribers<br>
<span><?php echo $statusData['subscribers'] === 0 ? "-" : $statusData['subscribers'] ?></span>
</p>
</div>
<div class="block">
<p>Videos<br>
<span><?php echo $statusData['videos'] === 0 ? "-" : $statusData['videos'] ?></span>
</p>
</div>
<div class="block">
<p>Expected Rewards<br>
<span><?php echo $statusData['expected_reward'] === 0 ? "-" : $statusData['expected_reward'] ?></span>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section settings">
<div class="inner">
<div class="content">
<div class="zigzag"></div>
<h1>Confirm your preferences</h1>
<form id="youtube_settings" action="/youtube/edit" method="post">
<div>
<input type="hidden" name="status_token" id="status_token" value="<?php echo $token ?>"/>
</div>
<?php
if ($error_message): echo "<div>" . "The following error occurred: " . $error_message . " For support please send an email to hello@lbry.com" . "</div>";
endif; ?>
<div class="block">
<label for="channel-name">LBRY Channel ID</label>
<input type="text" id="channel-name" name="new_preferred_channel"
placeholder="@YourPreferredChannelName"
value="<?php echo $statusData['lbry_channel_name']; ?>" <?php echo $statusData['editable'] ? "" : "disabled" ?> >
<div hidden id="channel-name-error" class="error">Channel is invalid or blank</div>
</div>
<div class="block">
<label for="email">Preferred Email</label>
<input type="text" id="email" name="new_email" placeholder="bill@gmail.com"
value="<?php echo $statusData['email']; ?>">
<div hidden id="email-error" class="error">Email is invalid or blank</div>
<div hidden id="email-google-plus-error" class="error">Google plus email addresses cannot be
used
</div>
</div>
<p <?php echo $statusData['has_verified_email'] ? "hidden" : "" ?> class="block full error">You need
to verify your email before continuing!</p>
<label for="sync-consent"
class="block full" <?php echo !$statusData['has_verified_email'] ? "hidden" : "" ?>>
<input name="sync_consent" id="sync-consent" type="checkbox"
<?php echo $isSyncAgreed ? "checked" : "" ?> <?php echo (($statusData['status'] == 'pending' || $statusData['status'] == 'queued') && !$statusData['transferred']) ? "" : "disabled "; ?>>I
want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms">these
terms</a>.
<p hidden id="sync-consent-error" class="error">In order to continue, you must agree to
sync.</p>
</label>
<div class="block">
<button type="submit" onClick="return submitEditForm()">Save Changes</button>
</div>
</form>
</div>
<h2><?php echo $isSyncAgreed && $isRewardClaimed ? "You're all set!" : "Almost done!" ?></h2>
<div class="confirmation-steps">
<ul class="bulletless">
<li>
<span>✓</span>
<p>Confirm your channel</p>
</li>
<li class="<?php echo $isSyncAgreed ? "" : "disabled" ?>">
<span><?php echo $isSyncAgreed ? "✓" : "☐" ?></span>
<p>Agree to sync</p>
</li>
<li class="<?php echo $isRewardClaimed && $isSyncAgreed ? "" : "disabled" ?>">
<span><?php echo $isRewardClaimed ? "✓" : "☐" ?></span>
<p>Claim your credits</p>
<p <?php echo ($isRewardClaimed === false && $isSyncAgreed === true) ? "" : "hidden" ?>>(to get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow these instructions</a>)</p>
</li>
</ul>
<hr/>
</div>
<table>
<thead style="font-size: 80%;">
<tr>
<th>Your Sync Status</th>
<th>Subscribers</th>
<th>Videos</th>
<th>Expected Rewards</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php switch ($statusData['status']) {
case "pending":
echo __("Pending Agreement");
break;
case "queued":
echo __("Queued");
break;
case "syncing":
echo __("Sync in Progress!");
break;
case "synced":
echo __("Content is Live!");
break;
case "failed":
echo __("Something went wrong, check back later!");
break;
case "finalized":
echo __("The content is in your control!");
break;
case "abandoned":
echo __("Cannot sync anymore!");
break;
} ?>
</td>
<td>
<?php echo $statusData['subscribers'] === 0 ? "-" : $statusData['subscribers'] ?>
</td>
<td>
<?php echo $statusData['videos'] === 0 ? "-" : $statusData['videos'] ?>
</td>
<td>
<?php echo $statusData['expected_reward'] === 0 ? "-" : $statusData['expected_reward'] ?>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="section settings">
<div class="inner-wrap">
<form id="youtube_settings" action="/youtube/edit" method="post">
<div>
<input type="hidden" name="status_token" id="status_token" value="<?php echo $token ?>"/>
</div>
<?php if ($error_message): echo "<div>" . "The following error occurred: " . $error_message . " For support please send an email to hello@lbry.com" . "</div>"; endif; ?>
<fieldset>
<legend>Confirm your preferences</legend>
<p <?php echo $statusData['has_verified_email'] ? "hidden" : "" ?> class="error-block">
You need to verify your email
</p>
<fieldset-group>
<fieldset-section>
<label for="channel-name">LBRY Channel ID</label>
<input
type="text" id="channel-name" name="new_preferred_channel"
placeholder="@YourPreferredChannelName"
value="<?php echo $statusData['lbry_channel_name']; ?>" <?php echo $statusData['editable'] ? "" : "disabled" ?>
/>
<div hidden id="channel-name-error" class="error">Channel is invalid or blank</div>
</fieldset-section>
<fieldset-section>
<label for="email">Preferred Email</label>
<input
type="text"
id="email"
name="new_email"
placeholder="bill@gmail.com"
value="<?php echo $statusData['email']; ?>"
/>
<div hidden id="email-error" class="error">Email is invalid or blank</div>
<div hidden id="email-google-plus-error" class="error">Google plus email addresses cannot be used</div>
</fieldset-section>
</fieldset-group>
<checkbox-element
<?php echo (($statusData['status'] === 'pending' || $statusData['status'] === 'queued') && !$statusData['transferred']) ? "" : "disabled "; ?>
<?php echo !$statusData['has_verified_email'] ? "hidden" : "" ?>
>
<input
id="sync_consent"
name="sync_consent"
type="checkbox"
<?php echo $isSyncAgreed ? "checked" : "" ?> <?php echo (($statusData['status'] === 'pending' || $statusData['status'] === 'queued') && !$statusData['transferred']) ? "" : "disabled "; ?>
/>
<label for="sync_consent" <?php echo !$statusData['has_verified_email'] ? "hidden" : "" ?>>
I want to sync my content to the LBRY network and agree to <a href="/faq/youtube-terms" target="_blank">these terms</a>
<p hidden id="sync-consent-error" class="error">In order to continue, you must agree to sync.</p>
</label>
<checkbox-toggle/>
</checkbox-element>
<div>
<button type="submit" onClick="return submitEditForm()">Save Changes</button>
</div>
</fieldset>
</form>
</div>
</section>
</main>

16
view/template/acquisition/youtube_status_redirect.php
View file

@ -1,11 +1,9 @@
<?php js_start() ?>
if (localStorage.getItem('status_token')) {
var status_token = localStorage.getItem('status_token');
url = '/youtube/status/' + status_token;
$(location).attr('href', url);
}
else {
$(location).attr('href', '/youtube');
}
if (localStorage.getItem("status_token")) {
const status_token = localStorage.getItem("status_token");
url = "/youtube/status/" + status_token;
$(location).attr("href", url);
} else {
$(location).attr("href", "/youtube");
}
<?php js_end() ?>

8
view/template/acquisition/youtube_token.php
View file

@ -1,8 +0,0 @@
<?php
$desired_lbry_channel_name = Request::encodeStringFromUser($_POST['desired_lbry_channel_name']);
if (!preg_match("/@[A-Za-z0-9_-]+$/", $desired_lbry_channel_name)) {
$desired_lbry_channel_name = "@" . $desired_lbry_channel_name;
}
AcquisitionActions::actionYoutubeToken($desired_lbry_channel_name);

2
view/template/content/credit-report.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1><?php echo htmlentities($post->getTitle()) ?></h1>
</div>
</section>

2
view/template/content/credit-reports.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Quarterly Credit Reports</h1>
</div>
</section>

2
view/template/content/faq-post.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Frequently Asked Questions</h1>
</div>
</section>

2
view/template/content/faq.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.faq.header}}</h1>
</div>
</section>

2
view/template/content/news-post.php
View file

@ -6,7 +6,7 @@
<section
class="hero hero--news<?php echo $post->getCover() ? '' : ' hero--half-height'?>"<?php echo $post->getCover() ? ' style="background-image: url(\'/img/blog-covers/' . $post->getCover() . '\')"' : ''?>
>
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1><?php echo htmlentities($post->getTitle()) ?></h1>
<h2>
<?php echo $post->getAuthorName() ?>

4
view/template/content/news.php
View file

@ -2,7 +2,7 @@
<main class="news ancillary">
<section class="hero hero--news" style="background-image: url(/img/bangalore.jpg); background-position: center 15%;">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{news.desk}}</h1>
<h2>{{news.musings}}</h2>
</div>
@ -10,7 +10,7 @@
<section>
<div class="inner-wrap">
<ul class="news-items">
<ul class="news-items bulletless">
<?php foreach ($posts as $post): ?>
<li class="news-item">
<h3>

2
view/template/content/roadmap.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height" style="background-image: url(/img/here-be-dragons.jpg); background-position: center;">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{roadmap.title}}</h1>
<h2>Future plans for the journey into the land of dragons</h2>
</div>

2
view/template/download/_list.php
View file

@ -15,7 +15,7 @@
<?php $buckets[floor($index++ / $columns)][] = ob_get_clean() ?>
<?php endforeach ?>
<ul class="download-cards">
<ul class="download-cards bulletless">
<?php foreach (array_filter($buckets) as $bucketRow): ?>
<li class="download-card"><?php echo implode("</li> <li class='download-card'>", $bucketRow) ?></li>
<?php endforeach ?>

2
view/template/download/get-no-os.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Use LBRY on your preferred platform</h1>
</div>
</section>

2
view/template/download/get.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>
<?php echo __('download.for-os2', ['%os%' => OS::OS_DETAIL($os)[5]]) ?>
</h1>

3
view/template/layout/basic.php
View file

@ -13,10 +13,7 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
<?php if (!strpos($_SERVER['REQUEST_URI'], 'youtube/')): ?>
<link rel="stylesheet" href="/components/dist/index.css"/>
<?php endif ?>
<?php foreach (Response::getCssAssets() as $src): ?>
<link rel="stylesheet" href="<?php echo $src?>"/>

19
view/template/mail/_settingsForm.php
View file

@ -54,25 +54,6 @@
<checkbox-toggle/>
</checkbox-element>
<?php endforeach ?>
<?php js_start() ?>
document.querySelectorAll("checkbox-toggle").forEach(toggle => {
toggle.addEventListener("click", event => {
const siblings = event.target.parentElement.children;
for (const sibling of siblings) {
switch(true) {
case sibling.tagName.toLowerCase() === "label":
sibling.click();
break;
default:
break;
}
}
});
});
<?php js_end() ?>
</section>
</form>
<?php endif ?>

2
view/template/mail/settings.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.email_settings}}</h1>
</div>
</section>

2
view/template/mail/unsubscribe.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.unsubscribe}}</h1>
</div>
</section>

2
view/template/page/3d-printing.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(https://spee.ch/4/LBRYopoly)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Get paid to 3D print!</h1>
</div>
</section>

2
view/template/page/400.php
View file

@ -1,6 +1,6 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.badrequest}}</h1>
</div>
</section>

2
view/template/page/404.php
View file

@ -1,6 +1,6 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Page Not Found (404)</h1>
</div>
</section>

2
view/template/page/405.php
View file

@ -1,6 +1,6 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.badmethod}}</h1>
</div>
</section>

2
view/template/page/aasi.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/bangalore.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes You To The Blockchain Workshop</h1>
<h3>We're excited to share LBRY with you!</h3>
</div>

2
view/template/page/android-alpha.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/droid1.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Testing... Testing...</h1>
<h3>LBRY needs alpha testers for our Android app!</h3>
</div>

2
view/template/page/bangalore.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/table2.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes You To The Bangalore Blockchain Application Development Meetup</h1>
<h3>We're excited to share about LBRY with you!</h3>
</div>

2
view/template/page/canary.php
View file

@ -2,7 +2,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Warrant Canary</h1>
</div>
</section>

2
view/template/page/college.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/table2.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Wanna Meet Up?</h1>
<h3>LBRY is looking for ambassadors to spread the word to College campuses and Meetup groups worldwide!</h3>
</div>

2
view/template/page/contact.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Get in Touch</h1>
</div>
</section>

2
view/template/page/cu.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/clement-vit.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes Chandigarh University Students</h1>
<h3>We're excited to share LBRY with you!</h3>
</div>

2
view/template/page/forklist.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Blockchain Fork Updates</h1>
</div>
</section>

2
view/template/page/game.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/close-up-of-gaming-joystick.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Level UP with LBRY Network</h1>
<h3>We're excited to share LBRY with you!</h3>
</div>

2
view/template/page/join-us.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Join Team Content Freedom</h1>
</div>
</section>

2
view/template/page/lbrypress.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/blog-covers/censorship.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Independent Hosting for Independent Media</h1>
<h3>Don't leave your fate in the hands of Silicon Valley</h3>
</div>

2
view/template/page/lpu.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/table2.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes LPU Students</h1>
<h3>We're excited to share about LBRY with you!</h3>
</div>

2
view/template/page/meet.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/table2.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Wanna Meet Up?</h1>
<h3>LBRY is looking for ambassadors to spread the word to College campuses and Meetup groups worldwide!</h3>
</div>

2
view/template/page/newslist.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Join Our List for LBRY Updates</h1>
</div>
</section>

2
view/template/page/press-kit.php
View file

@ -5,7 +5,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{press.title}}</h1>
</div>
</section>

2
view/template/page/privacypolicy.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero hereo--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Inc. Privacy Policy</h1>
<style>

2
view/template/page/team.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(https://spee.ch/3cb82a81e95c147686dbf90e9983640939461c53/everyone-banner3.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>{{page.team.header}}</h1>
<h2>Teamwork makes the dream work.</h2>
</div>

2
view/template/page/termsofservice.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Terms of Service</h1>
</div>
</section>

2
view/template/page/vit.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/clement-vit.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes WomenTechies Hackathon Participants</h1>
<h3>We're excited to meet the next generation of problem solvers!</h3>
</div>

2
view/template/page/what.php
View file

@ -4,7 +4,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/altamira-bison.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>Art in the Internet Age</h1>
<h3>An introduction to LBRY</h3>
</div>

2
view/template/page/ysu.php
View file

@ -3,7 +3,7 @@
<main class="ancillary">
<section class="hero" style="background-image: url(/img/hackysu2.jpg)">
<div class="inner-wrap inner-wrap--hero">
<div class="inner-wrap inner-wrap--center-hero">
<h1>LBRY Welcomes HackYSU</h1>
<h3>We're excited to share LBRY with you!</h3>
</div>

18
web/js/global.js
View file

@ -93,6 +93,24 @@ $(document).ready(function() {
// Allow checkboxes to be checked, rather than just the label
document.querySelectorAll("checkbox-toggle").forEach(toggle => {
toggle.addEventListener("click", event => {
const siblings = event.target.parentElement.children;
for (const sibling of siblings) {
switch(true) {
case sibling.tagName.toLowerCase() === "label":
sibling.click();
break;
default:
break;
}
}
});
});
// Automatically open external links in new tabs
document.querySelectorAll("a[href]").forEach(link => {
if (link.href.indexOf(location.hostname) === -1) {

12
web/js/yt2/ScrollToPlugin.min.js vendored
View file

@ -1,12 +0,0 @@
/*!
* VERSION: 1.7.5
* DATE: 2015-02-26
* UPDATES AND DOCS AT: http://greensock.com
*
* @license Copyright (c) 2008-2015, GreenSock. All rights reserved.
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
**/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";var t=document.documentElement,e=window,i=function(i,r){var s="x"===r?"Width":"Height",n="scroll"+s,a="client"+s,o=document.body;return i===e||i===t||i===o?Math.max(t[n],o[n])-(e["inner"+s]||t[a]||o[a]):i[n]-i["offset"+s]},r=_gsScope._gsDefine.plugin({propName:"scrollTo",API:2,version:"1.7.5",init:function(t,r,s){return this._wdw=t===e,this._target=t,this._tween=s,"object"!=typeof r&&(r={y:r}),this.vars=r,this._autoKill=r.autoKill!==!1,this.x=this.xPrev=this.getX(),this.y=this.yPrev=this.getY(),null!=r.x?(this._addTween(this,"x",this.x,"max"===r.x?i(t,"x"):r.x,"scrollTo_x",!0),this._overwriteProps.push("scrollTo_x")):this.skipX=!0,null!=r.y?(this._addTween(this,"y",this.y,"max"===r.y?i(t,"y"):r.y,"scrollTo_y",!0),this._overwriteProps.push("scrollTo_y")):this.skipY=!0,!0},set:function(t){this._super.setRatio.call(this,t);var r=this._wdw||!this.skipX?this.getX():this.xPrev,s=this._wdw||!this.skipY?this.getY():this.yPrev,n=s-this.yPrev,a=r-this.xPrev;this._autoKill&&(!this.skipX&&(a>7||-7>a)&&i(this._target,"x")>r&&(this.skipX=!0),!this.skipY&&(n>7||-7>n)&&i(this._target,"y")>s&&(this.skipY=!0),this.skipX&&this.skipY&&(this._tween.kill(),this.vars.onAutoKill&&this.vars.onAutoKill.apply(this.vars.onAutoKillScope||this._tween,this.vars.onAutoKillParams||[]))),this._wdw?e.scrollTo(this.skipX?r:this.x,this.skipY?s:this.y):(this.skipY||(this._target.scrollTop=this.y),this.skipX||(this._target.scrollLeft=this.x)),this.xPrev=this.x,this.yPrev=this.y}}),s=r.prototype;r.max=i,s.getX=function(){return this._wdw?null!=e.pageXOffset?e.pageXOffset:null!=t.scrollLeft?t.scrollLeft:document.body.scrollLeft:this._target.scrollLeft},s.getY=function(){return this._wdw?null!=e.pageYOffset?e.pageYOffset:null!=t.scrollTop?t.scrollTop:document.body.scrollTop:this._target.scrollTop},s._kill=function(t){return t.scrollTo_x&&(this.skipX=!0),t.scrollTo_y&&(this.skipY=!0),this._super._kill.call(this,t)}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();

383
web/js/yt2/app.js
View file

@ -1,189 +1,179 @@
'use strict';
"use strict";
/**
* App
* Driving application.
*/
function App(api,parameters) {
this._elem = window;
this._html = document.getElementsByTagName('html')[0];
this._body = document.body;
this._elem.addEventListener('load',this._onLoad.bind(this),false);
function App(api, parameters) {
this._elem = window;
this._html = document.getElementsByTagName("html")[0];
this._body = document.body;
this._elem.addEventListener("load", this._onLoad.bind(this), false);
}
App.prototype._onLoad = function() {
// Hero button
this._button = document.getElementsByClassName('hero')[0].getElementsByClassName('button')[0];
// Header animation setup
this._points = [];
this._lines = [];
// To top button
this._toTop = document.getElementsByClassName('to-top')[0];
this._isVisible = false;
Array.prototype.slice.call(document.getElementsByClassName("shape")[0].getElementsByTagName("div"), 0).forEach(function(point, i) {
const p = new Point(point);
this._points.push(p);
// Header animation setup
this._points = [];
this._lines = [];
Array.prototype.slice.call(document.getElementsByClassName('shape')[0].getElementsByTagName('div'),0).forEach(function(point,i){
var p = new Point(point);
this._points.push(p);
var path = document.getElementsByTagName('path')[i];
var index = parseFloat(path.getAttribute('data-from'));
var origin = {x:window.innerWidth*0.4,y:0};
var from = index < 0 ? origin:this._points[index].getOffset();
var to = this._points[i].getOffset();
var l = new Line(path,from,to);
this._lines.push(l);
},this);
const path = document.getElementsByTagName("path")[i];
const index = parseFloat(path.getAttribute("data-from"));
// Section how
this._how = document.getElementsByClassName('how')[0];
this._percent = 0;
this._offset = 100;
this._journey = this._how.getElementsByClassName('journey')[0];
this._steps = Array.prototype.slice.call(this._how.getElementsByClassName('step'),0);
this._start = this._how.offsetTop - this._how.scrollTop - window.innerHeight / 2 - this._offset;
this._end = this._start + window.innerHeight / 2;
const origin = {
x: window.innerWidth * 0.4,
y: 0
};
// XHR request
this._getDataFromCoinMarketCap();
const from = index < 0 ?
origin :
this._points[index].getOffset();
// Binding events
this._bindEvents();
const to = this._points[i].getOffset();
const l = new Line(path, from, to);
this._lines.push(l);
}, this);
// Section how
this._how = document.getElementsByClassName("yt-how")[0];
this._percent = 0;
this._offset = 100;
this._journey = this._how.getElementsByClassName("journey")[0];
this._steps = Array.prototype.slice.call(this._how.getElementsByClassName("step"), 0);
this._start = this._how.offsetTop - this._how.scrollTop - window.innerHeight / 2 - this._offset;
this._end = this._start + window.innerHeight / 2;
// XHR request
this._getDataFromCoinMarketCap();
// Binding events
this._bindEvents();
};
App.prototype._getDataFromCoinMarketCap = function(e) {
this._xhr = new XMLHttpRequest();
this._xhr.addEventListener('readystatechange',this._onReadyStateChange.bind(this),false);
this._xhr.open('GET','https://api.lbry.com/lbc/exchange_rate');
this._xhr.send();
this._xhr = new XMLHttpRequest();
this._xhr.addEventListener("readystatechange", this._onReadyStateChange.bind(this), false);
this._xhr.open("GET", "https://api.lbry.com/lbc/exchange_rate");
this._xhr.send();
};
App.prototype._onReadyStateChange = function(e) {
if (this._xhr.readyState === 4) {
if (this._xhr.status === 200) {
const response = JSON.parse(this._xhr.responseText);
const lines = Array.prototype.slice.call(document.getElementsByClassName('line'),0);
const price = parseFloat(response.data.lbc_usd);
if (this._xhr.readyState === 4) {
if (this._xhr.status === 200) {
const response = JSON.parse(this._xhr.responseText);
const lines = document.querySelectorAll("[data-id*='amount-']");
const price = parseFloat(response.data.lbc_usd);
lines.forEach(function(line) {
const subscriber = line.getElementsByTagName('p')[0];
const monthly = line.getElementsByTagName('p')[1];
const amount = line.getElementsByTagName('p')[2];
const total = parseFloat(monthly.innerHTML.replace(new RegExp(',', 'g'), '')) * price;
lines.forEach(function(line) {
const amount = line.dataset.id.split("-")[1];
const total = amount * price;
amount.innerHTML = this._addCommas(total.toFixed(2)) + ' <i>USD</i>';
},this);
line.innerHTML = this._addCommas(total.toFixed(2)) + " <small class='meta'>USD</small>";
}, this);
document.getElementsByClassName('current-value')[0].innerHTML = "(" + price.toFixed(4) + " USD)";
}
document.getElementsByClassName("current-value")[0].innerHTML = `(${price.toFixed(4)} USD)`;
}
}
};
App.prototype._addCommas = function(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
nStr += "";
const rgx = /(\d+)(\d{3})/;
const x = nStr.split(".");
const x2 = x.length > 1 ?
"." + x[1] :
"";
let x1 = x[0];
while (rgx.test(x1))
x1 = x1.replace(rgx, "$1" + "," + "$2");
return x1 + x2;
};
App.prototype._bindEvents = function() {
var click = 'ontouchstart' in document ? 'touchstart':'click';
this._button.addEventListener(click,this._goToContent.bind(this),false);
this._toTop.addEventListener(click,this._goToTop.bind(this),false);
TweenMax.ticker.addEventListener('tick',this._onTick.bind(this));
this._elem.addEventListener('resize',this._onResize.bind(this),false);
};
App.prototype._goToContent = function() {
TweenMax.to(this._elem,0.8,{scrollTo:window.innerHeight});
};
App.prototype._goToTop = function() {
TweenMax.to(this._elem,0.8,{scrollTo:0});
};
App.prototype._onTick = function() {
// Header animation
this._points.forEach(function(point,i) {
var line = this._lines[i];
var path = line.getElement();
var index = parseFloat(path.getAttribute('data-from'));
var origin = {x:window.innerWidth*0.4,y:0};
var from = index < 0 ? origin:this._points[index].getOffset();
var to = point.getOffset();
line.draw(from,to);
},this);
// Get current scroll y position
var current = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
// To top animation
if (current >= window.innerHeight) {
if (!this._isVisible) {
this._isVisible = true;
TweenMax.to(this._toTop,0.4,{autoAlpha:1,ease:Quint.easeOut});
}
} else {
if (this._isVisible) {
this._isVisible = false;
TweenMax.to(this._toTop,0.4,{autoAlpha:0,ease:Quint.easeOut});
}
}
// How section animation on scroll
if (window.innerWidth > 1024) {
var percent;
if (current <= this._start) {
percent = 0;
} else if (current >= this._end) {
percent = 100;
} else {
percent = (current-this._start) / (window.innerHeight / 2) * 100;
}
this._percent += (percent - this._percent) * 0.1;
if (this._percent < 0.1) {
this._percent = 0;
} else if (this._percent > 99.9) {
this._percent = 100;
}
TweenLite.set(this._journey,{width:this._percent+'%'});
this._steps.forEach(function(step) {
var enableAt = parseFloat(step.getAttribute('data-enable'));
if (this._percent > enableAt) {
if (step.className.indexOf('enabled') !== -1) {
step.className = step.className.replace(' enabled','');
}
} else {
if (step.className.indexOf('enabled') === -1) {
step.className += ' enabled';
}
}
},this);
} else {
this._steps.forEach(function(step) {
if (step.className.indexOf('enabled') === -1) {
step.className += ' enabled';
}
},this);
}
TweenMax.ticker.addEventListener("tick", this._onTick.bind(this));
this._elem.addEventListener("resize", this._onResize.bind(this), false);
};
App.prototype._onResize = function() {
this._points.forEach(function(point,i) {
point.resetOrigin();
},this);
this._start = this._how.offsetTop - this._how.scrollTop - window.innerHeight / 2 - this._offset;
this._end = this._start + window.innerHeight / 2;
this._points.forEach(function(point, i) {
point.resetOrigin();
}, this);
this._start = this._how.offsetTop - this._how.scrollTop - window.innerHeight / 2 - this._offset;
this._end = this._start + window.innerHeight / 2;
};
App.prototype._onTick = function() {
// Header animation
this._points.forEach(function(point, i) {
const line = this._lines[i];
const path = line.getElement();
const index = parseFloat(path.getAttribute("data-from"));
const origin = {
x: window.innerWidth * 0.4,
y: 0
};
const from = index < 0 ?
origin :
this._points[index].getOffset();
const to = point.getOffset();
line.draw(from, to);
}, this);
// Get current scroll y position
const current = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
// How section animation on scroll
if (window.innerWidth > 1024) {
let percent;
if (current <= this._start) {
percent = 0;
} else if (current >= this._end) {
percent = 100;
} else {
percent = (current-this._start) / (window.innerHeight / 2) * 100;
}
this._percent += (percent - this._percent) * 0.1;
if (this._percent < 0.1)
this._percent = 0;
else if (this._percent > 99.9)
this._percent = 100;
TweenLite.set(this._journey, {
width: this._percent + "%"
});
this._steps.forEach(function(step) {
const enableAt = parseFloat(step.getAttribute("data-enable"));
if (this._percent > enableAt) {
if (step.className.indexOf("enabled") !== -1)
step.className = step.className.replace(" enabled", "");
} else {
if (step.className.indexOf("enabled") === -1)
step.className += " enabled";
}
}, this);
} else {
this._steps.forEach(function(step) {
if (step.className.indexOf("enabled") === -1)
step.className += " enabled";
}, this);
}
};
@ -193,57 +183,84 @@ App.prototype._onResize = function() {
* Header animation
*/
function Point(elem) {
this._elem = elem;
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 2;
this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
this._x = 0;
this._y = 0;
if (this._elem.className.indexOf('circle') !== -1) {
this._move();
}
this._elem = elem;
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 2;
this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
this._x = 0;
this._y = 0;
if (this._elem.className.indexOf("circle") !== -1)
this._move();
}
Point.prototype._move = function() {
var distance = 20;
TweenLite.to(this._elem,3+3*Math.random(),{x:-distance+Math.random()*(distance*2),y:-distance+Math.random()*(distance*2),ease:Power2.easeOutIn,onUpdate:this._onUpdate,onUpdateScope:this,onComplete:this._move,onCompleteScope:this});
const distance = 20;
TweenLite.to(this._elem, 3 + 3 * Math.random(), {
x: -distance + Math.random() * (distance * 2),
y: -distance + Math.random() * (distance * 2),
ease: Power2.easeOutIn,
onUpdate: this._onUpdate,
onUpdateScope: this,
onComplete: this._move,
onCompleteScope: this
});
};
Point.prototype._onUpdate = function() {
this._x = this._elem._gsTransform.x;
this._y = this._elem._gsTransform.y;
this._x = this._elem._gsTransform.x;
this._y = this._elem._gsTransform.y;
};
Point.prototype.getOffset = function() {
return {
x: this._originX + this._x,
y: this._originY + this._y
}
return {
x: this._originX + this._x,
y: this._originY + this._y
}
};
Point.prototype.resetOrigin = function() {
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 2;
this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 2;
this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
};
/**
* Line
* Header animation
*/
function Line(elem,from,to) {
this._elem = elem;
this.draw(from,to);
function Line(elem, from, to) {
this._elem = elem;
this.draw(from,to);
}
Line.prototype.getElement = function() {
return this._elem;
return this._elem;
};
Line.prototype.draw = function(from,to) {
this._elem.setAttribute('d','M '+from.x+','+from.y+' L '+to.x+','+to.y);
Line.prototype.draw = function(from, to) {
this._elem.setAttribute("d", "M " + from.x + "," + from.y + " L " + to.x + "," + to.y);
};
// Let's start :)
var app = new App();
new App();
const youtubeCtas = document.querySelectorAll("[data-id='scroll-to-claim']");
youtubeCtas.forEach(cta => {
cta.onclick = () => {
const element = document.getElementById("claim-section");
const elementOffset = element.offsetTop - 2;
window.scroll({ top: elementOffset, behavior: "smooth" });
setTimeout(() => { // give the scroll time to finish before focusing
document.getElementById("lbry_channel_name").focus();
}, 300);
};
});

12
web/js/yt2/youtube_video.js
View file

@ -1,8 +1,10 @@
"use strict";
function playVideo(id) {
var myVideo = document.getElementById(id);
const video = document.getElementById(id);
myVideo.play();
$('#' + id).prop("controls", true);
$('#play-' + id).hide();
}
video.play();
video.controls = true;
}

37
web/scss/_layout.scss
View file

@ -27,7 +27,13 @@ h2,
h3,
h4,
h5 {
font-weight: 600;
&:not(.weight-light):not(.weight-normal) {
font-weight: 600;
}
&.weight-light {
font-weight: 200;
}
}
h1 {
@ -75,7 +81,7 @@ h4 {
font-size: 1rem;
}
margin-bottom: 1rem;
// margin-bottom: 1rem;
}
hr {
@ -141,6 +147,10 @@ video {
width: 100%;
}
input::placeholder {
opacity: 0.4;
}
.button--google-play {
@ -180,6 +190,18 @@ video {
display: none;
}
.align-text--center {
text-align: center;
}
.align-text--left {
text-align: left;
}
.align-text--right {
text-align: right;
}
.inner-wrap {
max-width: 1200px;
margin-right: auto;
@ -191,7 +213,7 @@ video {
text-align: center;
}
&.inner-wrap--hero {
&.inner-wrap--center-hero {
align-items: center;
display: flex;
flex-direction: column;
@ -200,6 +222,15 @@ video {
position: relative;
}
&.inner-wrap--center-left {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
position: relative;
}
&.inner-wrap--footer-bottom {
padding-top: 0.75rem;

1
web/scss/all.scss
View file

@ -23,5 +23,6 @@
@import "pages/news";
@import "pages/roadmap";
@import "pages/soon";
@import "pages/youtube";
@import "layout";

25
web/scss/components/_form.scss
View file

@ -3,3 +3,28 @@ checkbox-element {
color: initial;
}
}
input-submit {
position: relative;
}
label {
&.symbol-prefix {
width: 2rem; height: 100%;
color: var(--lbry-gray-4);
display: block;
line-height: 2.3;
padding-left: 0.3rem;
position: absolute;
text-align: center;
+ input {
padding-left: 2rem;
}
}
a {
font-weight: 600;
}
}

11
web/scss/components/_hero.scss
View file

@ -5,7 +5,6 @@
background-size: cover;
color: var(--lbry-white);
position: relative;
text-align: center;
text-shadow: 0 0 0.2rem rgba($lbry-black, 0.7);
&::before {
@ -19,7 +18,11 @@
}
}
&:not(.hero--half-height):not(.hero--plain) {
&:not(.hero--plain):not(.hero--youtube) {
text-align: center;
}
&:not(.hero--half-height):not(.hero--plain):not(.hero--youtube) {
@media (min-width: 951px) {
height: 500px;
}
@ -47,6 +50,10 @@
padding-top: 2rem;
}
&.hero--youtube {
height: calc(100vh - 5rem);
}
[class*="icon-"].icon-fw {
width: 3rem;
}

17
web/scss/pages/_ancillary.scss
View file

@ -22,6 +22,7 @@
margin-top: 1.25rem;
}
+ footer,
+ form,
+ h1,
+ h2,
@ -80,6 +81,11 @@
li {
list-style-position: inherit;
ol,
ul {
padding-left: 1rem;
}
p {
display: inline;
}
@ -95,12 +101,9 @@
}
ul {
&:not(.download-cards) {
padding-left: 1.3rem;
}
&:not(.download-cards):not(.news-items) {
&:not(.bulletless) {
list-style-type: disc;
padding-left: 1.3rem;
}
}
@ -126,6 +129,10 @@
width: 100%;
}
pre {
margin-top: 1.25rem;
}
blockquote {
padding: 1rem 0 1rem 2rem;
position: relative;

447
web/scss/pages/_youtube.scss Normal file
View file

@ -0,0 +1,447 @@
$lbry-yt-blue: mix($lbry-blue-5, $lbry-black, 50%);
.ytsync-previews {
display: flex;
justify-content: space-between;
padding-top: 1.25rem;
@media (max-width: 950px) {
flex-direction: column;
}
}
.ytsync-preview {
position: relative;
@media (min-width: 951px) {
width: 33%;
}
&:not(:hover) {
&::before {
opacity: 0;
}
}
&:hover {
&::before {
opacity: 1;
}
}
&::before {
width: 0; height: 0;
border-top: 2rem solid transparent;
border-bottom: 2rem solid transparent;
border-left: 3.5rem solid var(--lbry-white);
content: "";
pointer-events: none;
position: absolute;
top: calc(50% - 3rem);
transition: opacity 0.2s;
}
video {
cursor: pointer;
margin-bottom: 0.5rem;
}
}
.v-card {
display: flex;
figure {
margin-bottom: 0;
margin-right: 1.25rem;
width: 12rem;
}
info {
display: block;
padding-top: 4rem;
}
}
.error-block,
.sync-status {
margin: 0 auto 0.5rem; padding: 0.5rem 0.75rem;
border-style: solid;
border-width: 1px;
font-size: 0.8rem;
@media (min-width: 951px) {
max-width: 80%;
}
}
.error-block {
background-color: var(--lbry-red-4);
border-color: var(--lbry-red-5);
color: var(--lbry-white);
}
.sync-status {
background-color: rgba($lbry-black, 0.05);
border-color: var(--lbry-gray-3);
}
.hero--youtube {
.shape {
width: 100%; height: 100%;
top: 0; left: 0;
position: absolute;
svg {
width: 100%; height: 100%;
path {
fill: none;
stroke: $lbry-yt-blue;
stroke-width: 0.3px;
}
}
.circle,
.dot {
width: 60px; height: 60px;
background-color: $lbry-yt-blue;
border-radius: 50%;
margin: -30px 0 0 -30px;
position: absolute;
}
.circle {
background-color: $lbry-yt-blue;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 10px 50px 0 rgba($lbry-black, 0.25);
&.one {
width: 76px; height: 76px;
top: 31%; left: 50%;
background-image: url("../img/youtube/core@2x.png");
background-size: 25px;
margin: -38px 0 0 -38px;
}
&.two {
top: 20%; left: 75%;
background-image: url("../img/youtube/video@2x.png");
background-size: 15px;
}
&.three {
top: 73%; left: 82%;
background-image: url("../img/youtube/music@2x.png");
background-size: 13px;
}
}
.dot {
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
&.a {
top: 34%; left: 72%;
}
&.b {
top: 27%; left: 80%;
}
&.c {
top: 81%; left: 75%;
}
&.d {
top: 92%; left: 76%;
}
&.e {
top: 81%; left: 93%;
}
&.f {
top: 109%; left: 90%;
}
}
}
button {
&:hover {
color: initial;
}
}
}
.youtube {
&.youtube--landing {
section {
&:nth-child(odd) {
background-color: rgba($lbry-black, 0.05);
}
}
input-submit {
margin-right: auto;
margin-left: auto;
@media (min-width: 951px) {
max-width: 80%;
}
}
}
.channel {
h2 {
@media (min-width: 951px) {
text-align: center;
}
}
}
.confirmation-steps {
padding-top: 1rem;
ul {
display: flex;
margin-bottom: 3rem;
@media (min-width: 951px) {
flex-direction: row;
}
@media (max-width: 950px) {
flex-direction: column;
}
}
li {
@media (min-width: 951px) {
text-align: center;
width: 33%;
}
@media (max-width: 950px) {
width: 100%;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
}
&:not(.disabled) {
span {
background-color: var(--lbry-teal-3);
padding-top: 0.5rem;
}
}
&.disabled {
span {
background-color: var(--lbry-gray-3);
padding-top: 0.3rem;
padding-left: 0.1rem;
// Mobile Safari override
@media not all and (min-resolution: 0.001dpcm) {
font-size: 1rem;
padding-top: 1rem;
}
}
}
p {
@media (max-width: 950px) {
display: inline-block;
position: relative;
top: -0.3rem;
}
}
span {
width: 3rem; height: 3rem;
border-radius: 50%;
color: var(--lbry-white);
cursor: default;
font-size: 2rem;
line-height: 1;
text-align: center;
@media (min-width: 951px) {
display: block;
margin: 0 auto 0.5rem;
}
@media (max-width: 950px) {
display: inline-block;
margin-right: 0.5rem;
}
}
}
}
section {
&.hero {
margin-bottom: 0;
}
&:not(.hero) {
margin-bottom: 0;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
fieldset-group {
@media (max-width: 950px) {
flex-direction: column;
fieldset-section {
width: 100%;
}
}
}
checkbox-element {
&[disabled] {
checkbox-toggle {
border-color: initial;
opacity: 0.3;
}
label {
opacity: 0.3;
a {
pointer-events: initial;
}
}
}
&[hidden] {
display: none;
}
}
}
.yt-how {
ol {
@media (min-width: 951px) {
display: none;
}
}
.steps {
width: 100%; height: 260px;
margin-top: 80px;
position: relative;
@media (max-width: 950px) {
display: none;
}
.journey,
.path {
background-position: 0 0;
background-repeat: no-repeat;
background-size: 752px;
height: 287px;
position: absolute;
}
.journey {
top: 0; left: 0;
background-image: url("../img/youtube/path-complete@2x.png");
overflow: hidden;
width: 120px;
}
.path {
top: -52px; left: 0;
background-image: url("../img/youtube/path@2x.png");
width: 752px;
}
}
.step {
position: absolute;
&.enabled {
.circle {
background-color: var(--lbry-gray-5);
}
.text {
color: var(--lbry-gray-5);
}
}
&.one {
top: 0; left: 60px;
.text {
width: 226px;
}
}
&.two {
top: 160px; left: 225px;
.text {
width: 552px;
}
}
&.three {
top: 0; left: 550px;
.text {
width: 390px;
}
}
.circle {
width: 62px; height: 62px;
top: 0; left: 0;
background-color: $lbry-yt-blue;
border-radius: 50%;
box-shadow: 0 20px 50px 0 rgba($lbry-black, 0.15);
color: var(--lbry-white);
font-size: 24px;
font-weight: 600;
line-height: 62px;
position: absolute;
text-align: center;
transition: background-color 0.4s;
}
.text {
top: 0; left: 82px;
color: $lbry-yt-blue;
font-size: 18px;
font-weight: 600;
line-height: 3.4;
position: absolute;
transition: color 0.4s;
}
}
}

1884
web/scss/youtube.scss
View file

File diff suppressed because it is too large Load diff