Merge pull request #611 from pixelfed/frontend-ui-refactor

Swap out video.js for plyr.js

package-lock.json

@@ -2,20 +2,6 @@
     "requires": true,
     "lockfileVersion": 1,
     "dependencies": {
-        "@videojs/http-streaming": {
-            "version": "1.2.5",
-            "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-1.2.5.tgz",
-            "integrity": "sha512-kqjx9oc4NiiUwzqt8EI2PcuebC0WlnxsWydUoMSktLmXc/T6qVS0m8d1eyMA2tjlDILvKkjq2YPS7Jl81phbQQ==",
-            "requires": {
-                "aes-decrypter": "3.0.0",
-                "global": "^4.3.0",
-                "m3u8-parser": "4.2.0",
-                "mpd-parser": "0.6.1",
-                "mux.js": "4.5.1",
-                "url-toolkit": "^2.1.3",
-                "video.js": "^6.8.0 || ^7.0.0"
-            }
-        },
         "abbrev": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -101,16 +87,6 @@
                 }
             }
         },
-        "aes-decrypter": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.0.0.tgz",
-            "integrity": "sha1-eEihwUW5/b9Xrj4rWxvHzwZEqPs=",
-            "requires": {
-                "commander": "^2.9.0",
-                "global": "^4.3.2",
-                "pkcs7": "^1.0.2"
-            }
-        },
         "after": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -1957,7 +1933,8 @@
         "commander": {
             "version": "2.17.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-            "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+            "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+            "dev": true
         },
         "commondir": {
             "version": "1.0.1",
@@ -2565,6 +2542,11 @@
                 "array-find-index": "^1.0.1"
             }
         },
+        "custom-event-polyfill": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.6.tgz",
+            "integrity": "sha512-3FxpFlzGcHrDykwWu+xWVXZ8PfykM/9/bI3zXb953sh+AjInZWcQmrnmvPoZgiqNjmbtTm10PWvYqvRW527x6g=="
+        },
         "cyclist": {
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -2787,11 +2769,6 @@
                 "buffer-indexof": "^1.0.0"
             }
         },
-        "dom-walk": {
-            "version": "0.1.1",
-            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-            "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -3624,14 +3601,6 @@
                 "debug": "^3.1.0"
             }
         },
-        "for-each": {
-            "version": "0.3.3",
-            "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-            "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-            "requires": {
-                "is-callable": "^1.1.3"
-            }
-        },
         "for-in": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4460,22 +4429,6 @@
                 }
             }
         },
-        "global": {
-            "version": "4.3.2",
-            "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
-            "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
-            "requires": {
-                "min-document": "^2.19.0",
-                "process": "~0.5.1"
-            },
-            "dependencies": {
-                "process": {
-                    "version": "0.5.2",
-                    "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
-                    "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
-                }
-            }
-        },
         "globals": {
             "version": "9.18.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -5043,11 +4996,6 @@
             "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
             "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
         },
-        "individual": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
-            "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
-        },
         "infinite-scroll": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/infinite-scroll/-/infinite-scroll-3.0.5.tgz",
@@ -5218,7 +5166,8 @@
         "is-callable": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-            "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
+            "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
+            "dev": true
         },
         "is-data-descriptor": {
             "version": "0.1.4",
@@ -5312,11 +5261,6 @@
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
             "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
         },
-        "is-function": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
-            "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
-        },
         "is-glob": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
@@ -5696,6 +5640,11 @@
                 "json5": "^0.5.0"
             }
         },
+        "loadjs": {
+            "version": "3.5.4",
+            "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-3.5.4.tgz",
+            "integrity": "sha512-vJO1whnJ/9Cg+Z8tOLVGuIaLiGpCxEd/+R1OgzWJxoJHAfXOfHqJWnsGbst9Q8dQAGVvt4/X8zhCO0EtlnXcRg=="
+        },
         "locate-path": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@@ -5896,11 +5845,6 @@
                 "yallist": "^2.1.2"
             }
         },
-        "m3u8-parser": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.2.0.tgz",
-            "integrity": "sha512-LVHw0U6IPJjwk9i9f7Xe26NqaUHTNlIt4SSWoEfYFROeVKHN6MIjOhbRheI3dg8Jbq5WCuMFQ0QU3EgZpmzFPg=="
-        },
         "make-dir": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -6084,14 +6028,6 @@
             "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
         },
