OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 edit_post.php	2.23 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 getEditContent.php	874 bytes	05/19/2025 10:07:19 AM	rw-r--r--
📄 index.php	28.4 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 process_data.php	5.24 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 scribe.php	53.48 KB	05/19/2025 10:07:19 AM	rw-r--r--

Editing: scribe.php

<?php
include '../assets/php/db_connect.php';
include '../inc/config.php';
include '../assets/php/validate.logged.php';
function showUserName($db, $userId)
{
    $sql = "SELECT full_name FROM user WHERE id = ?";
    $fullName = "";

if ($stmt = $db->prepare($sql)) {
        $stmt->bind_param("i", $userId);
        $stmt->execute();
        $stmt->bind_result($fullName);
        if ($stmt->fetch()) {
            return $fullName;
        } else {
            return null;
        }
        $stmt->close();
    } else {
        return "Error preparing statement: " . $db->error;
    }
}

function formatToIST($datetime)
{
    // Create a DateTime object in UTC
    $date = new DateTime($datetime, new DateTimeZone('UTC'));

// Set the timezone to IST (Asia/Kolkata)
    $date->setTimezone(new DateTimeZone('Asia/Kolkata'));

// Get the day of the month
    $day = $date->format('d');

// Add ordinal suffix to the day
    $suffix = ['st', 'nd', 'rd', 'th'];
    if ($day % 10 == 1 && $day != 11) {
        $day .= $suffix[0];
    } elseif ($day % 10 == 2 && $day != 12) {
        $day .= $suffix[1];
    } elseif ($day % 10 == 3 && $day != 13) {
        $day .= $suffix[2];
    } else {
        $day .= $suffix[3];
    }

// Format the date in the desired format with the suffix, month abbreviation, and time
    $formattedDate = $date->format('jS M, Y') . ' ' . $date->format('g:ia'); // 1:05pm format

return $formattedDate;
}
function convertLink($data)
{
    // Regular expression pattern to match URLs (HTTP, HTTPS, FTP)
    // $url_pattern = '/(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s]*)?/';
    $url_pattern = '/(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s\)]*)?/';

// Callback function to replace URLs with <a> tags
    $text_with_links = preg_replace_callback($url_pattern, function ($matches) {
        // Get the matched URL
        $url = $matches[0];
        // Return the <a> tag with the URL as both the href and the link text
        return "<a href=\"$url\" target=\"_blank\" onclick=\"event.stopPropagation();\" style=\"color: #007bff; text-decoration: underline;\">$url</a>";
    }, $data);

// Output the modified string with links
    return $text_with_links;
}

