Files
web_huangguo_web/app/templates/page/play.html
T
fish03andClaude Opus 5.5 bef9f8b4ed Initial commit
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-23 14:43:16 +07:00

498 lines
31 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{template "seoCommon" .}}
{{$siteTitle := "黄果短剧"}}{{if and .playlet .playlet.SeoInfo.WebSiteName}}{{$siteTitle = .playlet.SeoInfo.WebSiteName}}{{else if and .chapter .chapter.SeoInfo.WebSiteName}}{{$siteTitle = .chapter.SeoInfo.WebSiteName}}{{else if .seoInfo.WebSiteName}}{{$siteTitle = .seoInfo.WebSiteName}}{{else if .appConfig.SeoInfo.WebSiteName}}{{$siteTitle = .appConfig.SeoInfo.WebSiteName}}{{end}}
{{$pageTitle := "在线播放"}}
{{if .chapter}}
{{if .chapter.SeoInfo.Title}}{{if .chapter.CurrentEpisode}}{{$pageTitle = printf "%s - 第%d集" .chapter.SeoInfo.Title .chapter.CurrentEpisode}}{{else}}{{$pageTitle = .chapter.SeoInfo.Title}}{{end}}
{{else if .playlet}}{{if .playlet.SeoInfo.Title}}{{if .chapter.CurrentEpisode}}{{$pageTitle = printf "%s - 第%d集" .playlet.SeoInfo.Title .chapter.CurrentEpisode}}{{else}}{{$pageTitle = .playlet.SeoInfo.Title}}{{end}}{{else if .title}}{{$pageTitle = .title}}{{end}}
{{else if .title}}{{$pageTitle = .title}}{{end}}
{{else if .playlet}}{{if .playlet.SeoInfo.Title}}{{$pageTitle = .playlet.SeoInfo.Title}}{{else if .title}}{{$pageTitle = .title}}{{end}}
{{else if .title}}{{$pageTitle = .title}}{{end}}
<title>{{$pageTitle}} - {{$siteTitle}}</title>
<meta name="description" content="{{if .playlet}}{{if .playlet.Desc}}{{.playlet.Desc}}{{else}}正在播放《{{.playlet.Title}}》{{if .chapter}}第{{.chapter.CurrentEpisode}}集{{end}},高清在线观看。{{end}}{{else if .seoInfo.Description}}{{.seoInfo.Description}}{{else}}黄果短剧高清在线播放,流畅观影不错过精彩剧情。{{end}} - 黄果短剧">
<meta name="keywords" content="{{if .playlet}}{{.playlet.Title}}{{range .playlet.ThemeNames}},{{.}}{{end}}{{range .playlet.TagNames}},{{.}}{{end}},在线播放,短剧播放,黄果短剧{{else if .seoInfo.Keywords}}{{joinStrings .seoInfo.Keywords ","}}{{else}}短剧播放,在线观看,黄果短剧{{end}}">
<meta property="og:type" content="video.episode">
<meta property="og:title" content="{{$pageTitle}} - {{$siteTitle}}">
<meta property="og:description" content="{{if .playlet}}{{if .playlet.Desc}}{{.playlet.Desc}}{{else}}正在播放《{{.playlet.Title}}》{{end}}{{else if .seoInfo.Description}}{{.seoInfo.Description}}{{else}}黄果短剧高清在线播放。{{end}}">
{{if .playlet}}{{if .playlet.Cover}}<meta property="og:image" content="{{.playlet.Cover}}">
<meta name="twitter:image" content="{{.playlet.Cover}}">{{end}}{{end}}
<meta name="twitter:title" content="{{$pageTitle}} - {{$siteTitle}}">
<meta name="twitter:description" content="{{if .playlet}}{{if .playlet.Desc}}{{.playlet.Desc}}{{else}}正在播放《{{.playlet.Title}}》{{end}}{{else if .seoInfo.Description}}{{.seoInfo.Description}}{{else}}黄果短剧高清在线播放。{{end}}">
{{if .jsonLD}}
<script type="application/ld+json">{{.jsonLD}}</script>
{{end}}
<link rel="stylesheet" href="/static/css/index.css?v=27">
<link rel="stylesheet" href="/static/css/detail.css?v=29">
<link rel="stylesheet" href="/static/css/play.css?v=26">
<link rel="stylesheet" href="/static/common/DPlayer.min.css">
<script defer src="/static/common/hls.min.js"></script>
<script defer src="/static/common/DPlayer.min.js"></script>
</head>
<body class="site-shell is-play-page">
{{template "header" .}}
{{$playlet := .playlet}}
{{$chapter := .chapter}}
{{$playletID := .playletID}}
{{$playletSlug := .playletSlug}}
{{$canWatch := false}}
{{$needUnlock := false}}
{{$needVip := false}}
{{$unlockCost := 0}}
{{if $chapter}}
{{$canWatch = $chapter.AllowWatch}}
{{$needUnlock = $chapter.NeedUnlock}}
{{$needVip = $chapter.NeedVip}}
{{$unlockCost = $chapter.UnlockCost}}
{{end}}
{{if or $chapter $playlet}}
{{$isLike := 2}}
{{$isCollect := 2}}
{{$countLike := 0}}
{{$countCollect := 0}}
{{if $playlet}}
{{$isLike = $playlet.IsLike}}
{{$isCollect = $playlet.IsCollect}}
{{$countLike = $playlet.CountLike}}
{{$countCollect = $playlet.CountCollect}}
{{end}}
<main
class="page-shell play-page"
data-play-page
data-playlet-id="{{$playletID}}"
data-playlet-slug="{{$playletSlug}}"
data-play-title="{{if $playlet}}{{$playlet.Title}}{{end}}"
data-play-cover="{{if $playlet}}{{$playlet.Cover}}{{end}}"
data-play-desc="{{if $playlet}}{{$playlet.Desc}}{{end}}"
data-play-tag="{{if $playlet}}{{themeTagText $playlet.ThemeNames $playlet.TagNames}}{{end}}"
data-play-featured="{{if and $playlet $playlet.IsFeatured}}1{{else}}0{{end}}"
data-play-new="{{if and $playlet $playlet.IsNew}}1{{else}}0{{end}}"
data-play-total-episode="{{if $playlet}}{{$playlet.TotalEpisode}}{{else}}0{{end}}"
data-play-episode="{{if $chapter}}{{$chapter.CurrentEpisode}}{{else}}0{{end}}"
>
<nav class="play-breadcrumb" aria-label="面包屑">
<a class="play-breadcrumb-link" href="/">首页</a>
<span class="play-breadcrumb-sep">/</span>
<a class="play-breadcrumb-link" href="/list/ai-short-play/">短剧</a>
<span class="play-breadcrumb-sep">/</span>
{{if $playletID}}
<a class="play-breadcrumb-link" href="{{detailURL $playletSlug $playletID}}">{{if $playlet}}{{$playlet.Title}}{{else}}短剧{{end}}</a>
{{else}}
<span class="play-breadcrumb-link">{{if $playlet}}{{$playlet.Title}}{{else}}短剧{{end}}</span>
{{end}}
{{if $chapter}}
<span class="play-breadcrumb-sep">/</span>
<span class="play-breadcrumb-current">第{{$chapter.CurrentEpisode}}集</span>
{{end}}
</nav>
<div class="play-layout">
<div class="play-main">
<div class="play-player" data-play-player data-playlet-id="{{$playletID}}"{{if $chapter}} data-chapter-id="{{$chapter.ID}}" data-pay-type="{{$chapter.PayType}}" data-single-coins="{{$unlockCost}}" data-can-watch="{{if $canWatch}}1{{else}}0{{end}}" data-need-unlock="{{if $needUnlock}}1{{else}}0{{end}}" data-need-vip="{{if $needVip}}1{{else}}0{{end}}" data-is-unlocked="{{if $chapter.IsUnlocked}}1{{else}}0{{end}}"{{end}}>
{{if and $chapter $canWatch $chapter.VideoURL}}
<div class="dplayer-video"
data-url="{{$chapter.VideoURL}}"
{{if and $playlet $playlet.Cover}}data-cover="{{$playlet.Cover}}"{{end}}></div>
{{end}}
{{if $playlet}}
<img class="play-player-cover lazy" src="/static/images/placeholder.png?v=2" data-src="{{$playlet.Cover}}" alt="{{$playlet.Title}}" title="{{$playlet.Title}}" data-play-poster />
{{else}}
<img class="play-player-cover" src="/static/images/placeholder.png?v=2" alt="短剧封面" title="短剧封面" data-play-poster />
{{end}}
{{if and $chapter $canWatch $chapter.VideoURL}}
<button class="play-player-center" type="button" aria-label="播放" data-play-poster-play>
<img src="/static/images/figma-play/control-center-play.svg" alt="播放" />
</button>
{{end}}
<div class="play-player-gradient play-player-gradient--top" aria-hidden="true"></div>
<div class="play-player-gradient play-player-gradient--bottom" aria-hidden="true"></div>
<div class="play-h5-top">
<a class="play-h5-back" href="{{if $playletID}}{{detailURL $playletSlug $playletID}}{{else}}/{{end}}" data-nav-back{{if $playletID}} data-nav-fallback="{{detailURL $playletSlug $playletID}}"{{else}} data-nav-fallback="/"{{end}} aria-label="返回">
<img src="/static/images/figma-play/nav-back.svg" alt="返回" />
</a>
<div class="play-h5-ep" data-play-h5-ep>{{if $chapter}}第{{$chapter.CurrentEpisode}}集{{else}}播放{{end}}</div>
<div class="play-h5-speed-wrap" data-play-speed-wrap>
<button class="play-h5-speed" type="button" data-play-speed aria-expanded="false" aria-haspopup="dialog" aria-label="倍速">
<img class="play-h5-speed-icon" src="/static/images/figma-play/nav-speed.svg" alt="倍速" />
<span data-play-speed-label>1.0x</span>
</button>
</div>
<a class="play-h5-feedback" href="/feedback/" aria-label="反馈">
<img src="/static/images/figma-play/nav-feedback.svg" alt="反馈" />
</a>
</div>
<div class="play-h5-side">
<button class="play-h5-side-item{{if eq $isLike 1}} play-h5-side-item--active{{end}}" type="button" data-detail-like data-playlet-id="{{$playletID}}" data-liked="{{$isLike}}" data-count-like="{{$countLike}}" aria-label="点赞" aria-pressed="{{if eq $isLike 1}}true{{else}}false{{end}}">
<img src="/static/images/{{if eq $isLike 1}}h5_liked.svg{{else}}like.svg{{end}}" alt="点赞" data-h5-like-icon />
<span data-detail-like-label>{{$countLike}}</span>
</button>
<button class="play-h5-side-item" type="button" data-play-comment-open>
<img src="/static/images/comment.svg" alt="评论" />
<span data-play-comment-count>{{if $chapter}}{{$chapter.CountComment}}{{else}}0{{end}}</span>
</button>
<button class="play-h5-side-item{{if eq $isCollect 1}} play-h5-side-item--active{{end}}" type="button" data-detail-collect data-playlet-id="{{$playletID}}" data-collected="{{$isCollect}}" data-count-collect="{{$countCollect}}" aria-label="收藏" aria-pressed="{{if eq $isCollect 1}}true{{else}}false{{end}}">
<img src="/static/images/{{if eq $isCollect 1}}h5_collected.svg?v=2{{else}}collect.svg{{end}}" alt="收藏" data-h5-collect-icon />
<span data-detail-collect-label>{{if eq $isCollect 1}}已收藏{{else}}收藏{{end}}</span>
</button>
<button class="play-h5-side-item" type="button" data-detail-share data-playlet-id="{{$playletID}}">
<img src="/static/images/h5_share.svg" alt="分享" />
<span>分享</span>
</button>
</div>
<div class="play-h5-meta">
<div class="play-h5-meta-title">
<button type="button" data-play-ep-open>
<span>{{if $playlet}}{{$playlet.Title}}{{else}}短剧{{end}}</span>
<img src="/static/images/arrow_right2.svg" alt="下一集" />
</button>
</div>
{{if $playlet}}
{{if $playlet.TagNames}}
<div class="play-h5-meta-tags">
{{range namedTags $playlet.TagIDs $playlet.TagNames $playlet.TagSlugs}}
{{if .URL}}<a class="play-h5-meta-tag" href="{{.URL}}">{{.Name}}</a>{{else}}<span class="play-h5-meta-tag">{{.Name}}</span>{{end}}
{{end}}
</div>
{{end}}
<div class="play-h5-meta-intro">
<p class="play-h5-meta-text" data-play-intro>{{if $playlet.Desc}}{{$playlet.Desc}}{{else}}暂无简介{{end}}</p>
<button class="play-h5-meta-more" type="button" data-play-intro-more hidden>展开</button>
</div>
{{end}}
</div>
<div class="play-h5-next" data-play-next hidden>
<span class="play-h5-next-label">自动播放下一集</span>
<span class="play-h5-next-countdown" data-play-next-countdown>倒计时3s</span>
</div>
</div>
<div class="play-h5-bottom">
<button class="play-h5-ep-picker" type="button" data-play-ep-open>
<span>选集{{if $playlet}}{{if $playlet.TotalEpisode}}·全{{$playlet.TotalEpisode}}集{{end}}·{{updateStatusText $playlet.UpdateStatus}}{{end}}</span>
<img src="/static/images/arrow_up.svg" alt="收起" />
</button>
<button class="play-h5-comment" type="button" data-play-comment-open aria-label="评论">
<img src="/static/images/comment.svg" alt="评论" />
</button>
<button class="play-h5-clear" type="button" data-play-clear aria-label="清屏">
<img src="/static/images/full_screen.svg" alt="清屏" data-play-clear-icon />
</button>
</div>
{{template "contentPromo" $}}
<div class="play-info">
<div class="play-info-text">
<div class="play-info-ep" data-play-info-ep>{{if $chapter}}第 {{$chapter.CurrentEpisode}} 集{{else}}—{{end}}</div>
<h1 class="play-info-title">{{if $playlet}}{{$playlet.Title}}{{else}}短剧播放{{end}}</h1>
{{if $playlet}}
{{if $playlet.TagNames}}
<div class="play-info-tags">
{{range namedTags $playlet.TagIDs $playlet.TagNames $playlet.TagSlugs}}
{{if .URL}}<a class="play-info-tag" href="{{.URL}}">{{.Name}}</a>{{else}}<span class="play-info-tag">{{.Name}}</span>{{end}}
{{end}}
</div>
{{end}}
{{end}}
<div class="play-info-sub" data-play-info-sub>
{{if and $playlet $chapter}}{{$playlet.Title}} - 第{{printf "%02d" $chapter.CurrentEpisode}}集{{else if $playlet}}{{$playlet.Title}}{{else}}—{{end}}
</div>
{{if $playlet}}
<div class="play-info-meta">
<span>集数:{{$playlet.TotalEpisode}}集</span>
<span>上线时间 : {{playletDateText $playlet.OnlineAt $playlet.MediaCreatedAt $playlet.CreatedAt}}</span>
</div>
<p class="play-info-desc">{{if $playlet.Desc}}{{$playlet.Desc}}{{else}}暂无简介{{end}}</p>
{{end}}
</div>
<div class="play-info-actions">
<button class="detail-action{{if eq $isLike 1}} detail-action--active{{end}}" type="button" data-detail-like data-playlet-id="{{$playletID}}" data-liked="{{$isLike}}" data-count-like="{{$countLike}}" data-like-label-mode="state">
<span class="detail-action-icon">
<img src="/static/images/like.svg" alt="点赞" />
</span>
<span data-detail-like-label>{{if eq $isLike 1}}已点赞{{else}}点赞{{end}}</span>
</button>
<span class="detail-action-sep"></span>
<button class="detail-action{{if eq $isCollect 1}} detail-action--active{{end}}" type="button" data-detail-collect data-playlet-id="{{$playletID}}" data-collected="{{$isCollect}}" data-count-collect="{{$countCollect}}">
<span class="detail-action-icon">
<img src="/static/images/collect.svg" alt="收藏" />
</span>
<span data-detail-collect-label>{{if eq $isCollect 1}}已收藏{{else}}收藏{{end}}</span>
</button>
<span class="detail-action-sep"></span>
<button class="detail-action" type="button" data-detail-share data-playlet-id="{{$playletID}}">
<span class="detail-action-icon">
<img src="/static/images/share.svg" alt="分享" />
</span>
<span>分享</span>
</button>
<span class="detail-action-sep"></span>
<a class="detail-action" href="/feedback/">
<span class="detail-action-icon">
<img src="/static/images/feedback.svg" alt="反馈" />
</span>
<span>反馈</span>
</a>
</div>
<a
class="play-download-btn"
href="{{if .appConfig.AppAddr}}{{.appConfig.AppAddr}}{{else}}/download-app/{{end}}"
{{if .appConfig.AppAddr}}target="_blank" rel="sponsored nofollow noopener noreferrer"{{end}}
>下载APP</a>
</div>
<section class="play-episodes">
<h2 class="play-episodes-label">剧集</h2>
{{with $.episodeRanges}}
<div class="play-ep-ranges" data-play-ep-ranges>
{{range $i, $r := .}}
<button class="play-ep-range{{if eq $i 0}} play-ep-range--active{{end}}" type="button" data-range-start="{{$r.Start}}" data-range-end="{{$r.End}}">{{$r.Label}}</button>
{{end}}
</div>
{{end}}
<div class="play-ep-grid" data-play-ep-grid>
{{range $.chapters}}
{{$active := and $chapter (eq .ID $chapter.ID)}}
{{if .AllowWatch}}
<a class="play-ep{{if $active}} play-ep--active{{end}}" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}" data-chapter-id="{{.ID}}" data-play-switch>
<span class="play-ep-num">{{.CurrentEpisode}}</span>
</a>
{{else if .NeedCoinGate}}
<a class="play-ep{{if $active}} play-ep--active{{end}}" href="javascript:;" data-ep="{{.CurrentEpisode}}" data-coin-dialog-open data-playlet-id="{{$playletID}}" data-chapter-id="{{.ID}}" data-single-coins="{{.UnlockCost}}" aria-label="第{{.CurrentEpisode}}集,金币解锁">
<span class="play-ep-num">{{.CurrentEpisode}}</span>
<span class="play-ep-coin" aria-hidden="true">
<img src="/static/images/coin.png?v=2" alt="" />
</span>
</a>
{{else if .NeedVipGate}}
<a class="play-ep{{if $active}} play-ep--active{{end}}" href="javascript:;" data-ep="{{.CurrentEpisode}}" data-vip-dialog-open data-chapter-id="{{.ID}}" aria-label="第{{.CurrentEpisode}}集,VIP专享">
<span class="play-ep-num">{{.CurrentEpisode}}</span>
<img class="play-ep-lock" src="/static/images/vip.png" alt="" />
</a>
{{else}}
<a class="play-ep{{if $active}} play-ep--active{{end}}" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}" data-chapter-id="{{.ID}}" data-play-switch>
<span class="play-ep-num">{{.CurrentEpisode}}</span>
</a>
{{end}}
{{else}}
<div class="section-empty">暂无剧集</div>
{{end}}
</div>
</section>
{{template "contentOfficialInfo" $}}
{{template "contentAds" $}}
{{if $chapter}}
<section class="detail-comments play-comments"
data-comment-object-id="{{$chapter.ID}}"
data-comment-object-type="11"
data-comment-size="10">
<div class="detail-comments-head">
<h2 class="detail-comments-title" data-comment-title>评论</h2>
<div class="detail-comments-head-gap" aria-hidden="true"></div>
<div class="detail-comments-sort">
<button class="detail-sort-btn detail-sort-btn--active" type="button" data-comment-sort="1">热门</button>
<button class="detail-sort-btn" type="button" data-comment-sort="2">最新</button>
</div>
</div>
{{if $.isLoggedIn}}
<div class="detail-comment-composer">
{{if $.avatar}}
<img class="detail-comment-composer-avatar lazy" src="/static/images/placeholder.png?v=2" data-src="{{$.avatar}}" alt="我的头像" />
{{else}}
<img class="detail-comment-composer-avatar" src="/static/images/avatar.png" alt="默认用户头像" />
{{end}}
<div class="detail-comment-composer-main">
<textarea class="detail-comment-composer-input" maxlength="200" placeholder="说说你对这部剧的看法…" rows="2"></textarea>
<div class="detail-comment-composer-footer">
<div class="detail-comment-composer-status">
<span class="detail-comment-composer-logged">已登录</span>
{{if $.userName}}<span class="detail-comment-composer-user">{{$.userName}}</span>{{end}}
<span class="detail-comment-composer-count">0 / 200</span>
</div>
<button class="detail-comment-composer-submit" type="button" data-comment-send>发表评论</button>
</div>
</div>
</div>
{{else}}
<div class="detail-comments-login">
<a class="detail-comments-login-link" href="#login" data-login-dialog-open>登录</a>
<span class="detail-comments-login-hint"> 后参与讨论</span>
</div>
{{end}}
<div class="detail-comment-list" data-comment-list>
<div class="section-empty" data-comment-loading>评论加载中…</div>
</div>
<button class="detail-comments-more" type="button" data-comment-more hidden>加载更多</button>
</section>
{{end}}
</div>
<div class="content-column-divider" aria-hidden="true"></div>
<aside class="play-sidebar">
{{if $playlet}}{{template "contentHotSidebar" $playlet}}{{end}}
</aside>
</div>
</main>
<div class="play-h5-sheet-mask" aria-hidden="true"></div>
<div class="play-speed-sheet" data-play-speed-sheet role="dialog" aria-modal="true" aria-label="倍速">
<div class="play-speed-sheet-head">
<button class="play-speed-sheet-collapse" type="button" aria-label="收起" data-play-speed-close>
<img src="/static/images/arrow_down.svg" alt="展开选集" />
</button>
<div class="play-speed-sheet-title">倍速</div>
<div class="play-speed-sheet-spacer" aria-hidden="true"></div>
</div>
<div class="play-speed-sheet-list" data-play-speed-menu role="listbox" aria-label="选择倍速"></div>
</div>
<div class="play-ep-sheet" data-play-ep-sheet role="dialog" aria-modal="true" aria-label="选集">
<div class="play-ep-sheet-handle" aria-hidden="true"></div>
{{if $playlet}}
<div class="play-ep-sheet-drama">
<div class="play-ep-sheet-drama-main">
<img class="play-ep-sheet-cover lazy" src="/static/images/placeholder.png?v=2" data-src="{{$playlet.Cover}}" alt="{{$playlet.Title}}" title="{{$playlet.Title}}" />
<div class="play-ep-sheet-drama-info">
<div class="play-ep-sheet-drama-title">
<span>{{$playlet.Title}}</span>
<button class="play-ep-sheet-drama-close" type="button" aria-label="关闭" data-play-ep-close>
<img src="/static/images/arrow_right2.svg" alt="下一集" />
</button>
</div>
<div class="play-ep-sheet-drama-status">{{updateStatusText $playlet.UpdateStatus}}{{if $playlet.TotalEpisode}} 共{{$playlet.TotalEpisode}}集{{end}}</div>
</div>
</div>
<button class="play-ep-sheet-collect{{if eq $isCollect 1}} is-collected{{end}}" type="button" data-detail-collect data-playlet-id="{{$playletID}}" data-collected="{{$isCollect}}" data-count-collect="{{$countCollect}}">
<span data-detail-collect-label>{{if eq $isCollect 1}}已收藏{{else}}收藏{{end}}</span>
</button>
</div>
{{end}}
<div class="play-ep-sheet-tabs">
{{range $i, $r := $.episodeRanges}}
<button class="play-ep-sheet-tab{{if eq $i 0}} play-ep-sheet-tab--active{{end}}" type="button" data-ep-tab="eps" data-range-start="{{$r.Start}}" data-range-end="{{$r.End}}">{{$r.Label}}</button>
{{end}}
{{if and $playlet $playlet.RelatedRecommendData}}
<button class="play-ep-sheet-tab" type="button" data-ep-tab="more">更多好剧</button>
{{end}}
</div>
<div class="play-ep-sheet-panel" data-ep-panel="eps">
<div class="play-ep-sheet-grid">
{{range $.chapters}}
{{$active := and $chapter (eq .ID $chapter.ID)}}
{{if .AllowWatch}}
<a class="play-ep-sheet-item{{if $active}} play-ep-sheet-item--active{{end}}" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}" data-chapter-id="{{.ID}}" data-play-switch>
<span class="play-ep-sheet-num">{{.CurrentEpisode}}</span>
</a>
{{else if .NeedCoinGate}}
<a class="play-ep-sheet-item{{if $active}} play-ep-sheet-item--active{{end}}" href="javascript:;" data-ep="{{.CurrentEpisode}}" data-coin-dialog-open data-playlet-id="{{$playletID}}" data-chapter-id="{{.ID}}" data-single-coins="{{.UnlockCost}}" aria-label="第{{.CurrentEpisode}}集,金币解锁">
<span class="play-ep-sheet-num">{{.CurrentEpisode}}</span>
<span class="play-ep-sheet-coin" aria-hidden="true">
<img src="/static/images/coin.png?v=2" alt="" />
</span>
</a>
{{else if .NeedVipGate}}
<a class="play-ep-sheet-item{{if $active}} play-ep-sheet-item--active{{end}}" href="javascript:;" data-ep="{{.CurrentEpisode}}" data-vip-dialog-open data-chapter-id="{{.ID}}" aria-label="第{{.CurrentEpisode}}集,VIP专享">
<span class="play-ep-sheet-num">{{.CurrentEpisode}}</span>
<img class="play-ep-sheet-lock" src="/static/images/vip.png" alt="" />
</a>
{{else}}
<a class="play-ep-sheet-item{{if $active}} play-ep-sheet-item--active{{end}}" href="{{chapterPlayURL $playletSlug $playletID .ID}}" data-ep="{{.CurrentEpisode}}" data-chapter-id="{{.ID}}" data-play-switch>
<span class="play-ep-sheet-num">{{.CurrentEpisode}}</span>
</a>
{{end}}
{{else}}
<div class="section-empty">暂无剧集</div>
{{end}}
</div>
</div>
{{if and $playlet $playlet.RelatedRecommendData}}
<div class="play-ep-sheet-panel play-ep-sheet-panel--more is-hidden" data-ep-panel="more">
<div class="play-ep-more-grid">
{{range $playlet.RelatedRecommendData}}
<a class="play-ep-more-card" href="{{detailURL .Slug .ID}}">
<div class="play-ep-more-cover">
<img class="lazy" src="/static/images/placeholder.png?v=2" data-src="{{coverURL .Cover .Banner}}" alt="{{.Title}}" title="{{.Title}}" />
<div class="play-ep-more-heat">
<img src="/static/images/playing.svg" alt="正在播放" />
<span>{{formatHeat .HeatValue}}</span>
</div>
</div>
<div class="play-ep-more-title">{{.Title}}</div>
{{$tag := themeTagText .ThemeNames .TagNames}}{{$ep := episodeLabel .TotalEpisode}}
<div class="play-ep-more-meta">{{if and $tag $ep}}{{$tag}} · {{$ep}}{{else}}{{or $tag $ep}}{{end}}</div>
</a>
{{end}}
</div>
</div>
{{end}}
</div>
{{if $chapter}}
<div class="play-comment-sheet" data-play-comment-sheet role="dialog" aria-modal="true" aria-label="评论">
<div class="play-comment-sheet-panel">
<div class="play-comment-sheet-head">
<button class="play-comment-sheet-collapse" type="button" aria-label="收起" data-play-comment-close>
<img src="/static/images/arrow_down.svg" alt="展开" />
</button>
<div class="play-comment-sheet-title" data-play-comment-title>评论</div>
<div class="play-comment-sort" role="tablist" aria-label="评论排序">
<button class="play-comment-sort-btn play-comment-sort-btn--active" type="button" data-comment-sort="2">最新</button>
<button class="play-comment-sort-btn" type="button" data-comment-sort="1">最热</button>
</div>
</div>
<section class="detail-comments play-comment-sheet-body" aria-label="评论列表"
data-comment-object-id="{{$chapter.ID}}"
data-comment-object-type="11"
data-comment-size="10"
data-comment-sort-default="2">
<div class="play-comment-sheet-list detail-comment-list" data-comment-list>
<div class="section-empty play-comment-empty" data-comment-loading>评论加载中…</div>
</div>
<button class="detail-comments-more play-comment-sheet-more" type="button" data-comment-more hidden>加载更多</button>
</section>
</div>
<div class="play-comment-composer">
{{if $.isLoggedIn}}
<div class="play-comment-composer-box">
<input class="play-comment-composer-input" type="text" maxlength="200" placeholder="发表评论…" autocomplete="off" />
<button class="play-comment-composer-emoji" type="button" data-comment-send aria-label="发表评论">
<img src="/static/images/smile.svg" alt="表情" />
</button>
</div>
{{else}}
<a class="play-comment-composer-box play-comment-composer-box--login" href="#login" data-login-dialog-open>
<span class="play-comment-composer-placeholder">发表评论…</span>
<span class="play-comment-composer-emoji" aria-hidden="true">
<img src="/static/images/smile.svg" alt="表情" />
</span>
</a>
{{end}}
</div>
</div>
{{end}}
{{else}}
<main class="page-shell play-page">
<h1 class="seo-visually-hidden">短剧播放 - 黄果短剧</h1>
{{template "empty" .}}
</main>
{{end}}
{{template "footer" .}}
{{template "vipDialog" .}}
{{template "coinDialog" .}}
<script src="/static/js/pages/detail.js?v=14"></script>
<script src="/static/js/pages/play.js?v=13"></script>
</body>
</html>