-        "min-document": {
-            "version": "2.19.0",
-            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-            "requires": {
-                "dom-walk": "^0.1.0"
-            }
-        },
         "minimalistic-assert": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -6199,15 +6135,6 @@
                 "run-queue": "^1.0.3"
             }
         },
-        "mpd-parser": {
-            "version": "0.6.1",
-            "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.6.1.tgz",
-            "integrity": "sha512-3ucsY5NJMABltTLtYMSDfqZpvKV4yF8YvMx91hZFrHiblseuoKq4XUQ5IkcdtFAIRBAkPhXMU3/eunTFNCNsHw==",
-            "requires": {
-                "global": "^4.3.0",
-                "url-toolkit": "^2.1.1"
-            }
-        },
         "ms": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -6234,11 +6161,6 @@
             "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
             "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
         },
-        "mux.js": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.5.1.tgz",
-            "integrity": "sha512-j4rEyZKCRinGaSiBxPx9YD9B782TMPHPOlKyaMY07vIGTNYg4ouCEBvL6zX9Hh1k1fKZ5ZF3S7c+XVk6PB+Igw=="
-        },
         "nan": {
             "version": "2.11.0",
             "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.0.tgz",
@@ -6873,15 +6795,6 @@
                 }
             }
         },
-        "parse-headers": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.1.tgz",
-            "integrity": "sha1-aug6eqJanZtwCswoaYzR8e1+lTY=",
-            "requires": {
-                "for-each": "^0.3.2",
-                "trim": "0.0.1"
-            }
-        },
         "parse-json": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -7024,11 +6937,6 @@
                 "pinkie": "^2.0.0"
             }
         },
-        "pkcs7": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.2.tgz",
-            "integrity": "sha1-ttulJ1KMKUK/wSLOLa/NteWQdOc="
-        },
         "pkg-dir": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -7038,6 +6946,18 @@
                 "find-up": "^2.1.0"
             }
         },
+        "plyr": {
+            "version": "3.4.7",
+            "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.4.7.tgz",
+            "integrity": "sha512-RxxT2WdC4/sEZQT7CBZqKx5ImVw96aWjT6kB6DM82jy9GcWDiBBnv04m/AeeaXg9S5ambPdiHhB6Pzfm2q84Gw==",
+            "requires": {
+                "core-js": "^2.5.7",
+                "custom-event-polyfill": "^1.0.6",
+                "loadjs": "^3.5.4",
+                "raven-js": "^3.27.0",
+                "url-polyfill": "^1.1.0"
+            }
+        },
         "popper.js": {
             "version": "1.14.4",
             "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
@@ -9324,6 +9244,11 @@
             "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
             "dev": true
         },
+        "raven-js": {
+            "version": "3.27.0",
+            "resolved": "https://registry.npmjs.org/raven-js/-/raven-js-3.27.0.tgz",
+            "integrity": "sha512-vChdOL+yzecfnGA+B5EhEZkJ3kY3KlMzxEhShKh6Vdtooyl0yZfYNFQfYzgMf2v4pyQa+OTZ5esTxxgOOZDHqw=="
+        },
         "raw-body": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
@@ -9821,14 +9746,6 @@
                 "aproba": "^1.1.1"
             }
         },
-        "rust-result": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
-            "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
-            "requires": {
-                "individual": "^2.0.0"
-            }
-        },
         "rx": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
@@ -9839,14 +9756,6 @@
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
-        "safe-json-parse": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-            "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
-            "requires": {
-                "rust-result": "^1.0.0"
-            }
-        },
         "safe-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -10880,11 +10789,6 @@
                 "punycode": "^1.4.1"
             }
         },
-        "trim": {
-            "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-            "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
-        },
         "trim-newlines": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -10906,11 +10810,6 @@
                 "glob": "^7.1.2"
             }
         },
-        "tsml": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
-            "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
-        },
         "tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -11270,10 +11169,10 @@
                 "requires-port": "^1.0.0"
             }
         },
-        "url-toolkit": {
+        "url-polyfill": {
-            "version": "2.1.6",
+            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.3.tgz",
-            "integrity": "sha512-UaZ2+50am4HwrV2crR/JAf63Q4VvPYphe63WGeoJxeu8gmOm0qxPt+KsukfakPNrX9aymGNEkkaoICwn+OuvBw=="
+            "integrity": "sha512-xIAXc0DyXJCd767sSeRu4eqisyYhR0z0sohWArCn+WPwIatD39xGrc09l+tluIUi6jGkpGa8Gz8TKwkKYxMQvQ=="
         },
         "use": {
             "version": "3.1.1",
@@ -11349,34 +11248,6 @@
                 "extsprintf": "^1.2.0"
             }
         },
