Improved user gallery

Small layout changes
updated dependencies

CHANGELOG.md

@@ -1,3 +1,12 @@
+## v2.3
++ Improved image scaling in user gallery.
++ Added overlay on user gallery images.
++ Fixed IT translation.
++ Fontawesome icon match the single file mime-type.
++ Enable audio player with video.js.
++ Video and audio now starts with volume at 50%.
++ Minor layout fixes.
+
 ## v2.2
 + Added multi-language support.
 + Improved routing.

app/Web/Lang.php

@@ -67,6 +67,15 @@ class Lang
 		return self::$instance;
 	}
 
+	/**
+	 * Recognize the current language from the request.
+	 * @return bool|string
+	 */
+	public static function recognize()
+	{
+		return substr(@$_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+	}
+
 
 	/**
 	 * @param $key

bootstrap/app.php

@@ -58,7 +58,7 @@ $container['database'] = function ($container) use (&$config) {
 	return DB::getInstance();
 };
 
-Lang::build(substr(@$_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2), __DIR__. '/../resources/lang/');
+Lang::build(Lang::recognize(), __DIR__. '/../resources/lang/');
 
 $container['view'] = function ($container) use (&$config) {
 	$view = new \Slim\Views\Twig(__DIR__ . '/../resources/templates', [

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "61a3ac382bb0960dd8e44736c0be5178",
+    "content-hash": "b7bca0067b8963611274642752122ecb",
     "packages": [
         {
             "name": "container-interop/container-interop",
@@ -174,16 +174,16 @@
         },
         {
             "name": "league/flysystem",
-            "version": "1.0.48",
+            "version": "1.0.49",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/flysystem.git",
-                "reference": "a6ded5b2f6055e2db97b4b859fdfca2b952b78aa"
+                "reference": "a63cc83d8a931b271be45148fa39ba7156782ffd"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/a6ded5b2f6055e2db97b4b859fdfca2b952b78aa",
-                "reference": "a6ded5b2f6055e2db97b4b859fdfca2b952b78aa",
+                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/a63cc83d8a931b271be45148fa39ba7156782ffd",
+                "reference": "a63cc83d8a931b271be45148fa39ba7156782ffd",
                 "shasum": ""
             },
             "require": {
@@ -254,7 +254,7 @@
                 "sftp",
                 "storage"
             ],
-            "time": "2018-10-15T13:53:10+00:00"
+            "time": "2018-11-23T23:41:29+00:00"
         },
         {
             "name": "monolog/monolog",
@@ -531,16 +531,16 @@
         },
         {
             "name": "psr/log",
-            "version": "1.0.2",
+            "version": "1.1.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/php-fig/log.git",
-                "reference": "4ebe3a8bf773a19edfe0a84b6585ba3d401b724d"
+                "reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/php-fig/log/zipball/4ebe3a8bf773a19edfe0a84b6585ba3d401b724d",
-                "reference": "4ebe3a8bf773a19edfe0a84b6585ba3d401b724d",
+                "url": "https://api.github.com/repos/php-fig/log/zipball/6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
+                "reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
                 "shasum": ""
             },
             "require": {
@@ -574,7 +574,7 @@
                 "psr",
                 "psr-3"
             ],
-            "time": "2016-10-10T12:19:37+00:00"
+            "time": "2018-11-20T15:27:04+00:00"
         },
         {
             "name": "slim/slim",

resources/lang/it.lang.php

@@ -28,7 +28,7 @@ return [
 	'public.delete_text' => 'Sei sicuro di voler eliminare questo elemento? Andrà perso per sempre!',
 
 	'preview' => 'Anteprima',
-	'filename' => 'Filename',
+	'filename' => 'Nome file',
 	'size' => 'Dimensione',
 	'public' => 'Pubblico',
 	'owner' => 'Proprietario',
@@ -57,7 +57,7 @@ return [
 	'copy' => 'Copia',
 	'update' => 'Aggiorna',
 	'edit' => 'Modifica',
-	'client_config' => 'Configurazione del Client',
+	'client_config' => 'Config. client',
 	'user_code' => 'Codice Utente',
 	'active' => 'Attivo',
 	'admin' => 'Amministratore',

resources/templates/base.twig

@@ -17,7 +17,7 @@
     <script src="{{ urlFor('/static/videojs/video.min.js') }}"></script>
     <script src="{{ urlFor('/static/app/app.js') }}"></script>
     <script>hljs.initHighlightingOnLoad();</script>
-    <script>window.AppConfig = {'base_url': '{{ config.base_url }}'}</script>
+    <script>window.AppConfig = {'base_url': '{{ config.base_url }}', 'lang': {'publish': '{{ lang('publish') }}', 'hide': '{{ lang('hide') }}'}}</script>
     {% block head %}{% endblock %}
 </head>
 <body>

resources/templates/comp/navbar.twig

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark bg-primary navbar-expand-md mb-4 box-shadow">
+<nav class="navbar navbar-dark bg-primary navbar-expand-md mb-4 shadow-sm">
     <div class="container">
         <a class="navbar-brand" href="{{ route('root') }}">{{ config.app_name }}</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@@ -29,7 +29,7 @@
                     <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fas fa-fw fa-user"></i> {{ session.username }}
                     </a>
-                    <div class="dropdown-menu" aria-labelledby="userDropdown">
+                    <div class="dropdown-menu shadow-sm" aria-labelledby="userDropdown">
                         <a class="dropdown-item disabled" href="javascript:void(0)">{{ lang('used') }}: {{ session.used_space }}</a>
                         <div class="dropdown-divider"></div>
                         <a class="dropdown-item" href="{{ route('profile') }}"><i class="fas fa-fw fa-user"></i> {{ lang('profile') }}</a>

resources/templates/dashboard/admin.twig

@@ -7,7 +7,7 @@
     <div class="container">
         {% include 'comp/alert.twig' %}
         {% if medias|length > 0 %}
-            <div class="card box-shadow">
+            <div class="card shadow-sm">
                 <div class="card-body">
                     {% include 'comp/pager.twig' with {'path': 'home'} %}
                     <div class="row">
@@ -28,16 +28,15 @@
                                     <tbody>
                                     {% for media in medias %}
                                         <tr id="media_{{ media.id }}">
-                                            <td>
+                                            <td class="text-center">
                                                 {% if media.mimetype starts with 'image' %}
                                                     {% if media.username is not null %}
-                                                        <img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=128') }}"
-                                                             class="img-fluid rounded admin-img">
+                                                        <img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=256&height=128') }}" class="img-fluid rounded admin-img">
                                                     {% else %}
                                                         <img src="{{ route('upload.raw', {'id': media.id}) }}" class="img-fluid rounded admin-img">
                                                     {% endif %}
                                                 {% else %}
-                                                    <i class="far fa-file fa-2x"></i>
+                                                    <i class="far {{ mime2font(media.mimetype) }} fa-2x"></i>
                                                 {% endif %}
                                             </td>
                                             <td>{{ media.filename }}</td>

resources/templates/dashboard/home.twig

@@ -11,28 +11,36 @@
             <div class="row">
                 {% for media in medias %}
                     <div class="col-md-4" id="media_{{ media.id }}">
-                        <div class="card mb-4 box-shadow">
+                        <div class="card mb-4 shadow-sm">
                             {% if media.mimetype starts with 'image' %}
                                 <img class="card-img" src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=286&height=219') }}" alt="Card image">
                             {% else %}
                                 <div class="text-center" style="font-size: 178px;"><i class="far {{ mime2font(media.mimetype) }} mb-4 mt-4"></i></div>
                             {% endif %}
                             <div class="card-img-overlay" title="{{ media.filename }}">
-                                <div class="user-img-buttons">
-                                    <span class="badge badge-dark box-shadow-strong">{{ media.size }}</span>
-                                    <div class="btn-group box-shadow-strong float-right">
-                                        <a class="btn btn-sm btn-light" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" data-toggle="tooltip" title="{{ lang('open') }}" target="_blank"><i class="fas fa-external-link-alt"></i></a>
-                                        <button type="button" class="btn btn-sm btn-success btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}">
-                                            <i class="fas fa-link"></i>
-                                        </button>
-                                        {% if media.published %}
-                                            <a href="javascript:void(0)" class="btn btn-sm btn-warning publish-toggle" data-toggle="tooltip" title="{{ lang('hide') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-times-circle"></i></a>
-                                        {% else %}
-                                            <a href="javascript:void(0)" class="btn btn-sm btn-info publish-toggle" data-toggle="tooltip" title="{{ lang('publish') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-check-circle"></i></a>
-                                        {% endif %}
-                                        <button type="button" class="btn btn-sm btn-danger media-delete" data-link="{{ route('upload.delete', {'id': media.id}) }}" data-id="{{ media.id }}" data-toggle="tooltip" title="{{ lang('delete') }}">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
+                                <div class="user-img-overlay h-75">
+                                    <div class="row">
+                                        <div class="col-12">
+                                            <span class="badge badge-dark shadow-lg">{{ media.size }}</span>
+                                            <div class="btn-group shadow-lg float-right">
+                                                <button type="button" class="btn btn-sm btn-success btn-clipboard" data-toggle="tooltip" title="{{ lang('copy_link') }}" data-clipboard-text="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}">
+                                                    <i class="fas fa-link"></i>
+                                                </button>
+                                                {% if media.published %}
+                                                    <a href="javascript:void(0)" class="btn btn-sm btn-warning publish-toggle" data-toggle="tooltip" title="{{ lang('hide') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-times-circle"></i></a>
+                                                {% else %}
+                                                    <a href="javascript:void(0)" class="btn btn-sm btn-info publish-toggle" data-toggle="tooltip" title="{{ lang('publish') }}" data-id="{{ media.id }}" data-published="{{ media.published }}"><i class="fas fa-check-circle"></i></a>
+                                                {% endif %}
+                                                <button type="button" class="btn btn-sm btn-danger media-delete" data-link="{{ route('upload.delete', {'id': media.id}) }}" data-id="{{ media.id }}" data-toggle="tooltip" title="{{ lang('delete') }}">
+                                                    <i class="fas fa-trash"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row h-100">
+                                        <div class="col-12 d-flex align-items-center">
+                                            <a class="btn btn-link btn-block btn-outlink text-secondary" href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension) }}" target="_blank"><i class="fas fa-external-link-alt"></i></a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>

resources/templates/dashboard/system.twig

@@ -7,7 +7,7 @@
     <div class="container">
         <div class="row">
             <div class="col-xl-3 col-sm-6 mb-3">
-                <div class="card bg-success text-white h-100 box-shadow">
+                <div class="card bg-success text-white h-100 shadow-sm">
                     <div class="card-body bg-success">
                         <div class="rotate">
                             <i class="fas fa-users fa-3x"></i>
@@ -18,7 +18,7 @@
                 </div>
             </div>
             <div class="col-xl-3 col-sm-6 mb-3">
-                <div class="card bg-danger text-white h-100 box-shadow">
+                <div class="card bg-danger text-white h-100 shadow-sm">
                     <div class="card-body bg-danger">
                         <div class="rotate">
                             <i class="fas fa-weight fa-3x"></i>
@@ -29,7 +29,7 @@
                 </div>
             </div>
             <div class="col-xl-3 col-sm-6 mb-3">
-                <div class="card bg-warning text-white h-100 box-shadow">
+                <div class="card bg-warning text-white h-100 shadow-sm">
                     <div class="card-body bg-warning">
                         <div class="rotate">
                             <i class="fas fa-upload fa-3x"></i>
@@ -40,7 +40,7 @@
                 </div>
             </div>
             <div class="col-xl-3 col-sm-6 mb-3">
-                <div class="card bg-dark text-white h-100 box-shadow">
+                <div class="card bg-dark text-white h-100 shadow-sm">
                     <div class="card-body bg-dark">
                         <div class="rotate">
                             <i class="fas fa-unlink fa-3x"></i>
@@ -53,7 +53,7 @@
         </div>
         <div class="row">
             <div class="col-md-8">
-                <div class="card box-shadow">
+                <div class="card shadow-sm">
                     <div class="card-header"><i class="fas fa-paint-brush fa-fw"></i> {{ lang('theme') }}</div>
                     <div class="card-body">
                         <form method="post" action="{{ route('theme.apply') }}">
@@ -76,7 +76,7 @@
                 </div>
             </div>
             <div class="col-md-4">
-                <div class="card box-shadow">
+                <div class="card shadow-sm">
                     <div class="card-header"><i class="fas fa-cog fa-fw"></i> {{ lang('system_info') }}</div>
                     <div class="card-body">
                         <strong>Max upload size:</strong>

resources/templates/upload/public.twig

@@ -16,7 +16,7 @@
                        data-content='<input type="text" class="form-control mb-2" id="telegram-share-text" onclick="this.select()" value="{{ media.filename }}">
 <button type="button" class="btn btn-info btn-block" id="telegram-share-button" onclick="app.telegramShare()" data-url="https://telegram.me/share/url?url={{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension) }}&text="><i class="fab fa-telegram-plane fa-lg fa-fw"></i> {{ lang("send") }}</button>'><i
                                 class="fab fa-telegram-plane fa-lg fa-fw"></i></a>
-                    <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="btn btn-light my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
+                    <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" class="btn btn-secondary my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('raw') }}"><i class="fas fa-file-alt fa-lg fa-fw"></i></a>
                     <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-danger my-2 my-sm-0" data-toggle="tooltip" title="{{ lang('download') }}"><i class="fas fa-cloud-download-alt fa-lg fa-fw"></i></a>
                 </div>
             </div>
@@ -61,18 +61,16 @@
                     </div>
                 {% elseif media.mimetype starts with 'video' %}
                     <div class="media-player">
-                        <video class="video-js vjs-fluid vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true, "preload": "auto", "responsive": true}'>
+                        <video id="player" class="video-js vjs-fluid vjs-big-play-centered" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
                             <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
                             Your browser does not support HTML5 video.
-                            <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                         </video>
                     </div>
                 {% elseif media.mimetype starts with 'audio' %}
                     <div class="media-player">
-                        <audio class="video-js vjs-fluid vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true, "preload": "auto", "responsive": true}'>
+                        <audio id="player"  class="video-js vjs-fluid vjs-big-play-centered" autoplay controls loop preload="auto" data-setup='{"responsive": true }'>
                             <source src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/raw') }}" type="{{ media.mimetype }}">
                             Your browser does not support HTML5 audio.
-                            <a href="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ extension ~ '/download') }}" class="btn btn-dark btn-lg"><i class="fas fa-cloud-download-alt fa-fw"></i> Download</a>
                         </audio>
                     </div>
                 {% else %}

resources/templates/user/create.twig

@@ -8,7 +8,7 @@
         {% include 'comp/alert.twig' %}
         <div class="row justify-content-center">
             <div class="col-md-8">
-                <div class="card box-shadow">
+                <div class="card shadow-sm">
                     <div class="card-header">{{ lang('user.create') }}</div>
                     <div class="card-body">
                         <form method="post" action="{{ route('user.store') }}">

resources/templates/user/edit.twig

@@ -8,7 +8,7 @@
         {% include 'comp/alert.twig' %}
         <div class="row justify-content-center">
             <div class="col-md-8">
-                <div class="card box-shadow">
+                <div class="card shadow-sm">
                     {% if not profile %}
                         <div class="card-header">{{ lang('user.edit') }}</div>
                     {% endif %}
@@ -51,7 +51,7 @@
                             <div class="form-group row">
                                 <label class="col-sm-2 col-form-label">{{ lang('client_config') }}</label>
                                 <div class="col-sm-10">
-                                    <a href="{{ route('config.sharex', {'id': user.id}) }}" class="btn btn-lg btn-outline-dark"><i class="fas fa-fw fa-download"></i> ShareX Config File</a>
+                                    <a href="{{ route('config.sharex', {'id': user.id}) }}" class="btn btn-lg btn-outline-dark"><i class="fas fa-fw fa-download"></i> ShareX Config</a>
                                 </div>
                             </div>
                             {% if not profile %}

resources/templates/user/index.twig

@@ -6,7 +6,7 @@
     {% include 'comp/navbar.twig' %}
     <div class="container">
         {% include 'comp/alert.twig' %}
-        <div class="card box-shadow">
+        <div class="card shadow-sm">
             <div class="card-body">
                 <div class="text-right">
                     <a href="{{ route('user.create') }}" class="btn btn-outline-success mb-3"><i class="fas fa-plus"></i> {{ lang('user.create') }}</a>

src/css/app.css

@@ -41,14 +41,6 @@ body {
     border-top-right-radius: 0;
 }
 
-.box-shadow {
-    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}
-
-.box-shadow-strong {
-    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
-}
-
 .admin-img {
     max-height: 25px;
 }
@@ -60,20 +52,28 @@ body {
     max-width: 200px;
 }
 
-.user-img-buttons {
+.user-img-overlay {
     opacity: 0;
     transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     -webkit-transition: opacity .5s ease-in-out;
 }
 
-.card-img-overlay:hover .user-img-buttons {
+.card-img-overlay:hover .user-img-overlay {
     opacity: 1;
     transition: opacity .2s ease-in-out;
     -moz-transition: opacity .2s ease-in-out;
     -webkit-transition: opacity .2s ease-in-out;
 }
 
+.btn-outlink {
+    padding: 25% 0;
+}
+
+.btn-outlink:hover, .btn-outlink:active, .btn-outlink:focus, .btn-outlink:not(:disabled):not(.disabled):focus {
+    background-color: transparent;
+}
+
 .footer {
     position: absolute;
     bottom: 0;
@@ -83,7 +83,7 @@ body {
     text-align: right;
 }
 
-.media-player{
+.media-player {
     width: 80%;
     margin-right: auto;
     margin-left: auto;

src/js/app.js

@@ -15,6 +15,12 @@ var app = {
 
         new ClipboardJS('.btn-clipboard');
 
+        if ($('#player').length > 0) {
+            videojs('player').ready(function () {
+                this.volume(0.5);
+            });
+        }
+
         console.log('Application is ready.');
     },
     modalDelete: function () {
@@ -29,7 +35,7 @@ var app = {
                 $callerButton
                     .data('published', false)
                     .tooltip('dispose')
-                    .attr('title', 'Publish')
+                    .attr('title', window.AppConfig.lang.publish)
                     .tooltip()
                     .removeClass('btn-warning')
                     .addClass('btn-info')
@@ -41,7 +47,7 @@ var app = {
                 $callerButton
                     .data('published', true)
                     .tooltip('dispose')
-                    .attr('title', 'Unpublish')
+                    .attr('title', window.AppConfig.lang.hide)
                     .tooltip()
                     .removeClass('btn-info')
                     .addClass('btn-warning')