Enh: Add body classes about the current device and methods to the Dev… (#7349)

* Enh: Add body classes about the current device and methods to the DeviceDetectorHelper class

* CHANGELOG

* PR discussions

* Remove useless @since in methods, as already added for the full class

CHANGELOG.md

@@ -11,7 +11,7 @@ HumHub Changelog
 - Fix #454: Profile about page missing left and right margin on mobile screen
 - Fix #7316: Fix formatter default time zone
 - Enh #7317: Space browser: Make the whole space card header and body clickable
-- Enh #7329: Add a new global "Manage Content" Group Permission (see [migration guide](https://github.com/humhub/humhub/blob/develop/MIGRATE-DEV.md#version-117-unreleased) for details)
+- Enh #7329: Add a new "Manage All Content" Group Permission (see [migration guide](https://github.com/humhub/humhub/blob/develop/MIGRATE-DEV.md#version-117-unreleased) for details)
 - Enh #7325: Add missing IDs in the modal login forms
 - Enh #7333: Improved Yii alias handling and added ENV support
 - Enh #7334: New safe method to rename a database column
@@ -20,6 +20,7 @@ HumHub Changelog
 - Enh #7342: Mask .env `DB__PASSWORD` variable in logs
 - Enh #7344: Disable editing Base URL when setting is fixed
 - Fix #7345: Fix debug mode setting in .env
+- Enh #7349: Add body classes about the current device and methods to the `DeviceDetectorHelper` class
 
 1.17.0-beta.2 (November 12, 2024)
 ---------------------------------

MIGRATE-DEV.md

@@ -15,6 +15,8 @@ Version 1.17 (Unreleased)
 - CSS variables: `--hh-fixed-header-height` and `--hh-fixed-footer-height` (see [#7131](https://github.com/humhub/humhub/issues/7131)): these variables should be added to custom themes in the `variables.less` file to overwrite the fixed header (e.g. the top menu + margins) and footer heights with the ones of the custom theme.
 - `\humhub\modules\user\Module::enableRegistrationFormCaptcha` which is true by default (can be disabled via [file configuration](https://docs.humhub.org/docs/admin/advanced-configuration#module-configurations))
 - `\humhub\modules\user\Module::$passwordHint` (see [#5423](https://github.com/humhub/humhub/issues/5423))
+- New methods in the `DeviceDetectorHelper` class: `isMobile()`, `isTablet()`, `getBodyClasses()`, `isMultiInstanceApp()` and `appOpenerState()`
+- HTML classes about the current device (see list in `DeviceDetectorHelper::getBodyClasses()`)
 
 ### Deprecated
 - `\humhub\modules\ui\menu\MenuEntry::isActiveState()` use `\humhub\helpers\ControllerHelper::isActivePath()` instead

composer.json

@@ -87,7 +87,8 @@
         "yiisoft/yii2-jui": "^2.0.0",
         "yiisoft/yii2-queue": "^2.3.0",
         "yiisoft/yii2-redis": "^2.0.0",
-        "yiisoft/yii2-symfonymailer": "^2.0"
+        "yiisoft/yii2-symfonymailer": "^2.0",
+        "mobiledetect/mobiledetectlib": "4.8.09"
     },
     "replace": {
     },

protected/humhub/config/assets-prod.php

@@ -1,9 +1,8 @@
 <?php
-
 /**
  * This file is generated by the "yii asset" command.
  * DO NOT MODIFY THIS FILE DIRECTLY.
- * @version 2024-10-28 15:21:04
+ * @version 2024-12-16 17:41:02
  */
 return [
     'app' => [
@@ -533,4 +532,4 @@ return [
             'defer',
         ],
     ],
-];
+];

protected/humhub/helpers/DeviceDetectorHelper.php

@@ -9,6 +9,8 @@
 
 namespace humhub\helpers;
 
+use Detection\Exception\MobileDetectException;
+use Detection\MobileDetect;
 use Yii;
 
 /**
@@ -16,6 +18,32 @@ use Yii;
  */
 class DeviceDetectorHelper
 {
+    public static function isMobile(): bool
+    {
+        $detect = new MobileDetect();
+        $detect->setUserAgent(Yii::$app->request->getUserAgent());
+
+        try {
+            return $detect->isMobile();
+        } catch (MobileDetectException $e) {
+            Yii::error('DeviceDetectorHelper::isMobile() error: ' . $e->getMessage());
+            return false;
+        }
+    }
+
+    public static function isTablet(): bool
+    {
+        $detect = new MobileDetect();
+        $detect->setUserAgent(Yii::$app->request->getUserAgent());
+
+        try {
+            return $detect->isTablet();
+        } catch (MobileDetectException $e) {
+            Yii::error('DeviceDetectorHelper::isTablet() error: ' . $e->getMessage());
+            return false;
+        }
+    }
+
     public static function isAppRequest(): bool
     {
         return
@@ -52,6 +80,10 @@ class DeviceDetectorHelper
             && Yii::$app->request->headers->get('x-humhub-app-is-android');
     }
 
+    /**
+     * True if the mobile app can support multiple HumHub instances.
+     * Requires HumHub mobile app v1.0.124 or later.
+     */
     public static function isMultiInstanceApp(): bool
     {
         return
@@ -59,8 +91,41 @@ class DeviceDetectorHelper
             && Yii::$app->request->headers->get('x-humhub-app-is-multi-instance');
     }
 
+    /**
+     * True if the mobile app Opener landing page is visible and should be hidden.
+     * Requires HumHub mobile app v1.0.124 or later.
+     */
+    public static function appOpenerState(): bool
+    {
+        return
+            static::isAppRequest()
+            && Yii::$app->request->headers->get('x-humhub-app-opener-state');
+    }
+
     public static function isMicrosoftOffice(): bool
     {
         return str_contains((string)Yii::$app->request->getUserAgent(), 'Microsoft Office');
     }
+
+    public static function getBodyClasses(): array
+    {
+        $classes = [];
+
+        if (static::isAppRequest()) {
+            $classes[] = 'device-mobile-app';
+            if (static::isIosApp()) {
+                $classes[] = 'device-ios-mobile-app';
+            } elseif (static::isAndroidApp()) {
+                $classes[] = 'device-android-mobile-app';
+            }
+        } elseif (static::isMobile()) {
+            $classes[] = 'device-mobile';
+        } elseif (static::isTablet()) {
+            $classes[] = 'device-tablet';
+        } else {
+            $classes[] = 'device-desktop';
+        }
+
+        return $classes;
+    }
 }

protected/humhub/modules/stream/resources/js/humhub.stream.wall.js

@@ -44,10 +44,6 @@ humhub.module('stream.wall', function (module, require, $) {
         options.pinSupport = !this.isDashboardStream();
 
         Stream.call(this, container, options);
-
-        if (module.config.horizontalImageScrollOnMobile && /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
-            this.$.addClass('mobile');
-        }
     });
 
     WallStream.prototype.loadInit = function () {

protected/humhub/views/layouts/main.php

@@ -1,6 +1,8 @@
 <?php
 
 use humhub\assets\AppAsset;
+use humhub\helpers\DeviceDetectorHelper;
+use humhub\libs\Html;
 use humhub\modules\space\widgets\Chooser;
 use humhub\modules\ui\view\components\View;
 use humhub\modules\user\widgets\AccountTopMenu;
@@ -25,7 +27,7 @@ AppAsset::register($this);
         <?= $this->render('head') ?>
     </head>
 
-    <body>
+    <?= Html::beginTag('body', ['class' => DeviceDetectorHelper::getBodyClasses()]) ?>
         <?php $this->beginBody() ?>
 
         <!-- start: first top navigation bar -->
@@ -67,6 +69,6 @@ AppAsset::register($this);
         <?= $content ?>
 
         <?php $this->endBody() ?>
-    </body>
+    <?= Html::endTag('body') ?>
 </html>
 <?php $this->endPage() ?>

protected/humhub/widgets/views/richTextEditor.php

@@ -1,6 +1,7 @@
 <?php
 
 use yii\helpers\Url;
+
 ?>
 
 <script <?= \humhub\libs\Html::nonce() ?>>
@@ -98,7 +99,7 @@ use yii\helpers\Url;
         $editableContent = $('#<?php echo $id; ?>_contenteditable');
 
         //This is a workaround for mobile browsers especially for Android Chrome which is not able to remove contenteditable="false" nodes.
-        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
+        if ($('body').is('.device-mobile, .device-tablet')) {
             $editableContent.on('contextmenu', 'a, img', function() {
                 if($(this).parent().is('span')) {
                     $(this).parent().remove();
@@ -406,4 +407,4 @@ use yii\helpers\Url;
         sel.addRange(range);
     }
 
-</script>
+</script>

static/less/file.less

@@ -118,7 +118,7 @@ ul.files {
 }
 
 
-#wallStream.mobile {
+body.device-mobile #wallStream {
     .post-files {
         margin-top: 10px;
         display: flex;

themes/HumHub/css/theme.css

@@ -3443,12 +3443,12 @@ ul.files li.file-preview-item .file-fileInfo {
 .post-file-list a:hover {
   color: #21A1B3;
 }
-#wallStream.mobile .post-files {
+body.device-mobile #wallStream .post-files {
   margin-top: 10px;
   display: flex;
   overflow-x: auto;
 }
-#wallStream.mobile .post-files img {
+body.device-mobile #wallStream .post-files img {
   max-width: 190px;
   height: 100px;
   width: auto;