-        "video.js": {
-            "version": "7.2.3",
-            "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.2.3.tgz",
-            "integrity": "sha512-oiRGXew1yKk3ILh9+8cvnV0PQp8oqs/2XtkoO46j7BMsFvhgl9L+dy+hS//MUSh1JNgDGUkM/K+E6WTTLlwN7w==",
-            "requires": {
-                "@videojs/http-streaming": "1.2.5",
-                "babel-runtime": "^6.9.2",
-                "global": "4.3.2",
-                "safe-json-parse": "4.0.0",
-                "tsml": "1.0.1",
-                "videojs-font": "3.0.0",
-                "videojs-vtt.js": "0.14.1",
-                "xhr": "2.4.0"
-            }
-        },
-        "videojs-font": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.0.0.tgz",
-            "integrity": "sha512-XS6agz2T7p2cFuuXulJD70md8XMlAN617SJkMWjoTPqZWv+RU8NcZCKsE3Tk73inzxnQdihOp0cvI7NGz2ngHg=="
-        },
-        "videojs-vtt.js": {
-            "version": "0.14.1",
-            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz",
-            "integrity": "sha512-YxOiywx6N9t3J5nqsE5WN2Sw4CSqVe3zV+AZm2T4syOc2buNJaD6ZoexSdeszx2sHLU/RRo2r4BJAXFDQ7Qo2Q==",
-            "requires": {
-                "global": "^4.3.1"
-            }
-        },
         "vm-browserify": {
             "version": "0.0.4",
             "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -11862,17 +11733,6 @@
                 "ultron": "~1.1.0"
             }
         },
-        "xhr": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
-            "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
-            "requires": {
-                "global": "~4.3.0",
-                "is-function": "^1.0.1",
-                "parse-headers": "^2.0.0",
-                "xtend": "^4.0.0"
-            }
-        },
         "xmlhttprequest": {
             "version": "1.8.0",
             "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
@@ -11886,7 +11746,8 @@
         "xtend": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-            "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+            "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+            "dev": true
         },
         "y18n": {
             "version": "3.2.1",

package.json

@@ -24,11 +24,11 @@
         "filesize": "^3.6.1",
         "infinite-scroll": "^3.0.4",
         "laravel-echo": "^1.4.0",
+        "plyr": "^3.4.7",
         "pusher-js": "^4.2.2",
         "readmore-js": "^2.2.1",
         "socket.io-client": "^2.1.1",
         "sweetalert": "^2.1.0",
-        "twitter-text": "^2.0.5",
+        "twitter-text": "^2.0.5"
-        "video.js": "^7.2.3"
     }
 }

resources/assets/js/components.js

@@ -20,6 +20,7 @@ pixelfed.readmore = () => {
 
 window.InfiniteScroll = require('infinite-scroll');
 window.filesize = require('filesize');
+window.Plyr = require('plyr');
 import swal from 'sweetalert';
 
 require('./components/localstorage');

resources/assets/js/components/PostComponent.vue

@@ -173,14 +173,30 @@ pixelfed.presenter = {
 
     video: function(container, media) {
       let wrapper = $('<div>');
-      wrapper.addClass('embed-responsive embed-responsive-4by3');
+      wrapper.addClass('');
       let el = $('<video>');
       el.addClass('embed-responsive-item');
       el.attr('controls', '');
+      el.attr('loop', '');
       el.attr('src', media[0]['url']);
       el.attr('title', media[0]['description']);
       wrapper.append(el);
       container.append(wrapper);
+      
+      const player = new Plyr(el, {
+        controls: [
+            'restart', // Restart playback
+            'play', // Play/pause playback
+            'progress', // The progress bar and scrubber for playback and buffering
+            'current-time', // The current time of playback
+            'duration', // The full duration of the media
+            'volume', // Volume control
+            'captions', // Toggle captions
+            'settings', // Settings menu
+            'fullscreen', // Toggle fullscreen
+        ]
+      });
+      player.volume = 0.75;
     },
 
     imageAlbum: function(container, media, status) {

resources/assets/sass/app.scss

@@ -20,3 +20,5 @@
 @import "components/switch";
 
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
+
+@import '~plyr/dist/plyr.css';