~ihabunek/vampires

ref: 5d4d09d033430022df834577ff0718435f284884 vampires/index.html -rw-r--r-- 4.4 KiB
5d4d09d0Ivan Habunek Better image handling 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
144
145
146
147
148
149
150
151
152
153
<!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 {
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        overflow: hidden;
        background-image: url("slides/slide_00.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    </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 id="slide"></div>

      <p class="centered">
        Slide <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.style.backgroundImage = "url(" + src + ")"
      current.innerText = index + 1
    });
  </script>
</html>