-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (78 loc) · 4.09 KB
/
index.html
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
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Buster.TimeSeries</h1>
<div>
<video id="videoID" muted="" controls="" source="./video/video_01.mp4" autoplay=""></video>
<img id="dateID" src="./img/default_image.png" alt="">
</div>
<div style="margin-top: 2rem;">
<form action="#" id="dateForm">
<div>
<label for="current_date">Current Date</label>
<input type="datetime" name="current_date" id="current_date" style="width: 300px;">
<span id="day-of-week"></span>
<a href="#" id="previous"><</a>
<a href="#" id="next">></a>
</div>
<div>
<label for="target_date">Target Date</label>
<input type="datetime" name="target_date" id="target_date" style="width: 300px;" disabled="true">
</div>
</form>
</div>
<!-- This script will be included at the top of the page, somewhere in the body -->
<script type="text/javascript" src="dist/timerange.js" charset="utf-8"></script>
<!-- <script type="text/javascript" src="src/date_difference.js" charset="utf-8"></script> -->
<!-- // END -->
<script type="text/javascript" src="src/formhelper.js" charset="utf-8"></script>
<!-- This script is used to configure the TimeSeries component -->
<script>
var config = {
targetDate: '2016-03-06',
targetShowDuration: 59,
imageElement: 'dateID',
videoElement: 'videoID',
evergreen_day_before: true,
evergreen_day_of: true,
images: {
'outside_week': '//placehold.it/300x250?text=outside_week',
'inside_week': '//placehold.it/300x250?text=inside_week',
'6_days_before': '//placehold.it/300x250?text=6_days_before',
'5_days_before': '//placehold.it/300x250?text=5_days_before',
'4_days_before': '//placehold.it/300x250?text=4_days_before',
'3_days_before': '//placehold.it/300x250?text=3_days_before',
'2_days_before': '//placehold.it/300x250?text=2_days_before',
'tomorrow': '//placehold.it/300x250?text=tomorrow',
'today': '//placehold.it/300x250?text=today',
'sustaining_generic': '//placehold.it/300x250?text=sustaining_generic',
'sustaining_tomorrow': '//placehold.it/300x250?text=sustaining_tomorrow',
'sustaining_today': '//placehold.it/300x250?text=sustaining_today',
'1_days_after': '//placehold.it/300x250?text=1_days_after',
'2_days_after': '//placehold.it/300x250?text=2_days_after',
'3_days_after': '//placehold.it/300x250?text=3_days_after',
'4_days_after': '//placehold.it/300x250?text=4_days_after',
'5_days_after': '//placehold.it/300x250?text=5_days_after',
'6_days_after': '//placehold.it/300x250?text=6_days_after',
'7_days_after': '//placehold.it/300x250?text=7_days_after'
},
videos: {
'outside_week': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_01.mp4',
'inside_week': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_02.mp4',
'tomorrow': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_04.mp4', // Tomorrow
'today': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_05.mp4', // Tonight
'sustaining_generic': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_06.mp4', // the video that plays evergreen when the above conditions are not met (most of the time)
'sustaining_tomorrow': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_04.mp4', // the video that plays the day before air date evergreen
'sustaining_today': 'https://s3-us-west-2.amazonaws.com/trutv-twc/video/300x250/TruTV_TWC_300x250_05.mp4' // the video that plays on the air date evergreen
}
};
var btr = new BusterTimeSeries(config);
btr.init();
// This is just for testing and will be omitted for production.
formHelper(btr);
</script>
<!-- END -->
</body>
</html>