max630/dumb-tv.html

## dumb-tv.html
<!DOCTYPE html>
<html>
<!--
reads file films.json from the same directory. The file should contain array of arrays,
 each of them of length 2. First element is identifier, second - path to the video file. Like this:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[
["a7bb5682ff4bf88a5140165a638770f6b38f2173", "terminator1.mp4"],
["419278cd408cbda642b433e14f18b38977f2a048", "terminator2.mp4"],
["df6ec9c82ca899c3c013daacf283d1c086499b2d", "alien-vs-predator.mp4"]
]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
checksum here is just an example, can be any string in fact.

Set up this as a home page in the TV's browser
 -->
<meta charset="UTF-8">
<style>
body, p, a, video {
    padding: 0px;
    margin: 0px;
    border: 0px none;
}

#video-p {
    text-align: center;
}
</style>
<script>
var videoCurrent = "";
var videoCurrentTime = 0;
var videoPaused = 1;
document.cookie.split(";").forEach(function(entry){
    var pair = entry.split("=");
    if (pair[0].trim() == "videoCurrentTime") {
        window.videoCurrentTime = pair[1];
    } else if (pair[0].trim() == "videoPaused") {
        window.videoPaused = (pair[1] != "0");
    } else if (pair[0].trim() == "videoCurrent") {
        window.videoCurrent = pair[1];
    } else {
        // alert("Unknown cookie: `" + pair[0] + "'");
    }
});
function openVideo(film_id) {
    window.films.some(function(film) {
        if (film[0] == film_id) {
            window.videoCurrent = film[0];
            document.cookie="videoCurrent=" + film[0] + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
            window.videoCurrentTime = 0;
            document.cookie="videoCurrentTime=0" + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
            window.videoPaused = 1;
            document.cookie="videoPaused=1" + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
            document.getElementById("video").src = film[1];
            if (window.rememberPosVar != null) {
                clearInterval(window.rememberPosVar);
                window.rememberPosVar = null;
            }
            return true;
        } else {
            return false;
        }
    });
};
function setPos() {
    var video = document.getElementById("video");
    video.currentTime = window.videoCurrentTime;
    window.rememberPosVar = window.setInterval(function(){rememberPos();},1000);
}
function setSize() {
    var video = document.getElementById("video");
    var videos = document.getElementById("videos");
    var aspect = video.videoHeight / video.videoWidth;
    var windowHeight = window.innerHeight - videos.offsetHeight;
    if (window.innerWidth * aspect < windowHeight) {
        video.width = window.innerWidth;
        video.height = window.innerWidth * aspect;
    } else {
        video.height = windowHeight;
        video.width = windowHeight / aspect;
    }
}
function rememberPos() {
    var video = document.getElementById("video");
    var currentTime = video.currentTime;
    var paused = video.paused;
    document.cookie="videoCurrentTime=" + currentTime + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
    document.cookie="videoPaused=" + (paused?"1":"0") + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
}
function filmsLoaded(filmsText) {
    window.films = JSON.parse(filmsText);
    // alert(window.films);
    var videos = document.getElementById("videos");
    window.films.forEach(function(film) {
        videos.appendChild(document.createTextNode("["));
        var a = document.createElement("a");
        a.onclick = function() { openVideo(film[0]); return false; }
        a.href = "#";
        a.appendChild(document.createTextNode(film[1]));
        videos.appendChild(a);
        // videos.appendChild(document.createElement("br"));
        videos.appendChild(document.createTextNode("]  "));
    });
    window.films.some(function(film) {
        if (film[0] == window.videoCurrent) {
            document.getElementById("video").src = film[1];
            if (window.videoPaused) {
                document.getElementById("video").pause();
            } else {
                document.getElementById("video").play();
            }
            return true;
        } else {
            return false;
        }
    });
}
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        filmsLoaded(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", "films.json", true);
xmlhttp.send();
window.onresize = function(event) {
    setSize();
}
</script>
<body>

<p id="video-p">
<video id="video" controls="true" onloadedmetadata="setSize();" ondurationchange="setPos();">
  Your browser does not support HTML5 video.
</video>
</p>

<p id="videos">
</p>

</body>
</html>

## films_add
#!/usr/bin/env perl

# run in a directory where all is located:
# $films_add film1 film2 ...

use strict;
use JSON;
use Digest::MD5;

my %new_files = ();
foreach my $f (@ARGV) {
    open(FILE, $f) or die "Can't open '$f': $!";
    binmode(FILE);
    my $md5 = Digest::MD5->new;
    $md5->addfile(*FILE);
    close(FILE);
    my $digest = $md5->hexdigest;
    $new_files{$digest} = $f;
    print $digest, "  ", $f, "\n";
}

my $films_obj = do {
    local $/;
    open(my $fh, '<', 'films.json') or die "fail read films.json: $!";
    my $films_text = <$fh>;
    close($fh);
    decode_json($films_text);
};

my %known_films = ();
foreach my $fpair (@$films_obj) {
    my ($hash, $name) = @$fpair;
    $known_films{$hash} = $name;
}

foreach my $new_hash (keys %new_files) {
    if (!exists $known_films{$new_hash}) {
        push @$films_obj, [$new_hash, $new_files{$new_hash}];
    }
}

{
    local $/;
    open(my $fh, '>', 'films.json.new') or die "fail write: $!";
    print $fh to_json($films_obj, { pretty => 1 });
    close($fh) or die "fail write: $!";

    rename("films.json.new", "films.json") or die "fail rename: $!";
}
	<!DOCTYPE html>
	<html>
	<!--
	reads file films.json from the same directory. The file should contain array of arrays,
	each of them of length 2. First element is identifier, second - path to the video file. Like this:
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	[
	["a7bb5682ff4bf88a5140165a638770f6b38f2173", "terminator1.mp4"],
	["419278cd408cbda642b433e14f18b38977f2a048", "terminator2.mp4"],
	["df6ec9c82ca899c3c013daacf283d1c086499b2d", "alien-vs-predator.mp4"]
	]
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	checksum here is just an example, can be any string in fact.

	Set up this as a home page in the TV's browser
	-->
	<meta charset="UTF-8">
	<style>
	body, p, a, video {
	padding: 0px;
	margin: 0px;
	border: 0px none;
	}

	#video-p {
	text-align: center;
	}
	</style>
	<script>
	var videoCurrent = "";
	var videoCurrentTime = 0;
	var videoPaused = 1;
	document.cookie.split(";").forEach(function(entry){
	var pair = entry.split("=");
	if (pair[0].trim() == "videoCurrentTime") {
	window.videoCurrentTime = pair[1];
	} else if (pair[0].trim() == "videoPaused") {
	window.videoPaused = (pair[1] != "0");
	} else if (pair[0].trim() == "videoCurrent") {
	window.videoCurrent = pair[1];
	} else {
	// alert("Unknown cookie: `" + pair[0] + "'");
	}
	});
	function openVideo(film_id) {
	window.films.some(function(film) {
	if (film[0] == film_id) {
	window.videoCurrent = film[0];
	document.cookie="videoCurrent=" + film[0] + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
	window.videoCurrentTime = 0;
	document.cookie="videoCurrentTime=0" + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
	window.videoPaused = 1;
	document.cookie="videoPaused=1" + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
	document.getElementById("video").src = film[1];
	if (window.rememberPosVar != null) {
	clearInterval(window.rememberPosVar);
	window.rememberPosVar = null;
	}
	return true;
	} else {
	return false;
	}
	});
	};
	function setPos() {
	var video = document.getElementById("video");
	video.currentTime = window.videoCurrentTime;
	window.rememberPosVar = window.setInterval(function(){rememberPos();},1000);
	}
	function setSize() {
	var video = document.getElementById("video");
	var videos = document.getElementById("videos");
	var aspect = video.videoHeight / video.videoWidth;
	var windowHeight = window.innerHeight - videos.offsetHeight;
	if (window.innerWidth * aspect < windowHeight) {
	video.width = window.innerWidth;
	video.height = window.innerWidth * aspect;
	} else {
	video.height = windowHeight;
	video.width = windowHeight / aspect;
	}
	}
	function rememberPos() {
	var video = document.getElementById("video");
	var currentTime = video.currentTime;
	var paused = video.paused;
	document.cookie="videoCurrentTime=" + currentTime + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
	document.cookie="videoPaused=" + (paused?"1":"0") + "; expires=Fri, 31 Dec 2020 23:59:59 GMT";
	}
	function filmsLoaded(filmsText) {
	window.films = JSON.parse(filmsText);
	// alert(window.films);
	var videos = document.getElementById("videos");
	window.films.forEach(function(film) {
	videos.appendChild(document.createTextNode("["));
	var a = document.createElement("a");
	a.onclick = function() { openVideo(film[0]); return false; }
	a.href = "#";
	a.appendChild(document.createTextNode(film[1]));
	videos.appendChild(a);
	// videos.appendChild(document.createElement("br"));
	videos.appendChild(document.createTextNode("] "));
	});
	window.films.some(function(film) {
	if (film[0] == window.videoCurrent) {
	document.getElementById("video").src = film[1];
	if (window.videoPaused) {
	document.getElementById("video").pause();
	} else {
	document.getElementById("video").play();
	}
	return true;
	} else {
	return false;
	}
	});
	}
	var xmlhttp = new XMLHttpRequest();

	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	filmsLoaded(xmlhttp.responseText);
	}
	}
	xmlhttp.open("GET", "films.json", true);
	xmlhttp.send();
	window.onresize = function(event) {
	setSize();
	}
	</script>
	<body>

	<p id="video-p">
	<video id="video" controls="true" onloadedmetadata="setSize();" ondurationchange="setPos();">
	Your browser does not support HTML5 video.
	</video>
	</p>

	<p id="videos">
	</p>

	</body>
	</html>
	#!/usr/bin/env perl

	# run in a directory where all is located:
	# $films_add film1 film2 ...

	use strict;
	use JSON;
	use Digest::MD5;

	my %new_files = ();
	foreach my $f (@ARGV) {
	open(FILE, $f) or die "Can't open '$f': $!";
	binmode(FILE);
	my $md5 = Digest::MD5->new;
	$md5->addfile(*FILE);
	close(FILE);
	my $digest = $md5->hexdigest;
	$new_files{$digest} = $f;
	print $digest, " ", $f, "\n";
	}

	my $films_obj = do {
	local $/;
	open(my $fh, '<', 'films.json') or die "fail read films.json: $!";
	my $films_text = <$fh>;
	close($fh);
	decode_json($films_text);
	};

	my %known_films = ();
	foreach my $fpair (@$films_obj) {
	my ($hash, $name) = @$fpair;
	$known_films{$hash} = $name;
	}

	foreach my $new_hash (keys %new_files) {
	if (!exists $known_films{$new_hash}) {
	push @$films_obj, [$new_hash, $new_files{$new_hash}];
	}
	}

	{
	local $/;
	open(my $fh, '>', 'films.json.new') or die "fail write: $!";
	print $fh to_json($films_obj, { pretty => 1 });
	close($fh) or die "fail write: $!";

	rename("films.json.new", "films.json") or die "fail rename: $!";
	}