EVOLUTION-NINJA

Edit File: video2.php

<?php
    echo view('includes/flow-header');    
?>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0"
  nonce="m1CHrP3f"></script>

<section class="spec-main">
  <div class="row">
    <div class="col-sm-3">
      <div class="spec-left">
        <ul>
          <li><a href="">Videos e-learn Hub</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="cme-right-new" style="padding: 2% 5% 0 0;">
        <div class="row">
          <div class="col-sm-9"></div>
          <div class="col-sm-3 mb-5" id="go-back-new">
            <a href="<?php echo base_url('ls1-video');?>"><i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
          </div>
        </div>

<div class="videos">
          <h4>Videos</h4>
          <div class="row pt-5">
            <div class="col-sm-6" id="right-border">
              <div class="video-card1 border-r">
                
                <iframe width="400" height="280" src="https://player.vimeo.com/video/<?php echo $video[0]['video_link']; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                <div class="video-info1">
                  <h5><?php echo $video[0]['title']; ?></h5>
                  <p><span><?php echo $dr_name; ?></span>
                    &nbsp <?php echo time_elapsed_string($video[0]['created_at']); ?>
                    
                    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
                      id="share">Share</button>

</p>

<div class="modal fade" id="myModal" role="dialog">
                      <div class="modal-dialog">

<div class="modal-content">
                          <div class="modal-header">
                            <h5>Share</h5>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            
                          </div>
                          <div class="modal-body">
                            
                            <input type="text" name="" readonly value="https://medusys.in/ls2-video?id=<?php echo $video[0]['id']; ?>" class="form-control" id="url">
                            <button class="btn btn-primary" onclick="copyToClipboard()" id="copy">Copy</button>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>

</div>
                    </div>

</div>

</div>
              </div>
            </div>
            <div class="col-sm-6 comment-full2" id="comment-full">
              <textarea rows="8" cols="" placeholder="Description" class="form-control" id="description"></textarea>
            </div>
          </div>

<div class="row pt-3">
            <div class="col-sm-12">
              <div class="add-right">
                <div class="post__container" id="post-container">
                  <article class="post"></article>
                  <div class="comment__box">
                    <input type="text" name="comment-input" class="comment__input" placeholder="Add a comment ...">
                    <button name="post-comment" class="btn btn--primary">Post</button>
                  </div>
                  <div class="comments" id="comments">
                    <?php 
                    foreach($commet_details as $c) { 
                      
                    ?>
                    <article class="comment__container" data-type="comment">
                      <div class="comment1">
                        <h6 class="comment__content1"><br><span><?php echo substr(ucwords($c['f_name']),0,1);?></span><?php echo $c['f_name']; ?></h6>
                      </div>
                    <div class="comment"><p class="comment__content"><?php echo $c['message']; ?></p></div>
                    <div class="comment__cta">
                      <button class="btn btn--secondary" name="reply-to-comment" id= "<?php echo $c['id']; ?>">Reply</button>
                      <div class="vertical-divider"></div>
                      
                      </div>
                    <div class="replies">
                      <?php 
                      foreach($reply_details as $r) { 
                        ?>
                        <?php if($r['main_id'] == $c['id']){
                          ?>

<article class="comment__container" data-type="reply">
                            <div class="comment1">
                              <h6 class="comment__content1"><br><span><?php echo substr(ucwords($r['f_name']),0,1);?></span><?php echo $r['f_name']; ?></h6>
                            </div>
                            <div class="comment"><p class="comment__content"><?php echo $r['message']; ?></p>
                            </div>
                            <div class="comment__cta"><button class="btn btn--secondary" name="reply-to-comment" id="<?php echo $r['id']; ?>">Reply</button><div class="vertical-divider"></div>
                            
                          </div>
                          </article>
                          <?php
                        }
                      }
                      ?>
                    </div>
                  </article>
                  <?php
                  }
                  ?>

</div>
                </div>
             </div>
                  <div class="comments" id="comments"></div>
            </div>
          </div>

</div>

<?php
                echo view('includes/flow-footer');    
            ?>

<?php
            function time_elapsed_string($datetime, $full = false) {
                  $now = new DateTime;
                  $ago = new DateTime($datetime);
                  $diff = $now->diff($ago);

$diff->w = floor($diff->d / 7);
                  $diff->d -= $diff->w * 7;

$string = array(
                      'y' => 'year',
                      'm' => 'month',
                      'w' => 'week',
                      'd' => 'day',
                      'h' => 'hour',
                      'i' => 'minute',
                      's' => 'second',
                  );
                  foreach ($string as $k => &$v) {
                      if ($diff->$k) {
                          $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
                      } else {
                          unset($string[$k]);
                      }
                  }

if (!$full) $string = array_slice($string, 0, 1);
                  return $string ? implode(', ', $string) . ' ago' : 'just now';
              }
            ?>

