Billy Barrow 2 лет назад
Родитель
Сommit
e0ac78ac4f
6 измененных файлов с 76 добавлено и 34 удалено
  1. 1 1
      config.php
  2. 1 0
      content_template.php
  3. 2 2
      index.php
  4. 1 0
      index_template.php
  5. 37 11
      ppvm_player.js
  6. 34 20
      video_player.php

+ 1 - 1
config.php

@@ -7,6 +7,6 @@ define("SITE_LANGUAGE", "en-nz");
 define("PUBLICATION_DIR", "ppubs");
 define("PUBLICATION_NAME", "Post");
 define("DATE_FORMAT", "l d F Y, H:i");
-define("USE_PPIX", true);
+define("USE_PPIX", false);
 
 ?>

+ 1 - 0
content_template.php

@@ -8,6 +8,7 @@ function content_start($ppub, $path) {
 <html lang="<?php echo($metadata["language"] ?? SITE_LANGUAGE);?>">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <title><?php echo(htmlentities($metadata["title"]));?> - <?php echo(SITE_NAME);?></title>
         <meta name="description" content="<?php echo(htmlentities($metadata["description"]));?>">
         <meta name="author" content="<?php echo(htmlentities($metadata["author"]));?>">

+ 2 - 2
index.php

@@ -158,7 +158,7 @@ if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
 
 header("Cache-Control: public, max-age=604800");
 
-if(strpos($accepts, "text/html") !== false && $asset->mimetype == "text/markdown") {
+if(strpos($accepts, "text/html") !== false && $asset->mimetype == "text/markdown" && !isset($_GET["raw"])) {
     header("content-type: text/html");
     include("content_template.php");
     include("Parsedown.php");
@@ -167,7 +167,7 @@ if(strpos($accepts, "text/html") !== false && $asset->mimetype == "text/markdown
     content_html($pd->text($ppub->read_asset($asset)));
     content_end($ppub);
 }
-else if(strpos($accepts, "text/html") !== false && $asset->mimetype == "application/x-ppvm") {
+else if(strpos($accepts, "text/html") !== false && $asset->mimetype == "application/x-ppvm" && !isset($_GET["raw"])) {
     header("content-type: text/html");
     include("ppvm.php");
     include("Parsedown.php");

+ 1 - 0
index_template.php

@@ -8,6 +8,7 @@ function index_start($index_type, $arg) {
 <html lang="<?php echo(SITE_LANGUAGE);?>">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <title><?php echo(PUBLICATION_NAME)?> Index - <?php echo(SITE_NAME);?></title>
         <link rel="stylesheet" href="<?php echo(SITE_URL);?>/vanilla.css">
         <link rel="alternate" type="application/rss+xml" title="<?php echo(SITE_NAME);?> RSS Feed" href="<?php echo(SITE_URL);?>/feed.rss" />

+ 37 - 11
ppvm_player.js

@@ -32,6 +32,8 @@ function setup_playback(description) {
     startRes = findOptimalOptionForScreen(filteredOptions);
     qualitySelector.value = startRes.path
     qualitySelected();
+
+    doSpeedTest(startRes, filteredOptions);
 }
 
 function qualitySelected() {
@@ -88,19 +90,43 @@ function playStateChanged(playing) {
 }
 
 
-var speedTestStart;
-var speed = 0;
+function doSpeedTest(currentOption, options) {
+    startTime = window.performance.now();
+    request = new XMLHttpRequest();
+    request.onreadystatechange = function() {
+        if(request.readyState === 2) {
+            // Reset start time, headers received.
+            startTime = window.performance.now();
+        }
+        if(request.readyState === 4 && (request.status === 200 || request.status === 206)) {
+            endTime = window.performance.now();
+            size = request.response.size;
+            rate = size / ((endTime - startTime) / 1000)
+            console.log(`Detected connection rate: ${rate} bytes/sec`);
+
+            filtered = options.filter(o => o.type === "video" && o.byterate < rate);
+            if(filtered.length == 0) {
+                filtered = [options[options.length - 1]];
+            }
+            optimal = findOptimalOptionForScreen(filtered);
+
+            if(optimal !== currentOption) {
+                qualitySelector.value = optimal.path
+                console.log("Switched res");
+                qualitySelected();
+            }
+            else {
+                console.log("Got it right first try B)");
+            }
+        }
+    }
 
-function startSpeedTest() {
-    speedTestStart = Date.now();
-}
+    requestSize = Math.min(options[0].filesize, Math.round(options[0].byterate));
 
-function speedTestProgress(transferred) {
-    loadTime = Date.now() - speedTestStart;
-    if(loadTime < 1) {
-        loadTime = 1;
-    }
-    speed = transferred / loadTime;
+    request.open("GET", options[0].path);
+    request.responseType = "blob";
+    request.setRequestHeader("Range", `bytes=0-${requestSize}`);
+    request.send();
 }
 
 // @license-end

+ 34 - 20
video_player.php

@@ -3,10 +3,10 @@
 function ppvm_player($ppub, $path, $video) {
     $metadata = $ppub->metadata;
     $short_title = $metadata["title"];
-    if(strlen($short_title) > 30) {
-        $short_title = substr($short_title, 0, 30);
-        $short_title .= "…";
-    }
+    // if(strlen($short_title) > 30) {
+    //     $short_title = substr($short_title, 0, 30);
+    //     $short_title .= "…";
+    // }
 
 
     ?>
@@ -14,6 +14,7 @@ function ppvm_player($ppub, $path, $video) {
 <html lang="<?php echo($metadata["language"] ?? SITE_LANGUAGE);?>">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <title><?php echo(htmlentities($metadata["title"]));?> - <?php echo(SITE_NAME);?></title>
         <meta name="description" content="<?php echo(htmlentities($metadata["description"]));?>">
         <meta name="author" content="<?php echo(htmlentities($metadata["author"]));?>">
@@ -36,24 +37,28 @@ function ppvm_player($ppub, $path, $video) {
                 background: rgba(45, 45, 45, 0.8);
                 padding: 6px;
                 color: #ffffff;
-                height: 24px;
                 position: absolute;
                 top: -36px;
                 left: 0;
                 right: 0;
                 opacity: 0;
                 transition: 0.2s all;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: 8px;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                font-size: 14px;
             }
 
-            body:hover .additional-contols.javascript, .paused.javascript, .additional-contols.noscript {
+            body:hover .additional-contols.javascript, .paused.javascript, .noscript {
                 top: 0px;
                 opacity: 1;
             }
 
+            .noscript-text {
+                white-space: nowrap;
+                margin-right: 10px;
+                margin-left: 30px;
+            }
+
             body, input {
                 font: 1rem -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
             }
@@ -96,9 +101,17 @@ function ppvm_player($ppub, $path, $video) {
 
             .additional-contols a {
                 color: #ffffff;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                flex-shrink: 2;
             }
+
             .additional-control {
-                display: inline-block;
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: baseline;
+                justify-content: start;
             }
 
             .filler {
@@ -109,11 +122,10 @@ function ppvm_player($ppub, $path, $video) {
                 text-decoration: none;
                 color: #ffffff;
                 margin: 8px;
-                height: 18px;
-                line-height: 20px;
             }
             .site a:hover {
                 color: skyblue;
+                text-decoration: underline;
             }
 
             .additional-control button, .additional-control select {
@@ -134,6 +146,11 @@ function ppvm_player($ppub, $path, $video) {
                 height: 23px;
                 -webkit-appearance: none;
             }
+
+            .additional-control select {
+                margin-left: auto;
+            }
+
             .additional-control button:hover, .additional-control select:hover {
                 color: skyblue;
             }
@@ -178,9 +195,7 @@ function ppvm_player($ppub, $path, $video) {
         <div id="no-script" class="additional-contols noscript">
             <div class="additional-control site">
                 <a href="<?php echo(SITE_URL);?>/<?php echo($_GET["ppub"]);?>/<?php echo($_GET["asset"]);?>" target="_blank" title="<?php echo(htmlentities($metadata["title"]));?>"><strong><?php echo(htmlentities($short_title));?></strong></a>
-            </div>
-            <div class="additional-control noscript">
-                For the best experience, please enable JavaScript.
+                <span class="noscript-text">For the best experience, please enable JavaScript.</span>
             </div>
         </div>
 
@@ -190,8 +205,6 @@ function ppvm_player($ppub, $path, $video) {
                 <button onclick="showInfo()">Info</button>
                 <button onclick="shareVideo()">Share</button>
                 <button onclick="downloadVideo()">Download</button>
-            </div>
-            <div class="additional-control quality">
                 <select name="quality" id="quality-selector" onchange="qualitySelected()">  
                 </select>
             </div>
@@ -225,7 +238,7 @@ function ppvm_player($ppub, $path, $video) {
                 <?php echo($ppub->metadata["copyright"]);?>
                 <?php } if ($ppub->metadata["licence"] != null) { ?>
                 <br/>
-                <a href="<?php echo($ppub->metadata["licence"]);?>">See Licence</a>
+                <a href="<?php echo($ppub->metadata["licence"]);?>" target="_blank">See Licence</a>
                 <?php } ?></p>
                 </div>
                 <div class="controls">
@@ -315,7 +328,8 @@ function ppvm_player($ppub, $path, $video) {
 <?php
                 foreach ($video->entries as $entry) {
                     $entry_asset = $ppub->asset_index[$entry->filename];
-                    echo("            { type: \"" . $entry->type . "\",  mimetype: \"" . $entry_asset->mimetype . "\", path: \"" . $entry->filename . "\", label: \"" . $entry->label . "\", metadata: { ");
+                    $size = ($entry_asset->end_location - $entry_asset->start_location);
+                    echo("            { type: \"" . $entry->type . "\",  mimetype: \"" . $entry_asset->mimetype . "\", path: \"" . $entry->filename . "\", label: \"" . $entry->label . "\", byterate: " . $size / (float)$video->metadata["duration"] . ", filesize: " . $size . ", metadata: { ");
                     foreach ($entry->metadata as $key => $val) {
                         echo($key . ": \"" . $val . "\", ");
                     }