timekeeper

#!/usr/bin/env perl
use Mojolicious::Lite -signatures;

use Time::Duration 'ago_exact';

plugin 'Webpack' => {process => [qw(js sass)]};

app->defaults(seo_description => 'Create a shareable timer.');

get(
  '/:epoch/:seconds' => {epoch => 0, seconds => 0},
  sub ($c) {
    my $stash = $c->stash;
    $stash->{seo_canonical} = $c->req->url->to_abs;
    $stash->{seo_icon}      = $c->url_for('/images/clock_ballonicon2.png')->to_abs;
    $stash->{seo_site}      = $stash->{seo_canonical}->host;
    $stash->{seo_site} =~ s!\w+\.([^\.]+).*!$1!;

    if (my $ends = $stash->{epoch} + $stash->{seconds}) {
      $stash->{seo_description} = sprintf 'The timer expire%s %s', $ends > time ? 's' : 'd',
        ago_exact(time - $ends);
    }
  },
  'timer'
);

helper alarm_sound => sub ($c, $format) {
  return shift->url_for("/sounds/alarm-clock-soundbible.com-437257341.$format");
};

helper seo => sub ($c, $for, $new_value = undef) {
  my $stash = $c->stash;
  $stash->{"seo_$for"} = $new_value if @_ == 3;
  return $stash->{"seo_$for"} // '';
};

$ENV{X_REQUEST_BASE} and hook before_dispatch => sub {
  my $c = shift;
  return unless my $base = $c->req->headers->header('X-Request-Base');
  $c->req->url->base(Mojo::URL->new($base));
};

app->start;

__DATA__
@@ timer.html.ep
% title 'Share your timer';
% layout 'default';
% my $index_url = url_for 'timer', {epoch => undef, seconds => undef};
% my @classes = qw(countdown);
% push @classes, $seconds ? 'is-counting-down' : 'has-set';

%= form_for $index_url, id => 'app', class => join(' ', @classes), begin
  <a href="#about" class="countdown-icon"><img alt="Timekeeper" src="<%= seo 'icon' %>"></a>
  <div class="countdown-about">Create a shareable <a href="#about">timer</a>.</div>

  <section class="countdown-fields">
    <div class="countdown-fields__field for-days" data-shadow="000">
      <label>days</label>
      %= number_field 'd', '0', min => 0, max => 999, autocomplete => 'off'
    </div>
    <div class="countdown-fields__field for-hours" data-shadow="00">
      <label>hours</label>
      %= number_field 'h', '0', min => 0, max => 23, autocomplete => 'off'
    </div>
    <div class="countdown-fields__field for-minutes" data-shadow="00">
      <label>minutes</label>
      %= number_field 'm', '10', min => 0, max => 59, autocomplete => 'off'
    </div>
    <div class="countdown-fields__field for-seconds" data-shadow="00">
      <label>seconds</label>
      %= number_field 's', '0', min => 0, max => 59, autocomplete => 'off'
    </div>
  </section>

  <div class="countdown-footer for-edit hide">
    Set a timer and press <a href="#start:0">start</a>.
  </div>
  <div class="countdown-footer for-countdown hide">
    <a href="#alarm">Enable sound</a>
    -
    <a href="#stop">Stop timer</a>
  </div>
  <div class="countdown-footer for-expired hide">
    <span class="expired-text">The timer has expired.</span>
    <a href="#stop">Set</a> a timer.
  </div>

  <audio class="alarm-player" name="player" preload="auto" loop="true">
    <source src="<%= alarm_sound 'ogg' %>" type="audio/ogg"></source>
    <source src="<%= alarm_sound 'mpeg' %>" type="audio/mpeg"></source>
  </audio>
% end

<article id="about">
  <h1>Timekeeper</h1>
  <p>
    Timekeeper is an app that allows you to create a shareable countdown timer.
  </p>
  <p>
    Simply copy and paste the URL in your browser to a friend or coworker,
    after setting the timer.
  </p>

  <p>
    Here are some predefined timers:
    <a href="#start:300">5 min</a>,
    <a href="#start:600">10 min</a>,
    <a href="#start:3600">1 hour</a> or
    <a href="#start:480">perfect eggs</a>.
  </p>

  <h2>Story</h2>
  <p>
    John tells his coworker Jane: <i>"I'll have it done in ten minutes!"</i>
  </p>
  <p>
    Jane replies: <i>"Yeah, right..."</i>
  </p>
  <p>
    John creates a timer and shares the link with Jane, so she can make fun of
    him after ten minutes have gone.
  </p>

  <h2>Copyright and license</h2>
  <p>
    <a href="https://github.com/jhthorsen/app-timekeeper">This program</a> is
    free software, you can redistribute it and/or modify it under the terms of
    the <a href="https://opensource.org/licenses/Artistic-2.0">Artistic License version 2.0</a>.
  </p>
</article>

<footer class="footer">
  <p class="copyright">&copy; 2014-<%= 1900 + +(localtime)[5] %> &mdash; <a href="http://thorsen.pm">Jan Henning Thorsen</a></p>
</footer>
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:description" content="<%= seo 'description' %>">
  <meta name="twitter:image" content="<%= seo 'icon' %>">
  <meta name="twitter:site" content="<%= seo 'site' %>">
  <meta name="twitter:title" content="<%= title %>">
  <meta name="twitter:url" content="<%= seo 'canonical' %>">
  <meta property="og:description" content="<%= seo 'description' %>">
  <meta property="og:determiner" content="a">
  <meta property="og:image" content="<%= seo 'icon' %>">
  <meta property="og:title" content="<%= title %>">
  <meta property="og:url" content="<%= seo 'canonical' %>">
  %= asset 'app-timekeeper.css'
  <link rel="shortcut icon" href="<%= seo 'icon' %>" type="image/png">
</head>
<body>
  %= content
  %= asset 'app-timekeeper.js'
</body>
</html>