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

Redesign

Browse source
This commit is contained in:
ポール ウェッブ 2019-04-05 16:04:05 -05:00
parent d9e0168610
commit 87d594469f
65 changed files with 1171 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('/dmca', 'ReportActions::executeDmca');
$router->any('/youtube/sub', 'AcquisitionActions::executeYouTubeSub');
$router->post('/youtube/edit', 'AcquisitionActions::executeYoutubeEdit'); $router->post('/youtube/edit', 'AcquisitionActions::executeYoutubeEdit');
$router->post('/youtube/token', 'AcquisitionActions::executeYoutubeToken'); $router->post('/youtube/token', 'AcquisitionActions::executeYoutubeToken');
$router->any('/youtube/status/{token}', 'AcquisitionActions::executeYoutubeStatus'); $router->any('/youtube/status/{token}', 'AcquisitionActions::executeYoutubeStatus');

9
controller/Session.class.php
View file

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

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

@ -2,55 +2,11 @@
class AcquisitionActions extends Actions 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 = '') public static function executeYouTube(string $version = '')
{ {
if (isset($_GET['error_message'])) { return ['acquisition/youtube', [
$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, [
'reward' => LBRY::youtubeReward(), '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() 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) public static function executeYoutubeStatus(string $token)
{ {
if (isset($_GET['error_message'])) { $data = LBRY::statusYoutube($token);
$error_message = Request::encodeStringFromUser($_GET['error_message']); 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', [ return ['acquisition/youtube_status', [
'token' => $token, 'token' => $token,
'status_token' => $data, '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) public static function actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent)
{ {
$current_value = LBRY::statusYoutube($status_token); $current_value = LBRY::statusYoutube($status_token);
@ -109,7 +62,8 @@ class AcquisitionActions extends Actions
} }
if ($status['success'] == false) { 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 { } else {
Controller::redirect("/youtube/status/" . $status_token); Controller::redirect("/youtube/status/" . $status_token);
} }
@ -123,31 +77,4 @@ class AcquisitionActions extends Actions
{ {
return ['acquisition/youtube_status_redirect']; 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; 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) protected static function post($endpoint, $data)
{ {
return static::request(Curl::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')); $all_css = $scssCompiler->compile(file_get_contents(self::SCSS_DIR . '/all.scss'));
file_put_contents(self::CSS_DIR . '/all.css', $all_css); 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() 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> <body>
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1 id="title">Almost Done!</h1>
</div> </div>
</section> </section>

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

@ -33,7 +33,7 @@
<body> <body>
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1 id="title">Almost Done!</h1>
</div> </div>
</section> </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>

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

@ -1,193 +1,243 @@
<?php <?php
Response::setCssAssets(['/css/youtube.css']); Response::addJsAsset('/js/yt2/TweenMax.min.js');
Response::addJsAsset('/js/yt2/TweenMax.min.js'); Response::addJsAsset('/js/yt2/app.js');
Response::addJsAsset('/js/yt2/ScrollToPlugin.min.js'); Response::addJsAsset('/js/yt2/FormValidation.js');
Response::addJsAsset('/js/yt2/app.js'); Response::addJsAsset('/js/yt2/SyncStatus.js');
Response::addJsAsset('/js/yt2/FormValidation.js'); Response::addJsAsset('/js/yt2/youtube_video.js');
Response::addJsAsset('/js/yt2/SyncStatus.js'); Response::setMetaTitle("LBRY YouTube Partner Program");
Response::addJsAsset('/js/yt2/youtube_video.js'); Response::setMetaDescription("Put your content on the blockchain, experience true content freedom, and earn rewards.");
Response::setMetaTitle("LBRY YouTube Partner Program"); Response::addMetaImage(Request::getHostAndProto() . '/img/lbry-partner.png');
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" 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 <?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;?> 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"> <form id="youtube_claim" method="post" action="/youtube/token">
<div class="form-inner" > <div hidden id="sync-status" class="sync-status"></div>
<div class="block">
<input id="lbry_channel_name" type="text" name="desired_lbry_channel_name" placeholder="Enter your channel name" /> <input-submit>
<label>@</label> <label class="symbol-prefix">@</label>
<div hidden id="lbry_error" class="error">LBRY channel name is not valid or blank</div> <input
</div> 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>
</form> </form>
<div class="block">
<input type="submit" value="Claim now" onClick="return submitDetailsForm()"/> <small class="meta">
</div>
<div 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. 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> </div>
</div> </section>
</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>
<div class="text"> <section>
<p>@3Blue1Brown</p> <div class="rewards section inner-wrap">
</div> <h3>Getting credits for your channel</h3>
</div> <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="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"> <h4>
<p>@CasuallyExplained</p> Subscriber Levels
</div> <small class="meta">LBC <span class="current-value"></span></small>
</div> </h4>
<div class="box">
<div class="image" > <table>
<div id="play-video3" class="to-play" onclick="playVideo('video3')"><span></span></div> <thead style="font-size: 80%;">
<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> <tr>
</div> <th>Your Current YouTube Subscribers</th>
<div class="text"> <th>LBC Tokens</th>
<p>@ColinsLastStand</p> <th>USD Value</th>
</div> </tr>
</div> </thead>
</div>
<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>
</div> </section>
</section>
<section class="how section"> <section>
<div class="inner"> <div class="yt-how inner-wrap">
<div class="content"> <h3>Getting on LBRY is easy</h3>
<h1>Getting On LBRY Is Easy</h1>
<p>When you claim your channel your most recent 1,000 YouTube videos will be automatically copied to your LBRY channel.</p> <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="steps">
<div class="path"> <div class="path">
<div class="journey"></div> <div class="journey"></div>
</div> </div>
<div class="step one enabled" data-enable="12"> <div class="step one enabled" data-enable="12">
<div class="circle">1</div> <div class="circle">1</div>
<p class="text">Claim your channel</p> <p class="text">Claim your channel</p>
</div> </div>
<div class="step two enabled" data-enable="33"> <div class="step two enabled" data-enable="33">
<div class="circle">2</div> <div class="circle">2</div>
<p class="text">Authorize your content</p> <p class="text">Authorize your content</p>
</div> </div>
<div class="step three enabled" data-enable="75"> <div class="step three enabled" data-enable="75">
<div class="circle">3</div> <div class="circle">3</div>
<p class="text">Users watch your content on LBRY</p> <p class="text">Users watch your content on LBRY</p>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section>
<section class="rewards section"> <section class="align-text--center">
<div class="inner"> <div class="inner-wrap">
<div class="content"> <h3>Sync &amp; Earn</h3>
<h1>Getting Credits For Your Channel</h1> <p>LBRY offers a single-click sync process for existing YouTubers.</p>
<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> <form id="sync" method="post" action="/youtube/token">
<div class="price"> <checkbox-element>
<h3>Subscriber Levels</h3> <input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/>
<p>LBC <span class="current-value"></span></p> <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>
</div> <checkbox-toggle/>
<div class="table"> </checkbox-element>
<div class="head">
<p>Your Current YouTube Subscribers</p> <input type="text" hidden name="type" value="sync"/>
<p>LBC Tokens</p>
<p>USD Value</p> <div>
<input type="submit" value="Sync Now"/>
</div> </div>
<div class="line"> </form>
<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>
</div> </section>
</section>
<section class="contact section"> <section>
<div class="inner"> <div class="inner-wrap">
<div class="content"> <h3>Let's connect</h3>
<h1>Let’s Connect</h1>
<p>If you have any questions, reach out.</p> <p>If you have any questions, reach out.</p>
<div class="v-card"> <div class="v-card">
<div class="photo"><img src="https://spee.ch/7/rob-smith1.png"></div> <figure>
<div class="text"> <img alt="Rob Smith, Head of Product Growth" src="https://spee.ch/7/rob-smith1.png"/>
</figure>
<info>
<h3>Rob Smith</h3> <h3>Rob Smith</h3>
<p>Head of Product Growth</p> <p>Head of Product Growth</p>
<a href="mailto:rob@lbry.com?subject=YouTube+Freedom">Contact</a> <a href="mailto:rob@lbry.com?subject=YouTube+Freedom">Contact</a>
</div> </info>
</div> </div>
</div> </div>
</div> </section>
</section>
<div class="to-top"><span>to top</span></div>
</main> </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)) { 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); AcquisitionActions::actionYoutubeEdit($status_token, $channel_name, $email, $sync_consent);

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

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

@ -1,11 +1,9 @@
<?php js_start() ?> <?php js_start() ?>
if (localStorage.getItem('status_token')) { if (localStorage.getItem("status_token")) {
var status_token = localStorage.getItem('status_token'); const status_token = localStorage.getItem("status_token");
url = '/youtube/status/' + status_token; url = "/youtube/status/" + status_token;
$(location).attr('href', url); $(location).attr("href", url);
} } else {
$(location).attr("href", "/youtube");
else { }
$(location).attr('href', '/youtube');
}
<?php js_end() ?> <?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"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1><?php echo htmlentities($post->getTitle()) ?></h1>
</div> </div>
</section> </section>

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

@ -2,7 +2,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Quarterly Credit Reports</h1>
</div> </div>
</section> </section>

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

@ -4,7 +4,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Frequently Asked Questions</h1>
</div> </div>
</section> </section>

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

@ -2,7 +2,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{page.faq.header}}</h1>
</div> </div>
</section> </section>

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

@ -6,7 +6,7 @@
<section <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() . '\')"' : ''?> 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> <h1><?php echo htmlentities($post->getTitle()) ?></h1>
<h2> <h2>
<?php echo $post->getAuthorName() ?> <?php echo $post->getAuthorName() ?>

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Use LBRY on your preferred platform</h1>
</div> </div>
</section> </section>

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

@ -4,7 +4,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <section class="hero hero--half-height">
<div class="inner-wrap inner-wrap--hero"> <div class="inner-wrap inner-wrap--center-hero">
<h1> <h1>
<?php echo __('download.for-os2', ['%os%' => OS::OS_DETAIL($os)[5]]) ?> <?php echo __('download.for-os2', ['%os%' => OS::OS_DETAIL($os)[5]]) ?>
</h1> </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://rsms.me/inter/inter.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.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"/> <link rel="stylesheet" href="/components/dist/index.css"/>
<?php endif ?>
<?php foreach (Response::getCssAssets() as $src): ?> <?php foreach (Response::getCssAssets() as $src): ?>
<link rel="stylesheet" href="<?php echo $src?>"/> <link rel="stylesheet" href="<?php echo $src?>"/>

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

@ -54,25 +54,6 @@
<checkbox-toggle/> <checkbox-toggle/>
</checkbox-element> </checkbox-element>
<?php endforeach ?> <?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> </section>
</form> </form>
<?php endif ?> <?php endif ?>

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

@ -4,7 +4,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{page.email_settings}}</h1>
</div> </div>
</section> </section>

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

@ -2,7 +2,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{page.unsubscribe}}</h1>
</div> </div>
</section> </section>

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

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

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

@ -1,6 +1,6 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{page.badrequest}}</h1>
</div> </div>
</section> </section>

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

@ -1,6 +1,6 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Page Not Found (404)</h1>
</div> </div>
</section> </section>

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

@ -1,6 +1,6 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{page.badmethod}}</h1>
</div> </div>
</section> </section>

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>LBRY Warrant Canary</h1>
</div> </div>
</section> </section>

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

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

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Get in Touch</h1>
</div> </div>
</section> </section>

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

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

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Blockchain Fork Updates</h1>
</div> </div>
</section> </section>

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

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

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Join Team Content Freedom</h1>
</div> </div>
</section> </section>

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

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

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

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

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

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

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Join Our List for LBRY Updates</h1>
</div> </div>
</section> </section>

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

@ -5,7 +5,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>{{press.title}}</h1>
</div> </div>
</section> </section>

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hereo--half-height"> <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> <h1>LBRY Inc. Privacy Policy</h1>
<style> <style>

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

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

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

@ -4,7 +4,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero hero--half-height"> <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> <h1>Terms of Service</h1>
</div> </div>
</section> </section>

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

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

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

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

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

@ -3,7 +3,7 @@
<main class="ancillary"> <main class="ancillary">
<section class="hero" style="background-image: url(/img/hackysu2.jpg)"> <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> <h1>LBRY Welcomes HackYSU</h1>
<h3>We're excited to share LBRY with you!</h3> <h3>We're excited to share LBRY with you!</h3>
</div> </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 // Automatically open external links in new tabs
document.querySelectorAll("a[href]").forEach(link => { document.querySelectorAll("a[href]").forEach(link => {
if (link.href.indexOf(location.hostname) === -1) { 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()();

379
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;
function App(api,parameters) { this._html = document.getElementsByTagName("html")[0];
this._elem = window; this._body = document.body;
this._html = document.getElementsByTagName('html')[0]; this._elem.addEventListener("load", this._onLoad.bind(this), false);
this._body = document.body;
this._elem.addEventListener('load',this._onLoad.bind(this),false);
} }
App.prototype._onLoad = function() { App.prototype._onLoad = function() {
// Hero button // Header animation setup
this._button = document.getElementsByClassName('hero')[0].getElementsByClassName('button')[0]; this._points = [];
this._lines = [];
// To top button Array.prototype.slice.call(document.getElementsByClassName("shape")[0].getElementsByTagName("div"), 0).forEach(function(point, i) {
this._toTop = document.getElementsByClassName('to-top')[0]; const p = new Point(point);
this._isVisible = false; this._points.push(p);
// Header animation setup const path = document.getElementsByTagName("path")[i];
this._points = []; const index = parseFloat(path.getAttribute("data-from"));
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);
// Section how const origin = {
this._how = document.getElementsByClassName('how')[0]; x: window.innerWidth * 0.4,
this._percent = 0; y: 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 const from = index < 0 ?
this._getDataFromCoinMarketCap(); origin :
this._points[index].getOffset();
// Binding events const to = this._points[i].getOffset();
this._bindEvents(); 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) { App.prototype._getDataFromCoinMarketCap = function(e) {
this._xhr = new XMLHttpRequest(); this._xhr = new XMLHttpRequest();
this._xhr.addEventListener('readystatechange',this._onReadyStateChange.bind(this),false); this._xhr.addEventListener("readystatechange", this._onReadyStateChange.bind(this), false);
this._xhr.open('GET','https://api.lbry.com/lbc/exchange_rate'); this._xhr.open("GET", "https://api.lbry.com/lbc/exchange_rate");
this._xhr.send(); this._xhr.send();
}; };
App.prototype._onReadyStateChange = function(e) { App.prototype._onReadyStateChange = function(e) {
if (this._xhr.readyState === 4) { if (this._xhr.readyState === 4) {
if (this._xhr.status === 200) { if (this._xhr.status === 200) {
const response = JSON.parse(this._xhr.responseText); const response = JSON.parse(this._xhr.responseText);
const lines = Array.prototype.slice.call(document.getElementsByClassName('line'),0); const lines = document.querySelectorAll("[data-id*='amount-']");
const price = parseFloat(response.data.lbc_usd); const price = parseFloat(response.data.lbc_usd);
lines.forEach(function(line) { lines.forEach(function(line) {
const subscriber = line.getElementsByTagName('p')[0]; const amount = line.dataset.id.split("-")[1];
const monthly = line.getElementsByTagName('p')[1]; const total = amount * price;
const amount = line.getElementsByTagName('p')[2];
const total = parseFloat(monthly.innerHTML.replace(new RegExp(',', 'g'), '')) * price;
amount.innerHTML = this._addCommas(total.toFixed(2)) + ' <i>USD</i>'; line.innerHTML = this._addCommas(total.toFixed(2)) + " <small class='meta'>USD</small>";
},this); }, 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) { App.prototype._addCommas = function(nStr) {
nStr += ''; nStr += "";
var x = nStr.split('.');
var x1 = x[0]; const rgx = /(\d+)(\d{3})/;
var x2 = x.length > 1 ? '.' + x[1] : ''; const x = nStr.split(".");
var rgx = /(\d+)(\d{3})/; const x2 = x.length > 1 ?
while (rgx.test(x1)) { "." + x[1] :
x1 = x1.replace(rgx, '$1' + ',' + '$2'); "";
} let x1 = x[0];
return x1 + x2;
while (rgx.test(x1))
x1 = x1.replace(rgx, "$1" + "," + "$2");
return x1 + x2;
}; };
App.prototype._bindEvents = function() { App.prototype._bindEvents = function() {
var click = 'ontouchstart' in document ? 'touchstart':'click'; TweenMax.ticker.addEventListener("tick", this._onTick.bind(this));
this._button.addEventListener(click,this._goToContent.bind(this),false); this._elem.addEventListener("resize", this._onResize.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);
}
}; };
App.prototype._onResize = function() { App.prototype._onResize = function() {
this._points.forEach(function(point,i) { this._points.forEach(function(point, i) {
point.resetOrigin(); point.resetOrigin();
},this); }, this);
this._start = this._how.offsetTop - this._how.scrollTop - window.innerHeight / 2 - this._offset;
this._end = this._start + window.innerHeight / 2; 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,80 @@ App.prototype._onResize = function() {
* Header animation * Header animation
*/ */
function Point(elem) { function Point(elem) {
this._elem = elem; this._elem = elem;
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 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; this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
this._x = 0; this._x = 0;
this._y = 0; this._y = 0;
if (this._elem.className.indexOf('circle') !== -1) {
this._move(); if (this._elem.className.indexOf("circle") !== -1)
} this._move();
} }
Point.prototype._move = function() { Point.prototype._move = function() {
var distance = 20; 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});
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() { Point.prototype._onUpdate = function() {
this._x = this._elem._gsTransform.x; this._x = this._elem._gsTransform.x;
this._y = this._elem._gsTransform.y; this._y = this._elem._gsTransform.y;
}; };
Point.prototype.getOffset = function() { Point.prototype.getOffset = function() {
return { return {
x: this._originX + this._x, x: this._originX + this._x,
y: this._originY + this._y y: this._originY + this._y
} }
}; };
Point.prototype.resetOrigin = function() { Point.prototype.resetOrigin = function() {
this._originX = this._elem.offsetLeft - this._elem.scrollLeft + this._elem.offsetWidth / 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; this._originY = this._elem.offsetTop - this._elem.scrollTop + this._elem.offsetHeight / 2;
}; };
/** /**
* Line * Line
* Header animation * Header animation
*/ */
function Line(elem,from,to) { function Line(elem, from, to) {
this._elem = elem; this._elem = elem;
this.draw(from,to); this.draw(from,to);
} }
Line.prototype.getElement = function() { Line.prototype.getElement = function() {
return this._elem; return this._elem;
}; };
Line.prototype.draw = function(from,to) { Line.prototype.draw = function(from, to) {
this._elem.setAttribute('d','M '+from.x+','+from.y+' L '+to.x+','+to.y); this._elem.setAttribute("d", "M " + from.x + "," + from.y + " L " + to.x + "," + to.y);
}; };
// Let's start :) // Let's start :)
var app = new App(); new App();
document.getElementById("scroll-to-claim").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) { function playVideo(id) {
var myVideo = document.getElementById(id); const video = document.getElementById(id);
myVideo.play(); video.play();
$('#' + id).prop("controls", true); video.controls = true;
$('#play-' + id).hide(); }
}

37
web/scss/_layout.scss
View file

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

1
web/scss/all.scss
View file

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

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

@ -3,3 +3,28 @@ checkbox-element {
color: initial; 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; background-size: cover;
color: var(--lbry-white); color: var(--lbry-white);
position: relative; position: relative;
text-align: center;
text-shadow: 0 0 0.2rem rgba($lbry-black, 0.7); text-shadow: 0 0 0.2rem rgba($lbry-black, 0.7);
&::before { &::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) { @media (min-width: 951px) {
height: 500px; height: 500px;
} }
@ -47,6 +50,10 @@
padding-top: 2rem; padding-top: 2rem;
} }
&.hero--youtube {
height: calc(100vh - 5rem);
}
[class*="icon-"].icon-fw { [class*="icon-"].icon-fw {
width: 3rem; width: 3rem;
} }

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

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

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

@ -0,0 +1,432 @@
$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 {
border: 1px solid var(--lbry-red-5);
background-color: var(--lbry-red-4);
color: var(--lbry-white);
font-size: 0.8rem;
margin-bottom: 0.5rem;
padding: 0.5rem 0.75rem;
}
.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