function viewProfilePic($db, $userId)
{
    $sql = "SELECT profile_pic FROM user WHERE id = ?";
    $link = "";
    $path = "https://www.knoblycream.com/data/profilePic/";

if ($stmt = $db->prepare($sql)) {
        $stmt->bind_param("i", $userId);
        $stmt->execute();
        $stmt->bind_result($link);
        if ($stmt->fetch()) {
            if ($link == null) {
                return $path . "default.png";
            }
            return $path . $link;
        } else {
            return null;
        }

$stmt->close();
    } else {
        return "Error preparing statement: " . $db->error;
    }
}
function generate_stream_card($id, $userId, $chat, $postedOn, $editedOn, $media,  $metaData)
{
    global $gUserId, $conn, $db;
    $maxLength = 320;
    $isTruncated = isset($chat) ? (strlen($chat) > $maxLength) : false;
    // $isTruncated = mb_strlen($chat) > $maxLength;
    $truncatedContent = $isTruncated ? substr($chat, 0, $maxLength) . '...' : $chat;

body.dark-mode .channels_list {
            color: rgb(0, 0, 0);
            background-color: white;
        }

.channels_list button {
            background-color: #FFFFED;
        }

body.light-mode .channels_list {
            color: #000;
            background-color: #fafafa;
        }
    </style>
    <div class="mid_container all_post_container">
        <div class="post" style="display:flex" data-id="<?= $id ?>">
            <div class="con" style="justify-content: space-between; align-items: center;">
                <div class="post-header d-flex align-items-center">
                    <div class="avatar me-2">
                        <a href="profile.php?userId=<?= $userId ?>">
                            <img src="<?= viewProfilePic($db, $userId) ?>" alt="Default Image" onerror="this.onerror=null; this.src='assets/img/default.png';">
                        </a>
                    </div>
                </div>
            </div>
            <div class="postWithMainContainer" style="width: 82%;">
                <div class="usernameWithfollow">
                    <div class="namewithfollow" style="display: flex; justify-content: space-between;">
                        <div class="username-date mb-2">
                            <a href="profile.php?userId=<?= $userId ?>">
                                <h5 class="mb-0" style="line-height: 14px;"><?= showUserName($db, $userId); ?></h5>
                            </a>
                            <span class="text-muted" style="font-size: 12px;"><?= formatToIST($postedOn); ?></span>
                            <? if ($editedOn) { ?>
                                <small class="text-muted">(Edited)</small>
                            <? } ?>
                        </div>
                    </div>
                </div>

<div class="post-content" tabindex="0" data-thumbnail="false">
                    
                    <a href="post-details.php?id=<?= $id ?>" style="text-decoration: none;">
                        <?php
                        // Check if the content contains a URL
                        if ($truncatedContent != null && !preg_match('/(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s\)]*)?/', $truncatedContent)) {
                            // If no URL is detected, convert links to HTML and display the content
                        ?>
                            <p id="postContent_<?= $id ?>" style="margin: 0px;">
                                <?= convertLink(htmlspecialchars($truncatedContent)); ?>
                            </p>
                        <?php
                        } else {
                            // If a URL is detected, show just the text without the link
                            // Remove the URL and display plain text only
                            $plainText = preg_replace('/(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s\)]*)?/', '', $truncatedContent ?? '');
                        ?>
                            <p id="postContent_<?= $id ?>" style="margin: 0px;">
                                <?= nl2br(htmlspecialchars($plainText)); ?>
                            </p>
                        <?php
                        }
                        ?>
                    </a>

<?php if ($isTruncated) { ?>
                        <a href="post-details.php?id=<?= $id ?>" style="text-decoration: none;">
                            <p id="fullContent_<?= $id ?>" style="display: none; margin:0px;"><?= convertLink(htmlspecialchars($chat)); ?></p>
                        </a>
                        <div>
                            <button class="btn btn-link readMoreBtn" data-id="<?= $id ?>" onclick="toggleReadMore(<?= $id ?>)">Read More</button>
                        </div>
                    <?php } ?>

<?php if ($media) {
                        // Split the comma-separated media string into an array
                        $mediaArray = explode(',', $media);
                        $mediaCount = count($mediaArray);
                        if ($mediaCount < 2) { ?>
                            <div class="stream-media">
                                <?php if (strpos($media, 'mp4') !== false || strpos($media, 'mov') !== false) { ?>
                                    <video controls onclick="openModal('video', '<?= htmlspecialchars($media); ?>',0)">
                                        <source src="<?= htmlspecialchars($media); ?>" type="video/<?= strpos($media, 'mp4') !== false ? 'mp4' : 'quicktime'; ?>">
                                        Your browser does not support the video tag.
                                    </video>
                                <?php } else { ?>
                                    <img src="<?= htmlspecialchars($media); ?>" alt="Post media"
                                        onclick="openModal('image', '<?= htmlspecialchars($media); ?>',0)" style="cursor: pointer;">
                                <?php } ?>
                            </div>
                        <?php } else if ($mediaCount > 1) { ?>
                            <div class="media-container">
                                <?php
                                // Display the first 3 items normally
                                $displayedMedia = 0;
                                foreach ($mediaArray as $mediaItem) {
                                    $mediaItem = trim($mediaItem);

if ($displayedMedia < 4) {
                                ?>
                                        <div class="stream-media">
                                            <?php if (strpos($mediaItem, 'mp4') !== false || strpos($mediaItem, 'mov') !== false) { ?>
                                                <video controls onclick="openModal('video', '<?= htmlspecialchars($media); ?>',<?= $displayedMedia ?>)">
                                                    <source src="<?= htmlspecialchars($mediaItem); ?>" type="video/<?= strpos($mediaItem, 'mp4') !== false ? 'mp4' : 'quicktime'; ?>">
                                                    Your browser does not support the video tag.
                                                </video>
                                            <?php } else { ?>
                                                <img src="<?= htmlspecialchars($mediaItem); ?>" alt="Post media"
                                                    onclick="openModal('image', '<?= htmlspecialchars($media); ?>',<?= $displayedMedia ?>)" style="cursor: pointer;">
                                            <?php } ?>
                                        </div>
                                    <?php
                                        $displayedMedia++;
                                    }
                                }

// If there are more than 3 items, show a "more" indicator in the fourth block
                                if (($mediaCount > 4) && ($mediaCount != 4)) {
                                    ?>
                                    <div class="stream-media more">
                                        <span class="more-count">+<?= $mediaCount - 3; ?> more</span>
                                        
                                    </div>
                                <?php
                                }
                                ?>
                            </div>
                        <?php } ?>
                    <?php } ?>
                </div>

<?
                if (isset($metaData)) {
                    $metaData = json_decode($metaData, true);
                    if (isset($metaData['youtubeLink']) && ($metaData['youtubeLink'] != '')) {
                ?>
                        <div class="ytprew"><?= $metaData['youtubeLink']; ?></div>
                    <? } else { ?>

<div class="hyperlink mb-1">
                            <?php if (!empty($metaData['metaImage'])) { ?>
                                <img src="<?= htmlspecialchars($metaData['metaImage'], ENT_QUOTES, 'UTF-8') ?>" alt="Card image">
                            <?php } ?>

<div style="padding: 0px; flex-grow: 1;">
                                <?php if (isset($metaData['metaTitle']) && $metaData['metaTitle'] != "No Title Found") { ?>
                                    <h3 id="linkHeading" style="font-size: 16px; margin: 0 0 5px;">
                                        <b><?= htmlspecialchars($metaData['metaTitle'], ENT_QUOTES, 'UTF-8') ?></b>
                                    </h3>
                                <?php }
                                if (isset($metaData['metaDesc']) && ($metaData['metaDesc']) != "No Description Found") { ?>
                                    <p id="linkDesc" style="margin: 0 0 10px; font-size: 14px; line-height: 1.4;">
                                        <?= htmlspecialchars($metaData['metaDesc'], ENT_QUOTES, 'UTF-8') ?>
                                    </p>
                                <? }

if (!empty($metaData['metaUrl'])) { ?>
                                    <a id="linkUrl"
                                        href="<?= htmlspecialchars($metaData['metaUrl'], ENT_QUOTES, 'UTF-8') ?>"
                                        style="font-size: 13px; color: #007bff; text-decoration: none;">
                                        <?= !empty($metaData['metaDomain'])
                                            ? htmlspecialchars($metaData['metaDomain'], ENT_QUOTES, 'UTF-8')
                                            : htmlspecialchars($metaData['metaUrl'], ENT_QUOTES, 'UTF-8') ?>
                                    </a>
                                <?php } ?>
                            </div>
                        </div>
                <? }
                } ?>
                <button>post</button>
                <button>remark</button>
            </div>

<div class="menu-container">
                <div alt="menu" width="100%" height="100%" id="menu-icon" style="padding-left: 10px; padding-right: 5px;" <?= $id ?> onclick="toggleDropcardMenu(<?= $id ?>)">⋮</div>

<div id="dropcardMenu_<?= $id ?>" class="dropcardMenu stremDropcard">
                    <? if ($gUserId == $userId) { ?>
                        <div class="editYourPost streamPost" onclick='editPost(<?= $id ?>)'>
                            <p style="width:75%; margin-bottom: 0;">Edit this Post</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                style="cursor: pointer;">
                                <path width="24" height="24" d="m5 16l-1 4l4-1L19.586 7.414a2 2 0 0 0 0-2.828l-.172-.172a2 2 0 0 0-2.828 0zM15 6l3 3m-5 11h8" />
                            </svg>
                        </div>
                        <div class="deleteYourPost streamPost" onclick="deletePost(<?= $id ?>)">
                            <p style="width:75%; margin-bottom: 0;">Delete this Post</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                fill="currentColor" style="cursor: pointer;">
                                <path width="24" height="24" d="M18 19a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V7H4V4h4.5l1-1h4l1 1H19v3h-1zM6 7v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7zm12-1V5h-4l-1-1h-3L9 5H5v1zM8 9h1v10H8zm6 0h1v10h-1z" />
                            </svg>
                        </div>

<? } else { ?>
                        <div class="reportThisPost streamPost" data-id=<?= $id ?>>
                            <p style="width:75%; margin-bottom: 0;">Report this Post</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                <path fill="currentColor" d="M10 18h8v2h-8zm0-5h12v2H10zm0 10h5v2h-5z" />
                                <path fill="currentColor" d="M25 5h-3V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v1H7a2 2 0 0 0-2 2v21a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2M12 4h8v4h-8Zm13 24H7V7h3v3h12V7h3Z" />
                            </svg>
                        </div>
                        <div class="blockThisPost streamPost" data-userid=<?= $userId ?>>
                            <p style="width:75%; margin-bottom: 0;">Block this Account</p>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path fill="currentColor" d="M11.5 4a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7M6 7.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0m12 7a3.5 3.5 0 0 0-3.08 5.165l4.745-4.744A3.5 3.5 0 0 0 18 14.5m3.08 1.835l-4.745 4.744a3.5 3.5 0 0 0 4.745-4.745M12.5 18a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0M8 16a4 4 0 0 0-4 4h7.05v2H2v-2a6 6 0 0 1 6-6h3v2z" />
                            </svg>

</div>
                    <? } ?>
                </div>
            </div>
        </div>
    </div>
<?
}
function show_stream_content()
{
    global $conn, $gUserId; // Ensure $gUserId is defined and accessible

// SQL query to get posts ordered by the most recent
    $sql = "SELECT *
            FROM reader_scribe
            WHERE deleteFlag = 0 
              AND referenceId IS NULL 
            ORDER BY postedOn DESC";

// Prepare the statement and bind the parameters
    $stmt = $conn->prepare($sql);
    $stmt->execute();

// Get the result of the prepared statement
    $result = $stmt->get_result();

if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            generate_stream_card($row['id'], $row['userId'], $row['chat'], $row['postedOn'], $row['editedOn'], $row['mediaPath'], $row['metadata']);
        }
    } else {
        // Optionally handle the case when no posts are found
        echo "No posts available.";
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knobly Cream</title>

.readMoreBtn:hover {
            text-decoration: underline;
        }

.hyperlink img {
            border-radius: 10px;
            /* margin-top: 10px; */
            max-width: 100%;
            margin-bottom: 10px;
        }

.linkDisplay .hyperlink img {
            object-fit: cover;
            border-radius: 5px;
        }

@media screen and (max-width:720px) {
            .linkDisplay .hyperlink img {
                object-fit: cover;
                border-radius: 5px;
                width: 100vw;
            }

}

.ytprew {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
            padding: 10px;
            /* border: 1px solid #ccc; */
            border-radius: 8px;
            background-color: #f9f9f9;
            width: auto;
            /* Ensures the div doesn't stretch too wide */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

.ytprew iframe {
            width: 100%;
            max-width: 853px;
            /* Matches YouTube's default embed width */
            height: 480px;
            border-radius: 8px;
            border: none;
        }

.ytprew a {
            margin-top: 10px;
            color: #0073e6;
            text-decoration: none;
            font-weight: bold;
        }

.ytprew a:hover {
            text-decoration: underline;
            color: #005bb5;
        }

.ytprew p {
            margin: 10px 0 0;
            font-size: 14px;
            color: #555;
            text-align: center;
        }

#ytPreview {
            display: none;
        }
    </style>

#modalContent video {
            display: block;
            margin: 0 auto;
        }

