~ihabunek/vampires

ref: ae3af2eaa077ed5bce1bc0c1029eb4662b4beb32 vampires/index.html -rw-r--r-- 4.1 KiB
ae3af2eaIvan Habunek Fix off-by-one 8 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Taming Yesterday's Nightmares for a Better Tomorrow</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style type="text/css">
      body { max-width: 1024px; margin: auto; font-family: sans-serif }
      footer { font-size: 0.9rem; margin-top: 5rem }
      .redacted { background-color: black; color: white; display: inline-block; }
      .strike { text-decoration: line-through }
      .centered { text-align: center }
      .player { width: 640px }
      .w-full { width: 100% }
      #audio { margin-top: 1rem }
      #slide { height: 640px }
    </style>
  </head>

  <body>
    <main>
      <h1>
        <span class="strike"> Vampires: Biology and Evolution</span>
        <span class="redacted">Redacted</span>
      </h1>

      <p>In light of recent events at the Melbourne Vatworks and elsewhere, the
      information on this page has been excised for reasons of planetary
      security. In its place, we offer this archival presentation on the
      discovery and resurrection of Homo sapiens whedonum from Fizerpharm Inc.,
      entitled "Taming Yesterday's Nightmares for a Better Tomorrow". This
      production has been vetted for the public domain, and in no way infringes
      upon corporate copyright. <span class="strike">Flash plugin</span>
      Javascript required.</p>

      <div class="centered">
        <img id="slide" src="slides/slide_00.jpg" />
      </div>

      <p><span id="current">1</span> / <span id="total"></span></p>

      <audio id="audio" class="w-full" controls src="audio/full.mp3">
        Your browser does not support the &lt;audio&gt; element, sorry.
      </audio>
    </main>

    <footer>
      <p>Extracted from original Flash video by Peter Watts:<br />
        <a href="https://rifters.com/blindsight/vampires.htm">https://rifters.com/blindsight/vampires.htm</a>
      </p>
      <p>Extraction code by Ivan Habunek available at:<br />
        <a href="https://sr.ht/~ihabunek/vampires/">https://sr.ht/~ihabunek/vampires/</a>
      </p>
    </footer>
  </body>

  <script type="text/javascript">
    const audio = document.querySelector("audio")

    // TODO: timings need tweaking
    const slideTimings = [
      0.0,     // 1
      25.9,    // 2
      51.3,    // 3
      110.3,   // 4
      125.4,   // 5
      156.0,   // 6
      231.6,   // 7
      268.7,   // 8
      294.3,   // 9
      307.6,   // 10
      318.1,   // 11
      333.1,   // 12
      344.7,   // 13
      356.3,   // 14
      374.3,   // 15
      388.1,   // 16
      403.1,   // 17
      449.7,   // 18
      486.1,   // 19
      542.1,   // 20
      567.7,   // 21
      631.4,   // 22
      705.7,   // 23
      749.6,   // 24
      830.6,   // 25
      844.7,   // 26
      860.7,   // 27
      913.4,   // 28
      921.4,   // 29
      928.0,   // 30
      969.4,   // 31
      1018.7,  // 32
      1082.3,  // 33
      1129.1,  // 34
      1140.0,  // 35
      1150.7,  // 36
      1161.1,  // 37
      1269.4,  // 38
      1330.6,  // 39
      1356.6,  // 40
      1389.9,  // 41
      1423.1,  // 42
      1500.6,  // 43
      1587.6,  // 44
      1595.6,  // 45
      1607.7,  // 46
      1622.7,  // 47
      1643.3,  // 48
      1695.1,  // 49
      1729.6,  // 50
      1754.1,  // 51
      1794.6,  // 52
      1862.6,  // 53
      1890.0,  // 54
      1964.7,  // 55
      2006.3,  // 56
      2074.3,  // 57
      2135.4,  // 58
    ]

    document.getElementById("total").innerText = slideTimings.length

    const getSlide = (timestamp) => {
      const index =  slideTimings.findIndex(slideTimestamp => {
        return slideTimestamp > timestamp
      })

      return index == -1 ? slideTimings.length - 1 : index - 1
    }

    const slide = document.getElementById("slide")
    const current = document.getElementById("current")

    audio.addEventListener("timeupdate", event => {
      const index = getSlide(event.target.currentTime)
      const src = index < 10 ? `slides/slide_0${index}.jpg` : `slides/slide_${index}.jpg`
      slide.src = src
      current.innerText = index + 1
    });
  </script>
</html>