function copyToClipboard() {
  /* Get the text field */
  var inputField = document.getElementById("url");

/* Select the text field */
  inputField.select();

/* Copy the text inside the text field to the clipboard */
  navigator.clipboard.writeText(inputField.value);

/* Alert the copied text */
  // alert("Copied the text: " + inputField.value);
  toastr["success"]("Link copied");
}
  </script>
        <script type="module">

$("#description").val('<?php echo $video[0]['description']; ?>');
$("#video_id").val('<?php echo $video_id; ?>');

import { BUTTON_TYPES } from "./public/assets/js/button-types.js";

// Dom elements

const postContainerElement = document.getElementById("post-container");

const commentsContainerElement = document.getElementById("comments");

// Event listeners

postContainerElement.addEventListener("click", postEventsHandler);

// Functions

function postEventsHandler(e) {

// Post Comment button
            if (e.target.name === BUTTON_TYPES.postComment) {

//lert('commentt');
              const comment = getCommentValue(e);
              comment && postComment(comment);
              return;
            }
            // Reply button
            if (e.target.name === BUTTON_TYPES.replyToComment) {
             
              $("#replyToComment_id").val(e.target.id);
              //alert('reply');
              replyClickHandler(e);
            }
            // Post Reply button
            if (e.target.name === BUTTON_TYPES.postReply) {
              //alert('reply o past');
              const comment = getCommentValue(e);
              comment && postReplyToComment(e, comment);
              return;
            }
            // // Delete comment
            // if (e.target.name === BUTTON_TYPES.deleteComment) {
            //   deleteCommentHandler(e);
            // }
            // Edit comment
            if (e.target.name === BUTTON_TYPES.editComment) {
              editCommentHandler(e);
            }
            // Cancel editing comment
            if (e.target.name === BUTTON_TYPES.cancelChanges) {
              cancelEditHandler(e);
            }
            // save updated comment
            if (e.target.name === BUTTON_TYPES.saveChanges) {
              saveUpdatedCommentHandler(e);
            }
          }

function replyClickHandler(e) {
            const commentWrapper = e.target.closest(".comment__container");

let replyContainer;

if (commentWrapper.dataset.type === "comment") {
              replyContainer = commentWrapper.querySelector(".replies");
            } else {
              replyContainer = commentWrapper.closest(".replies");
            }
            if (replyContainer.querySelector(".comment__box")) {
              return;
            }
            replyContainer.appendChild(getCommentBoxNode());
          }

function deleteCommentHandler(e) {
            e.target.closest("article.comment__container").remove();
          }

function editCommentHandler(e) {
            const commentNode = e.target
              .closest(".comment__container")
              .querySelector(".comment");

commentNode.appendChild(getEditCommentCTAElement());
            const comment = commentNode.querySelector("p.comment__content");
            comment.setAttribute("contentEditable", true);
            placeCursorAtEnd(comment);
            e.target.parentNode.remove();
          }

function cancelEditHandler(e) {
            const parent = e.target.parentNode;
            parent.parentNode.after(getCommentCTAElement());
            parent.remove();
          }

function saveUpdatedCommentHandler(e) {
            const parent = e.target.parentNode;
            parent.parentNode.after(getCommentCTAElement());
            parent.remove();
          }

// Utilities

function getCommentBoxNode() {
            const DIV = document.createElement("div");
            DIV.classList.add("comment__box", "mt-xs");

const INPUT = document.createElement("input");
            INPUT.setAttribute("type", "text");
            INPUT.setAttribute("name", "comment-input");
            INPUT.setAttribute("placeholder", "Add a reply ...");
            INPUT.classList.add("comment__input");

const BUTTON = document.createElement("button");
            BUTTON.setAttribute("name", "post-reply");
            BUTTON.classList.add("btn", "btn--primary");
            BUTTON.textContent = "Post";

DIV.append(INPUT, BUTTON);
            return DIV;
          }

function getCommentValue(e) {
            const inputElement = e.target.previousElementSibling;
            let value = "fdfdssdg";
            if (
              inputElement?.nodeName === "INPUT" &&
              inputElement?.name === "comment-input"
            ) {
              value = inputElement.value;
              inputElement.value = "";
            }
            return value;
          }