@media screen and (max-width:540px) {
            .navaigation_main {
                display: none;
            }

}
    </style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

// Function to edit a post
        function editPost(postId) {
            // Set the content in the modal's textarea
            const $modalTextarea = $("#modalContentTextarea");
            const $saveButton = $("#saveModalEditButton");

$.ajax({
                url: "assets/php/getEditContent.php",
                type: "POST",
                data: {
                    action: "getChat",
                    post_id: postId,
                },
                success: function(response) {
                    if (response.chat !== undefined) {
                        // Populate the textarea with the retrieved chat content
                        $modalTextarea.val(response.chat);

// Set the postId in the save button's data attribute
                        $saveButton.data("postId", postId);

// Set cursor to the end of the text
                        $modalTextarea.focus();
                        $modalTextarea[0].setSelectionRange(
                            $modalTextarea.val().length,
                            $modalTextarea.val().length
                        );

// Open the modal
                        const editPostModal = new bootstrap.Modal($("#editPostModal")[0]);
                        editPostModal.show();
                    } else {
                        alert("Failed to retrieve chat content.");
                    }
                },
                error: function() {
                    alert("An error occurred while retrieving the post.");
                },
            });
        }

const userId = <?= $gUserId ?>;
        let tempUrl = '';
        let letUrl = true;
        let dotInterval;
        var myModal;

