Merge remote-tracking branch 'origin/master'

# Conflicts:
#	resources/templates/dashboard/home.twig

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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%.
++ Added linux script to allow uploads from linux screenshot tools.
++ Minor layout fixes.
+
 ## v2.2
 + Added multi-language support.
 + Improved routing.

app/Controllers/UserController.php

@@ -351,10 +351,9 @@ class UserController extends Controller
 			return $response->withRedirect($request->getHeaderLine('HTTP_REFERER'));
 		}
 
-		$base_url = $this->settings['base_url'];
 		$json = [
 			'DestinationType' => 'ImageUploader, TextUploader, FileUploader',
-			'RequestURL' => "$base_url/upload",
+			'RequestURL' => route('upload'),
 			'FileFormName' => 'upload',
 			'Arguments' => [
 				'file' => '$filename$',
@@ -371,6 +370,41 @@ class UserController extends Controller
 			->withJson($json, 200, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
 	}
 
+	/**
+	 * @param Request $request
+	 * @param Response $response
+	 * @param $args
+	 * @return Response
+	 * @throws NotFoundException
+	 * @throws UnauthorizedException
+	 */
+	public function getUploaderScriptFile(Request $request, Response $response, $args): Response
+	{
+		$user = $this->database->query('SELECT * FROM `users` WHERE `id` = ? LIMIT 1', $args['id'])->fetch();
+
+		if (!$user) {
+			throw new NotFoundException($request, $response);
+		}
+
+		if ($user->id !== Session::get('user_id') && !Session::get('admin', false)) {
+			throw new UnauthorizedException();
+		}
+
+		if ($user->token === null || $user->token === '') {
+			Session::alert('You don\'t have a personal upload token. (Click the update token button and try again)', 'danger');
+			return $response->withRedirect($request->getHeaderLine('HTTP_REFERER'));
+		}
+
+		return $this->view->render($response->withHeader('Content-Disposition', 'attachment;filename="xbackbone_uploader_' . $user->username . '.sh"'),
+			'scripts/xbackbone_uploader.sh.twig',
+			[
+				'username' => $user->username,
+				'upload_url' => route('upload'),
+				'token' => $user->token,
+			]
+		);
+	}
+
 	/**
 	 * @return string
 	 */

app/Web/Lang.php

@@ -57,6 +57,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

app/routes.php

@@ -19,6 +19,7 @@ $app->group('', function () {
 	$this->post('/profile/{id}', \App\Controllers\UserController::class . ':profileEdit')->setName('profile.update');
 	$this->post('/user/{id}/refreshToken', \App\Controllers\UserController::class . ':refreshToken')->setName('refreshToken');
 	$this->get('/user/{id}/config/sharex', \App\Controllers\UserController::class . ':getShareXconfigFile')->setName('config.sharex');
+	$this->get('/user/{id}/config/script', \App\Controllers\UserController::class . ':getUploaderScriptFile')->setName('config.script');
 
 	$this->post('/upload/{id}/publish', \App\Controllers\UploadController::class . ':togglePublish')->setName('upload.publish');
 	$this->post('/upload/{id}/unpublish', \App\Controllers\UploadController::class . ':togglePublish')->setName('upload.unpublish');

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

@@ -1,6 +1,6 @@
 {% extends 'base.twig' %}
 
-{% block title %}Home{% endblock %}
+{% block title %}{{ lang('home') }}{% endblock %}
 
 {% block content %}
     {% include 'comp/navbar.twig' %}
@@ -11,44 +11,50 @@
             <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' %}
-                                <a href="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ media.extension }}" target="_blank">
-                                    <img class="card-img-top user-img" src="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ media.extension }}/raw?width=348&height=192" alt="{{ media.filename }}">
-                                </a>
+                                <img class="card-img" src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=286&height=219') }}" alt="Card image">
                             {% else %}
-                                <a href="{{ config.base_url }}/{{ media.user_code }}/{{ media.code }}.{{ media.extension }}" target="_blank">
-                                    <div class="card-header text-center"><i class="far fa-file fa-10x"></i></div>
-                                </a>
+                                <div class="text-center" style="font-size: 178px;"><i class="far {{ mime2font(media.mimetype) }} mb-4 mt-4"></i></div>
                             {% endif %}
-                            <div class="card-body">
-                                <p class="card-text">{{ media.filename }}
-                                    <small class="float-right">{{ media.size }}</small>
-                                </p>
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <div class="btn-group">
-                                        <button type="button" class="btn btn-sm btn-outline-success btn-clipboard" data-toggle="tooltip" title="Copy link" data-clipboard-text="{{ config.base_url }}/{{ 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-outline-warning publish-toggle" data-toggle="tooltip" title="Unpublish" 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-outline-info publish-toggle" data-toggle="tooltip" title="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-outline-danger media-delete" data-link="{{ config.base_url }}/upload/{{ media.id }}/delete" data-id="{{ media.id }}" data-toggle="tooltip" title="Delete">
-                                            <i class="fas fa-trash"></i>
-                                        </button>
+                            <div class="card-img-overlay" title="{{ media.filename }}">
+                                <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>
-                                    <small class="text-muted">{{ media.timestamp|date("d/m/Y H:i:s") }}</small>
                                 </div>
                             </div>
+                            <div class="card-footer d-flex justify-content-between">
+                                <span class="user-title">{{ media.filename }}</span>
+                                <small>{{ media.timestamp|date("d/m/Y H:i") }}</small>
+                            </div>
                         </div>
                     </div>
                 {% endfor %}
             </div>
             {% include 'comp/pager.twig' with {'path': 'home'} %}
         {% else %}
-            <div class="text-center text-muted"><i>No medias found.</i></div>
+            <div class="text-center text-muted"><i>{{ lang('no_media') }}</i></div>
         {% endif %}
     </div>
     {% include 'comp/footer.twig' %}

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/scripts/xbackbone_uploader.sh.twig

@@ -0,0 +1,70 @@
+#!/bin/bash
+
+am_i_root() {
+    if [ "$EUID" -ne 0 ]; then
+        echo "Please run as root or with sudo";
+        exit;
+    fi
+}
+
+create_desktop_entry() {
+cat << "EOF" > "/usr/share/applications/xbackbone-uploader-usr_{{ username }}.desktop"
+[Desktop Entry]
+Encoding=UTF-8
+Exec=&EXEC& %U
+Type=Application
+Terminal=false;
+Comment=Uploader script for XBackBone ({{ username }})
+Name=XBackBone Uploader ({{ username }})
+GenericName=File Uploader
+StartupNotify=false
+Categories=Graphics;
+MimeType=image/bmp;image/jpeg;image/gif;image/png;image/tiff;image/x-bmp;image/x-ico;image/x-png;image/x-pcx;image/x-tga;image/xpm;image/svg+xml;
+NoDisplay=false
+EOF
+
+    sed -i "s:&EXEC&:${1}:g" "/usr/share/applications/xbackbone-uploader-usr_{{ username }}.desktop"
+    echo "Desktop entry created!";
+}
+
+upload() {
+    RESPONSE="$(curl -F "token={{ token }}" -F "upload=@${1}" {{ upload_url }})";
+
+    if [[ "$(echo "${RESPONSE}" | jq -r '.message')" == "OK." ]]; then
+        URL="$(echo "${RESPONSE}" | jq -r '.url')";
+        echo "${URL}" | xclip -selection c;
+        notify-send "Upload completed!" "${URL}";
+    else
+        notify-send "Error!" "$(echo "${RESPONSE}" | jq -r '.message')";
+    fi
+}
+
+check() {
+	if [ ! -x "$(command -v xclip)" ]; then
+        echo "xclip command not found."
+        exit;
+	fi	
+
+	if [ ! -x "$(command -v curl)" ]; then
+        echo "curl command not found."
+        exit;
+	fi
+
+	if [ ! -x "$(command -v notify-send)" ]; then
+        echo "notify-send command not found."
+        exit;
+	fi
+}
+
+check
+if [ "${1}" == "-desktop-entry" ]; then
+    am_i_root
+    create_desktop_entry "$(realpath "${0}")";
+    exit;
+fi
+
+if [ -f "${1}" ]; then
+    upload "${1}";
+else
+    notify-send "Error!" "File specified not exists.";
+fi

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,10 @@
                             <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>
+                                    <div class="btn-group">
+                                        <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>
+                                        <a href="{{ route('config.script', {'id': user.id}) }}" class="btn btn-lg btn-outline-danger"><i class="fas fa-fw fa-download"></i> Linux Script</a>
+                                    </div>
                                 </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')