OXIESEC PANEL

	Name	Size	Modified	Perms
	📁 ..	-	05/19/2025 10:07:13 AM	rwxr-xr-x
	📄 follow_dash.php	33.55 KB	05/19/2025 10:07:13 AM	rw-r--r--

Editing: follow_dash.php

<?php
include './assets/php/db_connect.php';
include './inc/config.php';
include './assets/php/validate.logged.php';
include './assets/php/function.php';

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 rs.*
            FROM reader_stream rs
            INNER JOIN reader_stream_follow rf ON rs.userId = rf.following_id
            WHERE rf.follower_id = ? 
              AND rs.deleteFlag = 0 
              AND rs.referenceId IS NULL 
            ORDER BY rs.postedOn DESC,
            rs.id DESC";

// Prepare the statement and bind the parameters
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $gUserId); // Bind the userId parameter
    $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>

$(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> -->

</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>