$(document).ready(function() {
            // Initialize the height on page load
            var $textarea = $('#contentTextarea');
            if ($textarea.length) {
                adjustTextareaHeight($textarea[0]);
            }

$('.followButton').on('click', function() {
                const targetUserId = $(this).data('id'); // ID of the user to follow/unfollow
                toggleFollow(this, userId, targetUserId); // Pass `this` (the button element) as the first parameter
            });

$('#saveModalEditButton').on('click', function() {
                saveEditedContent();
            });

// likedUsers
            $(document).on('click', '.likedUsers', function() {
                const postId = $(this).data('id'); // Get post ID from the button's data attribute

$.ajax({
                    url: 'fetch_liked_users.php',
                    type: 'POST',
                    data: {
                        postId: postId
                    },
                    success: function(response) {
                        console.log(response); // Debugging: Log the response
                        const users = JSON.parse(response);

if (users.error) {
                            alert(users.error);
                        } else if (users.message) {
                            $('#likedUsersList').html('<li class="list-group-item text-center">' + users.message + '</li>');
                        } else {
                            const userList = users.map(user => `<li class="list-group-item">${user}</li>`).join('');
                            $('#likedUsersList').html(userList);
                        }

const likedUsersModal = new bootstrap.Modal(document.getElementById('likedUsersModal'));
                        likedUsersModal.show();
                    },
                    error: function() {
                        alert('Error fetching likes.');
                    }
                });
            });

// Handle like button clicks
            $(document).on('click', '.likeButton', function(e) {
                event.stopPropagation();
                // If the clicked element has the `likedUsers` class, do not toggle like/unlike                
                if ($(e.target).hasClass('likedUsers')) {
                    return; // Prevent triggering the like toggle
                }

// Proceed with like toggle functionality
                var feedId = $(this).data('id');
                toggleLike(this, feedId, userId);
            });

$('#contentTextarea').on('input', function() {
                var content = $('#contentTextarea').val().trim();
                console.log(content);

// Updated regular expression to match full URLs, including subdomains and paths
                var url_pattern = /(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)?(?:[a-zA-Z0-9-]+\.[a-zA-Z]{2,})(?:\/[^\s]*)?/g;

var youtube_pattern = /(?:v=|youtu\.be\/|embed\/)([a-zA-Z0-9_-]+)/;

// Attempt to match all URLs within the content
                var matchedUrls = content.match(url_pattern);
                var youtubeUrl = content.match(youtube_pattern);

if (youtubeUrl) {
                    youtubeUrl.forEach(function(url) {
                        console.log('Matched URL:', url); // Log each matched URL
                    });
                    if (tempUrl != youtubeUrl[0]) {
                        letUrl = true;
                        tempUrl = youtubeUrl[0];
                        removeMeta();
                        // Show the loading animation
                        $('#loadingIcon').show();
                        // $('#postedContent').html(''); // Clear any previous metadata
                        // Send the first matched URL to the server for metadata fetching
                        $.ajax({
                            url: 'link.php', // Submit to the same page
                            type: 'POST',
                            data: {
                                ytUrl: youtubeUrl[0]
                            }, // Send the first matched URL
                            success: function(response) {
                                // Hide the loading animation
                                $('#loadingIcon').hide();
                                if (response.iframe) {
                                    $('#ytPreview').html(response.iframe);
                                    $('#hiddenYTLink').val(response.iframe || '');
                                    $('#hiddenTitle').val(response.title || '');
                                    $('#ytPreview').show();
                                } else {
                                    return;
                                }
                            },
                            error: function() {
                                // Hide the loading animation on error
                                $('#loadingIcon').hide();
                                console.log("Error fetching Youtube Link");
                            }
                        });
                    }
                } else if (matchedUrls) {
                    // Log all matched URLs to the console (for testing purposes)
                    matchedUrls.forEach(function(url) {
                        console.log('Matched URL:', url); // Log each matched URL
                    });
                    if (tempUrl != matchedUrls[0]) {
                        letUrl = true;
                        tempUrl = matchedUrls[0];
                        removeYT();
                        // Show the loading animation
                        $('#loadingIcon').show();
                        // $('#postedContent').html(''); // Clear any previous metadata
                        // Send the first matched URL to the server for metadata fetching
                        $.ajax({
                            url: 'link.php', // Submit to the same page
                            type: 'POST',
                            data: {
                                url: matchedUrls[0]
                            }, // Send the first matched URL
                            success: function(response) {
                                // Hide the loading animation
                                $('#loadingIcon').hide();
                                $('#linkPreview').show();
                                if (response.url) {
                                    $('#linkPreview #linkHeading').html(response.title || ''); // Set heading text
                                    $('#linkPreview #linkDesc').html(response.description || ''); // Set description text
                                    $('#linkPreview #linkUrl').attr('href', response.url || ''); // Set link URL
                                    $('#linkPreview #linkUrl').html(response.domain || '');
                                    $('#hiddenTitle').val(response.title || '');
                                    $('#hiddenDesc').val(response.description || '');
                                    $('#hiddenUrl').val(response.url || '');
                                    $('#hiddenDomain').val(response.domain || '');
                                    if (response.image) {
                                        $('#linkPreview img').attr('src', response.image); // Set image source
                                        $('#hiddenImage').val(response.image);
                                    }
                                } else {
                                    return;
                                }
                            },
                            error: function() {
                                // Hide the loading animation on error
                                $('#loadingIcon').hide();
                                console.log("Error fetching the metadata");
                            }
                        });
                    }
                } else {
                    // Clear content and hide the loading animation if no valid URL is found
                    $('#loadingIcon').hide();
                }
                if (tempUrl != youtubeUrl[0]) {
                    removeYT();
                }
                if (tempUrl != matchedUrls[0]) {
                    removeMeta()
                }
                if (youtubeUrl[0] == '') {
                    removeYT();
                }
                if (matchedUrls[0] == '') {
                    removeMeta();
                }
            });
        });

