Add "Disable right-click" plugin option

README.md

@@ -9,7 +9,7 @@ WordPress plugin that provides a Gutenberg block and traditional Shortcode for e
 - [Plyr](https://plyr.io/) player used to overlay default player with custom controls
 - Player modifications to always prevent clicking the default player
 - Encodes video ID in HTML to prevent finding it via “View Source”
-- Settings page to configure the player theme to match your site
+- Settings page e.g. to configure the player theme to match your site
 
 [View Player Demo](https://protected-video.alecrust.com/)
 

includes/admin.php

@@ -122,16 +122,18 @@ public function render_settings_page()
    */
   public function settings_page_init()
   {
+    // Add settings section
     add_settings_section(
       'protected_video_setting_section', // HTML id
       __('Settings', 'protected-video'), // title
       [$this, 'render_settings_description'], // callback
       'protected-video-admin' // page
     );
 
+    // Add "Player theme color" setting field
     add_settings_field(
       'player_theme_color', // HTML id
-      __('Player Theme Color', 'protected-video'), // field title
+      __('Player theme color', 'protected-video'), // field title
       [$this, 'render_color_input'], // callback
       'protected-video-admin', // page
       'protected_video_setting_section', // section
@@ -141,39 +143,61 @@ public function settings_page_init()
       ]
     );
 
+    // Register "Player theme color" setting
     register_setting(
       'protected_video_option_group', // settings group name
       'protected_video_player_theme_color', // option name
-      [$this, 'sanitize_plugin_color_input'] // callback
+      ['sanitize_callback' => [$this, 'sanitize_color_input']] // callback
+    );
+
+    // Add "Disable right-click" setting field
+    add_settings_field(
+      'disable_right_click', // HTML id
+      __('Disable right-click', 'protected-video'), // field title
+      [$this, 'render_disable_right_click_checkbox'], // callback
+      'protected-video-admin', // page
+      'protected_video_setting_section' // section
+    );
+
+    // Register "Disable right-click" setting
+    register_setting(
+      'protected_video_option_group', // settings group name
+      'protected_video_disable_right_click', // option name
+      [
+        'default' => '1',
+        'sanitize_callback' => [$this, 'sanitize_checkbox_input'],
+      ] // callback
     );
   }
 
   /**
-   * Sanitize plugin option color input data.
+   * Sanitize color input data.
    */
-  public function sanitize_plugin_color_input($input)
+  public function sanitize_color_input($input)
   {
     return sanitize_hex_color($input);
   }
 
+  /**
+   * Sanitize checkbox input data.
+   */
+  public function sanitize_checkbox_input($input)
+  {
+    return isset($input) && true == $input ? '1' : '0';
+  }
+
   /**
    * Explanation copy on settings page (between heading and fields).
    */
   public function render_settings_description()
   {
-    printf(
-      __(
-        'Set the player theme color below. For more advanced styling options please refer to %s.',
-        'protected-video'
-      ),
-      '<a href="https://github.com/sampotts/plyr#customizing-the-css" target="_blank">' .
-        __("Plyr's documentation", 'protected-video') .
-        '</a>'
-    );
+    echo '<p>' .
+      __('Global settings for the Protected Video plugin.', 'protected-video') .
+      '</p>';
   }
 
   /**
-   * Returns player theme color field on settings page.
+   * Render the Player theme color field.
    */
   public function render_color_input($val)
   {
@@ -187,5 +211,38 @@ public function render_color_input($val)
       esc_attr($name),
       esc_attr($value)
     );
+
+    printf(
+      '<p class="description">%s</p>',
+      sprintf(
+        __(
+          'Sets the player theme color. See %s for advanced styling options.',
+          'protected-video'
+        ),
+        '<a href="https://github.com/sampotts/plyr#customizing-the-css" target="_blank">' .
+          __("Plyr's documentation", 'protected-video') .
+          '</a>'
+      )
+    );
+  }
+
+  /**
+   * Render the disable right-click checkbox field.
+   */
+  public function render_disable_right_click_checkbox()
+  {
+    $value = get_option('protected_video_disable_right_click', '1');
+    printf(
+      '<input type="checkbox" id="disable_right_click" name="protected_video_disable_right_click" value="1" %s>',
+      checked(1, $value, false)
+    );
+
+    printf(
+      '<p class="description">%s</p>',
+      __(
+        'Disables right-click on pages where a Protected Video is displayed.',
+        'protected-video'
+      )
+    );
   }
 }

includes/core.php

@@ -120,6 +120,9 @@ private function define_public_hooks()
     // Public JS
     add_action('wp_enqueue_scripts', [$plugin_public, 'enqueue_scripts']);
 
+    // Body class
+    add_filter('body_class', [$plugin_public, 'add_body_classes']);
+
     // Allow plugin styles to be enqueued in "MemberPress Courses" course pages
     // https://docs.memberpress.com/article/381-how-to-edit-lessons-in-classroom-mode-with-a-page-builder
     add_filter('mpcs_classroom_style_handles', function ($allowed_handles) {

includes/public.php

@@ -109,6 +109,23 @@ public function enqueue_scripts()
     }
   }
 
+  /**
+   * Return body classes for the public-facing side of the site
+   */
+  public function add_body_classes($classes)
+  {
+    $disable_right_click = get_option(
+      'protected_video_disable_right_click',
+      '1'
+    );
+
+    if ($disable_right_click === '1') {
+      $classes[] = 'protected-video-disable-right-click';
+    }
+
+    return $classes;
+  }
+
   /**
    * Utility returning if the scripts and styles should be enqueued.
    *

readme.hbs

@@ -21,7 +21,7 @@ Features include:
 * [Plyr](https://plyr.io/) player used to overlay default player with custom controls
 * Player modifications to always prevent clicking the default player
 * Encodes video ID in HTML to prevent finding it via “View Source”
-* Settings page to configure the player theme to match your site
+* Settings page to e.g. configure the player theme to match your site
 
 [View Player Demo](https://protected-video.alecrust.com/)
 
@@ -110,7 +110,7 @@ For performance reasons, Protected Video only loads its associated JS and CSS wh
 1. Searching for Protected Video in the Block Editor.
 2. Protected Video block inserted in the Block Editor.
 3. Protected Video displayed on public facing site.
-4. Configuration of the player theme in plugin settings.
+4. Configuration of the global plugin settings.
 5. Optional Shortcode embed method also supported.
 
 == Changelog ==

src/view.js

@@ -40,5 +40,7 @@ videoBlocks.forEach((videoBlock) => {
   })
 })
 
-// Disable right-clicking anywhere on the page
-document.addEventListener('contextmenu', (event) => event.preventDefault())
+// Disable right-click if plugin option enabled
+if (document.body.classList.contains('protected-video-disable-right-click')) {
+  document.addEventListener('contextmenu', (event) => event.preventDefault())
+}