View file zip0.ru/stories_view.php

<?php
require_once 'db.php';

if (empty($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

$view_id = isset($_GET['user_id']) ? (int)$_GET['user_id'] : 0;
if ($view_id <= 0) {
    header('Location: stories_feed.php');
    exit;
}

// пользователь
$stmt = $mysqli->prepare("SELECT id, name, photo FROM users WHERE id = ?");
$stmt->bind_param('i', $view_id);
$stmt->execute();
$user = $stmt->get_result()->fetch_assoc();
$stmt->close();

if (!$user) {
    include 'header.php';
    echo '<p>Пользователь не найден.</p>';
    include 'footer.php';
    exit;
}

// его активные истории
$stmt = $mysqli->prepare("
    SELECT id, filename, media_type, caption, created_at
    FROM stories
    WHERE user_id = ? AND expires_at > NOW()
    ORDER BY created_at ASC
");
$stmt->bind_param('i', $view_id);
$stmt->execute();
$stories = $stmt->get_result();
$stmt->close();

include 'header.php';
?>

<style>
.story-view-page{margin-top:18px;}
.story-view-card{
    max-width:480px;margin:0 auto;
    background:#fff;border-radius:22px;
    padding:16px 16px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    text-align:center;
}
.story-view-header{
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.story-view-avatar{
    width:42px;height:42px;border-radius:999px;object-fit:cover;
    border:2px solid #ff7aa8;
}
.story-view-avatar-placeholder{
    width:42px;height:42px;border-radius:999px;
    background:linear-gradient(135deg,#ffe5f0,#f5ebff);
    display:flex;align-items:center;justify-content:center;font-size:20px;
    border:2px solid #ff7aa8;
}
.story-view-name{font-size:14px;font-weight:600;}
.story-view-media{
    width:100%;max-height:420px;border-radius:18px;object-fit:cover;margin-bottom:8px;
    background:#000;
}
.story-view-controls{
    display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:#7b7287;
}
</style>

<div class="story-view-page">
    <h1>Истории</h1>

    <?php if ($stories->num_rows === 0): ?>
        <p>У пользователя пока нет активных историй.</p>
    <?php else: ?>
        <?php
        $storiesArr = [];
        while ($s = $stories->fetch_assoc()) {
            $storiesArr[] = $s;
        }
        ?>
        <div class="story-view-card" data-count="<?= count($storiesArr) ?>">
            <div class="story-view-header">
                <?php if ($user['photo']): ?>
                    <img src="/assets/img/<?= htmlspecialchars($user['photo']) ?>" class="story-view-avatar" alt="">
                <?php else: ?>
                    <div class="story-view-avatar-placeholder">🙂</div>
                <?php endif; ?>
                <div>
                    <div class="story-view-name"><?= htmlspecialchars($user['name'] ?: 'Без имени') ?></div>
                    <div style="font-size:11px;color:#a29ab4;">Истории <?= count($storiesArr) ?></div>
                </div>
            </div>

            <div id="story-container">
                <!-- сюда вставит JS -->
            </div>

            <div class="story-view-controls">
                <button type="button" id="story-prev" class="btn-outline btn-small">Назад</button>
                <button type="button" id="story-next" class="btn-outline btn-small">Далее</button>
            </div>
        </div>

        <script>
        (function(){
            const stories = <?= json_encode($storiesArr, JSON_UNESCAPED_UNICODE) ?>;
            let index = 0;

            const container = document.getElementById('story-container');
            const prevBtn   = document.getElementById('story-prev');
            const nextBtn   = document.getElementById('story-next');

            function render() {
                const s = stories[index];
                let html = '';

                if (s.media_type === 'image') {
                    html += '<img src="/assets/stories/'+encodeURIComponent(s.filename)+'" class="story-view-media">';
                } else {
                    html += '<video class="story-view-media" controls autoplay playsinline>' +
                            '<source src="/assets/stories/'+encodeURIComponent(s.filename)+'">' +
                            'Ваш браузер не поддерживает видео.' +
                            '</video>';
                }

                html += '<div style="font-size:13px;margin-top:4px;">';
                if (s.caption) {
                    html += '<div>'+escapeHtml(s.caption)+'</div>';
                }
                html += '<div style="font-size:11px;color:#a29ab4;">'+s.created_at+'</div>';
                html += '</div>';

                container.innerHTML = html;
                prevBtn.disabled = (index === 0);
                nextBtn.disabled = (index === stories.length-1);
            }

            function escapeHtml(text) {
                const map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
                return String(text).replace(/[&<>"']/g, m => map[m]);
            }

            prevBtn.addEventListener('click', function(){
                if (index > 0) { index--; render(); }
            });
            nextBtn.addEventListener('click', function(){
                if (index < stories.length-1) { index++; render(); }
            });

            render();
        })();
        </script>
    <?php endif; ?>
</div>

<?php include 'footer.php'; ?>