function removeMeta() {
            $('#linkPreview').hide();
            $('#hiddenTitle').val('');
            $('#hiddenDesc').val('');
            $('#hiddenUrl').val('');
            $('#hiddenDomain').val('');
            $('#hiddenImage').val('');
        }

function removeYT() {
            $('ytPreview').html('');
            $('#ytPreview').hide();
        }

// The uploadPost function can now use myModal because it's in a broader scope
        function uploadPost() {
            // Collect the data from the inputs
            var content = $("#contentTextarea").val(); // Textarea content
            var fileInput = $("#fileInput")[0].files[0]; // The selected file
            var hiddenTitle = $("#hiddenTitle").val();
            var hiddenDesc = $("#hiddenDesc").val();
            var hiddenUrl = $("#hiddenUrl").val();
            var hiddenImage = $("#hiddenImage").val();
            var hiddenDomain = $("#hiddenDomain").val();
            var hiddenYTLink = $("#hiddenYTLink").val();

// Create a FormData object to send data (use FormData if sending files)
            var formData = new FormData();

// Conditionally append fields if they have values
            if (content) formData.append("content", content);
            if (fileInput) formData.append("media", fileInput); // Attach the file if selected
            if (hiddenTitle) formData.append("hiddenTitle", hiddenTitle);
            if (hiddenDesc) formData.append("hiddenDesc", hiddenDesc);
            if (hiddenUrl) formData.append("hiddenUrl", hiddenUrl);
            if (hiddenImage) formData.append("hiddenImage", hiddenImage);
            if (hiddenDomain) formData.append("hiddenDomain", hiddenDomain);
            if (hiddenYTLink) formData.append("hiddenYTLink", hiddenYTLink);

// Show loading spinner
            $("#loadingIcon").show();

// Send the data to PHP via AJAX
            $.ajax({
                url: 'process_data.php', // The PHP page where you want to process the data
                type: 'POST',
                data: formData,
                processData: false, // Important for sending files
                contentType: false, // Important for sending files
                success: function(response) {
                    // Hide loading spinner after response
                    $("#loadingIcon").hide();

if (response.status === 'success') {
                        alert("Posted successfully!");
                        myModal.hide(); // Use myModal here to hide the modal after successful post
                        window.location.reload();
                    } else {
                        alert("Error: " + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    $("#loadingIcon").hide();
                    alert("An error occurred: " + error);
                }
            });
        }

// Close the dropdown menu if the user clicks anywhere outside the menu or the icon
        $(document).click(function(event) {
            var $isClickInsideMenu = $(event.target).closest('.dropcardMenu');
            var $isClickInsideIcon = $(event.target).closest('.menu-container');

// Close the dropdown if the click is outside the menu and icon
            if ($isClickInsideMenu.length === 0 && $isClickInsideIcon.length === 0) {
                closeAllDropcardMenus();
            }
        });

// Add event listeners to Edit and Delete buttons to close the dropdown when clicked
        $('.editBtn').click(function() {
            closeAllDropcardMenus();
        });

$('.dropcardMenu a button').click(function() {
            closeAllDropcardMenus();
        });

// Attach the `oninput` event for dynamic resizing
        $(document).on('input', '#contentTextarea', function() {
            adjustTextareaHeight(this);
        });

$(function() {
            // Initialize the modal when the document is ready
            myModal = new bootstrap.Modal($("#uploadModal")[0]);

// Event listener for showing the modal (for example, when the plus button is clicked)
            $("#plusButton").on("click", function() {
                myModal.show(); // Show the modal
            });
        });
    </script>

if (type === 'video') {
                const video = $('<video></video>').attr('controls', true).css({
                    'max-width': '100%',
                    'max-height': '100%'
                }).attr('src', path);
                modalContent.append(video);
            } else if (type === 'image') {
                const imgContainer = $('<div></div>').css({
                    'position': 'relative',
                    'overflow': 'auto', // Allow scrolling when zoomed in
                    'width': '100%',
                    'height': '100%',
                    'display': 'flex',
                    'justify-content': 'center', // Center the image horizontally
                    'align-items': 'center' // Center the image vertically
                });

const img = $('<img></img>').attr('src', path).css({
                    'max-width': '100%',
                    'max-height': '100%',
                    'cursor': 'zoom-in', // Cursor will indicate zooming
                    'transition': 'transform 0.3s ease' // Smooth transition for scaling
                }).attr('id', 'zoomableImage');

imgContainer.append(img);
                modalContent.append(imgContainer);
            }

// Initialize modal
            const modal = new bootstrap.Modal($('#mediaModal')[0]);
            modal.show();

// Add zoom functionality
            if (type === 'image') {
                const zoomableImage = $('#zoomableImage');
                const imgContainer = zoomableImage.parent();
                let scaleValue = 1; // Start with the image at its original size (100%)

// Click event to zoom in (only zoom in, no zoom out)
                zoomableImage.on('click', function() {
                    if (scaleValue < 2) { // Zoom in by 50% up to a max scale of 2 (200%)
                        scaleValue += 0.5; // Zoom in by 50%
                        zoomableImage.css('cursor', 'zoom-out'); // Change cursor to zoom-out after zooming in
                    }
                    zoomableImage.css('transform', `scale(${scaleValue})`);
                });

// Enable scrolling to zoom in (no zoom out)
                zoomableImage.on('wheel', function(event) {
                    event.preventDefault();

// Zoom in when scrolling up
                    if (scaleValue < 2 && event.originalEvent.deltaY < 0) { // Zoom in if scale < 2 and scroll up
                        scaleValue += 0.1; // Zoom in by 10%
                    }

scaleValue = Math.min(scaleValue, 2); // Limit the zoom to 200%

zoomableImage.css('transform', `scale(${scaleValue})`);
                });

// Allow dragging functionality after zooming in (scroll to move the image)
                let isDragging = false;
                let startX, startY, scrollLeft, scrollTop;

imgContainer.on('mousedown', function(e) {
                    if (scaleValue > 1) { // Enable dragging only when zoomed in
                        isDragging = true;
                        startX = e.pageX - imgContainer.offset().left;
                        startY = e.pageY - imgContainer.offset().top;
                        scrollLeft = imgContainer.scrollLeft();
                        scrollTop = imgContainer.scrollTop();
                    }
                });

imgContainer.on('mouseleave mouseup', function() {
                    isDragging = false;
                });

imgContainer.on('mousemove', function(e) {
                    if (!isDragging) return;
                    e.preventDefault();
                    const moveX = e.pageX - startX;
                    const moveY = e.pageY - startY;
                    imgContainer.scrollLeft(scrollLeft - moveX);
                    imgContainer.scrollTop(scrollTop - moveY);
                });
            }
        }
    </script>

<!-- <script>
        // Check for Web Speech API compatibility
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        let recognition;

if (SpeechRecognition) {
            recognition = new SpeechRecognition();
            recognition.lang = "en-US"; // Set the language
            recognition.continuous = true; // Keep recording until stopped
            recognition.interimResults = true; // Show results in real time

recognition.onresult = (event) => {
                const textarea = document.getElementById("contentTextarea");
                let transcript = '';

for (let i = event.resultIndex; i < event.results.length; i++) {
                    transcript += event.results[i][0].transcript;
                }
                textarea.value = transcript; // Update textarea with spoken text
            };

recognition.onerror = (event) => {
                console.error("Speech recognition error detected: " + event.error);
            };
        }
        // Function to start/stop recording
        function startRecording() {
            if (recognition) {
                if (recognition.recognizing) {
                    recognition.stop(); // Stop recognition if it's already running
                } else {
                    recognition.start(); // Start recognition
                }
            }
        }
    </script> -->

}