function getCommentNode(commentValue, isComment = true,id,name) {
            const ARTICLE = document.createElement("article");
            ARTICLE.classList.add("comment__container");

ARTICLE.dataset.type = isComment ? "comment" : "reply";

const DIV = document.createElement("div");
            DIV.classList.add("comment");
            //DIV.id.add("20");

const PARAGRAPH = document.createElement("p");
            PARAGRAPH.classList.add("comment__content");
            //PARAGRAPH.textContent = '@'+name +"   "+commentValue;
            //PARAGRAPH.textContent = commentValue  +"<br/>@ Dhanush";

//PARAGRAPH.textContent += commentValue +"<br/>@ Dhanush";
            PARAGRAPH.innerHTML = commentValue;

const DIV1 = document.createElement("div");
            DIV1.classList.add("comment1");
            const PARAGRAPH1 = document.createElement("h6");
            PARAGRAPH1.classList.add("comment__content1");
            // PARAGRAPH.textContent = commentValue;
            PARAGRAPH1.innerHTML =  "<br><span>"+capitalize(name)+"</span> "+name;

DIV.appendChild(PARAGRAPH);
            DIV1.appendChild(PARAGRAPH1);
            ARTICLE.append(DIV1);
            ARTICLE.append(DIV, getCommentCTAElement(id));

if (isComment) {
              const DIV_REPLIES = document.createElement("div");
              DIV_REPLIES.classList.add("replies");
              ARTICLE.append(DIV_REPLIES);
            }

return ARTICLE;

}
          function capitalize(s)
          {
              return s[0].toUpperCase();
          }

function getCommentCTAElement(id) {
            const DIV_CTA = document.createElement("div");
            DIV_CTA.classList.add("comment__cta");

const BUTTON_REPLY = getButtonElement(
              BUTTON_TYPES.replyToComment,
              "Reply",
              "btn btn--secondary",
              id
            );

const BUTTON_EDIT = getButtonElement(
              BUTTON_TYPES.editComment,
              "Edit",
              "btn btn--secondary"
            );

const BUTTON_DELETE = getButtonElement(
              BUTTON_TYPES.deleteComment,
              "Delete",
              "btn btn--secondary"
            );

DIV_CTA.append(
              BUTTON_REPLY,
              getVerticalDividerElement(),
             // BUTTON_EDIT,
              // getVerticalDividerElement(),
              // BUTTON_DELETE
            );

return DIV_CTA;
          }

function getEditCommentCTAElement() {
            const DIV_CTA = document.createElement("div");
            DIV_CTA.classList.add("comment__edit-cta");

const BUTTON_SAVE = getButtonElement(
              BUTTON_TYPES.saveChanges,
              "Save Changes",
              "btn btn--primary"
            );

const BUTTON_CANCEL = getButtonElement(
              BUTTON_TYPES.cancelChanges,
              "Cancel",
              "btn btn--tertiary"
            );

DIV_CTA.append(BUTTON_SAVE, BUTTON_CANCEL);

return DIV_CTA;
          }

}

function postReplyToComment(e, comment) {
           
            var video_id = $('#video_id').val();
            var Comment_id = $('#replyToComment_id').val();

$.ajax({
              type   : 'post',
              url    : '<?php echo base_url("saveComment")?>',
              data   : {'id':video_id,'comment':comment,'Comment_id':Comment_id}, 
              //contentType: false,
              //processData: false,
              success:function(response){
                console.log(response);
                response = jQuery.parseJSON(response);
                if(response.result==1){  
                  toastr["success"](response.message);
                  var name = response.name;
                  const commentNode = getCommentNode(comment, false,response.insertedId,name);
                  const repliesContainer = e.target.closest(".replies");
                  repliesContainer.appendChild(commentNode);
                  e.target.parentNode.remove();
                  
                }
                else 
                  {    
                      toastr["error"](response.message);                                       
                  }
                }
            });

}

function getVerticalDividerElement() {
            const DIV = document.createElement("div");
            DIV.classList.add("vertical-divider");
            return DIV;
          }

function placeCursorAtEnd(node) {
            const selection = window.getSelection();
            const range = document.createRange();
            selection.removeAllRanges();
            range.selectNodeContents(node);
            range.collapse(false);
            selection.addRange(range);
            node.focus();
          }

var myDiv = document.getElementById('post-container');

myDiv.addEventListener("scroll", myPageScroll);

function myPageScroll() {
            var myScrollTop = myDiv.scrollTop;
            var myScrollHeight = myDiv.scrollHeight;

var diff = myScrollHeight - myScrollTop;
            // console.log(myScrollTop +" " +myScrollHeight);
            var height = myDiv.clientHeight;

var offPageHeight = 50;
            if (diff < (height + offPageHeight)) {
              console.log("call ajax to refresh");
            }
          }

</script>