Display NSFW channel warning

discordbot/titanembeds/utils.py

@@ -91,6 +91,7 @@ def get_channels_list(guildchannels):
                 "type": str(channel.type),
                 "permission_overwrites": overwrites,
                 "parent_id": parent,
+                "nsfw": channel.is_nsfw,
             })
     return channels
     

webapp/titanembeds/static/css/embedstyle.css

@@ -891,10 +891,14 @@ p.mentioned span.chatmessage {
   width: 302px;
 }
 
-#logout_btn {
+#logout_btn, #proceed_nsfw_btn {
   background-color: red;
 }
 
+#nsfwmodal i {
+  color: yellow;
+}
+
 #message-spinner {
   position: fixed;
   top: 50%;

webapp/titanembeds/static/js/embed.js

@@ -179,6 +179,12 @@
             inDuration: 400,
             outDuration: 400,
         });
+        $("#nsfwmodal").modal({
+            dismissible: true,
+            opacity: .3,
+            inDuration: 400,
+            outDuration: 400,
+        });
         $("#usercard").modal({
             opacity: .5,
         });
@@ -225,6 +231,17 @@
             }
         });
         
+        $("#proceed_nsfw_btn").click(function () {
+            var channel_id = $("#proceed_nsfw_btn").attr("channel_id");
+            var should_animate = parseInt($("#proceed_nsfw_btn").attr("should_animate"));
+            $("#nsfwmodal").modal("close");
+            select_channel(channel_id, should_animate, true);
+        });
+        
+        $("#dismiss_nsfw_btn").click(function () {
+            $("#nsfwmodal").modal("close");
+        });
+        
         $( "#theme-selector" ).change(function () {
             var theme = $("#theme-selector option:selected").val();
             var keep_custom_css = $("#overwrite_theme_custom_css_checkbox").is(':checked');
@@ -793,15 +810,21 @@
         element.css("opacity", opacity);
     }
 
-    function select_channel(channel_id, animate_it) {
+    function select_channel(channel_id, animate_it, acknowledge_nsfw) {
         if (selected_channel != channel_id && guild_channels[channel_id] && guild_channels[channel_id].read) {
+            if (guild_channels[channel_id].channel.nsfw && !acknowledge_nsfw) {
+                $("#proceed_nsfw_btn").attr("channel_id", channel_id);
+                $("#proceed_nsfw_btn").attr("should_animate", animate_it ? 1 : 0);
+                $("#nsfwmodal").modal("open");
+                return;
+            }
             if (animate_it) {
                 $("#guild-btn").sideNav("show");
                 $("#channel-"+channel_id)[0].scrollIntoView({behavior: "smooth"});
                 flashElement($("#channel-"+channel_id));
                 setTimeout(function () {
                     $("#guild-btn").sideNav("hide");
-                    select_channel(channel_id);
+                    select_channel(channel_id, false, true);
                 }, 1000);
                 return;
             }

webapp/titanembeds/templates/embed.html.j2

@@ -204,6 +204,17 @@
       </div>
     </div>
     
+    <div id="nsfwmodal" class="modal">
+      <div class="modal-content">
+        <h4 class="center-align"><i class="material-icons">warning</i> {{ _("NSFW Channel") }} <i class="material-icons">warning</i></h4>
+        <p>{{ _("You must be at least eighteen years old to view this channel. Are you over eighteen and willing to see adult content?") }}</p>
+        <p class="center-align">
+          <a id="dismiss_nsfw_btn" class="waves-effect waves-light btn">{{ _("Nope") }}</a>
+          <a id="proceed_nsfw_btn" class="waves-effect waves-light btn">{{ _("Continue") }}</a>
+        </p>
+      </div>
+    </div>
+    
     <div id="usercard" class="modal bottom-sheet">
       <div class="modal-content">
         <div class="row">