.streamLeftbar {
            height: 85vh;
            overflow-y: auto;
        }

.first_right_container {
            height: 85vh;
            overflow-y: scroll;
            padding-bottom: 55px;

}
    </style>

</head>

<div class="streamLeftbar">
            <?php
            // include '../assets/php/sidebar.php'
            ?>
        </div>

<div class="modal fade" id="editPostModal" tabindex="-1" aria-labelledby="editPostModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPostModalLabel">Edit Post</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    
                    <textarea id="modalContentTextarea" class="form-control" rows="5" style="overflow-y: auto; max-height: 200px;"></textarea>
                </div>
                <div class="modal-footer">
                    
                    <button type="button" id="saveModalEditButton" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="likedUsersModal" tabindex="-1" aria-labelledby="likedUsersModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:fit-content">
            <div class="modal-content" style="margin-left: 50px;">
                <div class="modal-header">
                    <h5 class="modal-title" id="likedUsersModalLabel">People who liked this post</h5>
                </div>
                <div class="modal-body">
                    <ul id="likedUsersList" class="list-group">
                        
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Share</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="background-color:#555"></button>
                </div>
                <div class="modal-body">
                    
                    <div class="upload-section">
                        <div class="d-flex align-items-start">
                            <div class="w-100">
                                <div id="loadingIndicator" style="display: none; font-size: 14px; color: gray;">Generating<span id="dots">...</span></div>
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <textarea id="contentTextarea" class="form-control mb-2" placeholder="What would you like to share?"
                                        style="flex: 1; overflow: hidden; resize: none;" oninput="adjustTextareaHeight(this)"></textarea>
                                </div>

<div id="ytPreview" class="mt-3 ytprew"></div>
                                <div id="loadingIcon" class="text-center" style="display:none;">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>

<div id="mediaModal" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button style="background-color:#333; position:absolute; right:20px;" type="button" class="btn-close zoomButton" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" style="position: relative;">
                    <div id="modalContent" style="max-width: auto; max-height: auto; transition: transform 0.3s ease;">

</div>
                </div>
            </div>
        </div>
    </div>

<? include '../assets/php/footer.php' ?>
    <? include '../assets/php/bottom_navbar.php' ?>

</body>

</html>