237 lines
6.8 KiB
HTML
237 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Flash Player</title>
|
|
<style>
|
|
body {
|
|
overflow: hidden;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.main {
|
|
background: black;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gembed {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNTAiPjx0ZXh0IHN0eWxlPSJmb250OiAzMHB4IHNhbnMtc2VyaWY7IiBmaWxsPSJ3aGl0ZSIgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkxvYWRpbmc8L3RleHQ+PC9zdmc+");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
#ffd {
|
|
height: 200px;
|
|
width: 400px;
|
|
position: absolute;
|
|
background-color: #dddddd;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
overflow: auto;
|
|
z-index: 5;
|
|
}
|
|
|
|
#ffd::before {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 0px;
|
|
background-color: #333333;
|
|
content: "Drop File Here";
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
#ffd.filehover::before {
|
|
opacity: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
#ffd.filehover {
|
|
border: 2px dashed #dddddd;
|
|
background-color: #333333;
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|
|
|
|
#upload+label {
|
|
border: 1px solid rgb(118, 118, 118);
|
|
border-radius: 2px;
|
|
padding: 4px;
|
|
margin: 10px;
|
|
font-size: 13px;
|
|
background-color: white;
|
|
display: inline-block;
|
|
transition: ease .1s;
|
|
user-select: none;
|
|
}
|
|
|
|
#upload+label:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
#ffd .source {
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translatex(-50%);
|
|
bottom: 5px;
|
|
text-decoration: none;
|
|
color: black;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// please dont use IE
|
|
if (!window.fetch) {
|
|
alert("Update your browser!");
|
|
throw "Update your browser!";
|
|
}
|
|
|
|
// query string into object
|
|
const search = decodeURIComponent(window.location.search).substring(1).split("&");
|
|
const queries = {};
|
|
for (let i = 0; i < search.length; i++) {
|
|
const p = search[i].split('=');
|
|
queries[p[0]] = p[1];
|
|
}
|
|
|
|
// xhr
|
|
function grab(url, type, success, fail) {
|
|
const req = new XMLHttpRequest();
|
|
req.open("GET", url, true);
|
|
req.overrideMimeType("text/plain; charset=x-user-defined");
|
|
req.responseType = type;
|
|
req.onload = function() {
|
|
if (req.status >= "400") {
|
|
fail(req.status);
|
|
} else {
|
|
success(this.response);
|
|
}
|
|
}
|
|
req.send();
|
|
}
|
|
|
|
// file reader
|
|
function readFile(file, callback) {
|
|
const reader = new FileReader();
|
|
reader.onload = function() {
|
|
callback(this.result);
|
|
}
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
|
|
let rplayer;
|
|
|
|
// start
|
|
function startPlayer(data) {
|
|
console.log("Initializing with " + data.byteLength + " bytes of data");
|
|
rplayer.load({data: data});
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
const mainarea = document.getElementById("mainarea");
|
|
const ffd = document.getElementById("ffd");
|
|
const upload = document.getElementById("upload");
|
|
|
|
// make ruffle player
|
|
window.RufflePlayer = window.RufflePlayer || {};
|
|
window.RufflePlayer.config = window.RufflePlayer.config || {};
|
|
window.RufflePlayer.config.letterbox = "on";
|
|
window.RufflePlayer.config.autoplay = "auto";
|
|
const rufflei = window.RufflePlayer.newest();
|
|
rplayer = rufflei.createPlayer();
|
|
rplayer.classList.add("gembed");
|
|
rplayer.playButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="250" height="100" style="margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><svg viewBox="0 0 24 24" y="7pt" width="100%" height="36pt"><path fill="rgb(203, 203, 203)" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"></path></svg><text style="font-family: sans-serif; font-size: 10pt; letter-spacing: normal; user-select: none;" fill="rgb(100, 100, 100)" x="50%" y="56pt" dominant-baseline="middle" text-anchor="middle">Click to enable Adobe Flash Player</text></svg>';
|
|
mainarea.appendChild(rplayer);
|
|
|
|
// ready for file upload
|
|
upload.onchange = function() {
|
|
ffd.style.display = "none";
|
|
rplayer.contextMenuElement.style.display = "none";
|
|
rplayer.contextMenuElement.style.zIndex = "auto";
|
|
let file = this.files[0];
|
|
readFile(file, function(data) {
|
|
console.log('Succesfully read SWF file "' + file.name + '"');
|
|
startPlayer(data);
|
|
});
|
|
}
|
|
document.ondragenter = function(e) {
|
|
if (e.dataTransfer.types.includes("Files")) ffd.classList.add("filehover");
|
|
}
|
|
ffd.ondragover = function(e) {
|
|
e.preventDefault();
|
|
}
|
|
ffd.ondrop = function(e) {
|
|
if (e.dataTransfer.types.includes("Files")) {
|
|
e.preventDefault();
|
|
ffd.style.display = "none";
|
|
rplayer.contextMenuElement.style.display = "none";
|
|
rplayer.contextMenuElement.style.zIndex = "auto";
|
|
let file = event.dataTransfer.files[0];
|
|
readFile(file, function(data) {
|
|
console.log('Succesfully read SWF file "' + file.name + '"');
|
|
startPlayer(data);
|
|
});
|
|
}
|
|
}
|
|
|
|
if (window.location.hash) {
|
|
const swfloc = `./${window.location.hash.slice(1)}.swf`;
|
|
grab(swfloc, "arraybuffer", function(data) {
|
|
// start
|
|
console.log("Succesfully fetched SWF from " + swfloc);
|
|
startPlayer(data);
|
|
}, function(error) {
|
|
// xhr error
|
|
alert("Could not get SWF at " + swfloc + " (Error " + error + ")");
|
|
ffd.style.display = "block";
|
|
rplayer.contextMenuElement.style.zIndex = "-100";
|
|
});
|
|
} else {
|
|
// prompt user to upload a file
|
|
ffd.style.display = "block";
|
|
rplayer.contextMenuElement.style.zIndex = "-100";
|
|
}
|
|
}, false);
|
|
</script>
|
|
<script src="ruffle/ruffle.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="main" id="mainarea">
|
|
<div id="ffd" style="display: none;">
|
|
<h2>Flash Player Emulator</h2>
|
|
<input type="file" id="upload" accept=".swf, .spl">
|
|
<label for="upload">Choose File</label>
|
|
<a href="https://ruffle.rs" target="_blank" class="source">Source</a>
|
|
<br>
|
|
<a href="portal2d.swf">portal2d</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |